1 项目简介

本项目是前后端分离项目：springboot+vue。数据库mysql已经在docker中提前部署好了，因此这里只讲述前端和后端的项目部署。

关键词：Linux、docker、docker-compose（详见本文的第三部分，知识储备：docker-compose）

目标：在docker中部署前后端项目。

2 部署

参考视频：https://www.bilibili.com/video/BV17A411E7aE?p=9&spm_id_from=pageDriver

参考文档：https://juejin.cn/post/6886061338804617229/

视频和文档配套。视频讲述的是docker+docker-compose部署前后端项目，其中涉及到：nginx、mysql、redis等

2.1 安装所需要的工具

如果已经安装好docker、docker-compose可以跳过此步骤

# 安装docker
这里推荐一个连接，里边有详细的docker安装过程。https://blog.csdn.net/qq_43644923/article/details/117457549
# 查看docker是否安装成功
docker version

# 安装docker-compose
详见本篇文章的第三部分，知识储备：docker-compose
# 测试是否安装成功
docker-compose --version

2.2 撰写Dockerfile

建议：把该文件创建在springboot项目的根目录下

# 基于java:8
FROM java:8
# 复制当前目录下的order-0.0.1-SNAPSHOT.jar文件（这是springboot项目打包后的压缩包）到容器内
COPY order-0.0.1-SNAPSHOT.jar /app.jar

CMD ["--server.port=8010"]
# 暴露端口8010
EXPOSE 8010
# 启动项目
ENTRYPOINT ["java","-jar","/app.jar"]

2.3 撰写docker-compose.yml

建议：把该文件创建在springboot项目的根目录下

version: "3"
services:
  nginx: # 服务名称，用户自定义
    image: nginx:latest  # 镜像版本
    ports:
      - 8011:80  # 暴露端口
    volumes: # 挂载
      - /home/nginx/html:/usr/share/nginx/html
      - /home/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题

  order:
    image: order-server:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 8010:8010

2.4 部署前端

前端项目依赖镜像nginx，根据docker-compose.yml我们知道，需要在linux中创建对应的目录来放置项目以及配置nginx

2.4.1 构建前端项目

npm run build
# 构建成功后，在根目录下会多出一个dist目录，这也是将来需要上传的目录

2.4.2 在linux中nginx镜像的挂载目录

# 创建前端代码的放置目录
mkdir /home/nginx/html

# 创建配置文件
cd /home/nginx
touch nginx.conf	

nginx.conf文件

#user  root;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
                        try_files $uri $uri/ /index.html last; # 别忘了这个哈
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

2.4.3 将前端构建的dist目录上传至/home/nginx/html

# 注意，上传成功的目录大致如下：通过观察我们可以确认，是将dist目录下的所有文件上传到/home/nginx/html目录下。
[root@wdc970709 html]# cd /home/nginx/html/
[root@wdc970709 html]# ll
总用量 240
drwxr-xr-x 2 root root   4096 6月   4 15:04 css
drwxr-xr-x 2 root root   4096 6月   4 15:04 fonts
-rw-r--r-- 1 root root 218330 6月   4 15:04 hebeu.ico
drwxr-xr-x 2 root root   4096 6月   4 15:04 img
-rw-r--r-- 1 root root   1535 6月   4 15:04 index.html
drwxr-xr-x 2 root root   4096 6月   4 15:04 js
-rw-r--r-- 1 root root   1218 6月   4 15:04 reset.css

推荐一种解决方案

① 压缩dist文件夹，生成dist.zip，然后上传至/home/nginx/html目录下

② 解压dist.zip

unzip dist.zip

③ 观察/home/nginx/html目录下的文件，我做的时候，解压完没有生成文件夹，所以删除了压缩包就OK了，那如果有朋友解压在/home/nginx/html/dist目录下，那么要把该目录下的文件移到/home/nginx/html目录下，

2.5 部署后端

2.5.1 构建jar包，并上传jar包，Dockerfile，docker-compose.yml到Linux中

这里上传目录可以随意，但是要记住，我这里上传到/home/order-restaurant下

但是：jar包，Dockerfile，docker-compose.yml这三个文件必须在同级目录下

2.5.2 启动服务

docker-compose up -d

3 知识储备：docker-compose

老规矩朋友们，先上一个学习网址：https://www.runoob.com/docker/docker-compose.html

3.1 简介

Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML 文件来配置应用程序需要的所有服务。然后，使用一个命令，就可以从 YML 文件配置中创建并启动所有服务。

3.2 安装

上官网：https://docs.docker.com/compose/install/#alternative-install-options

先说卸载

# 卸载docker-compose
sudo rm /usr/local/bin/docker-compose

再说安装

# 运行此命令以下载 Docker Compose 的当前稳定版本：
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 对二进制文件应用可执行权限：
sudo chmod +x /usr/local/bin/docker-compose

# 测试是否安装成功
docker-compose --version