使用docker部署springboot + vue项目

如何完整部署项目？

使用 docker 部署springboot + vue项目

提前用docker部署好相关环境（MySQL、Redis…）
docker部署相关环境

服务端部署

• 首先将springboot项目打成jar包
• 创建Dockerfile文件，内容如下：

#版本为java8
FROM openjdk:8u302-jdk
#将所有jar包复制
COPY *.jar /app.jar
#服务端口号
CMD ["--server.port=8080"]
#向外面暴露的端口
EXPOSE 8080
#容器启动的时候运行的命令
ENTRYPOINT ["java","-jar","/app.jar"]

• 将jar包、Dockerfile文件上传到服务器同一目录下
• 进入上述目录下，运行如下命令，构建docker镜像：

docker build -t qing:1.0 -f Dockerfile .

• docker运行镜像，命令如下：

docker run -itd --name qing -p 8080:8080 -v /mydata/apps/qing/data:/data/files qing:1.0

命令参数解析：

-i：以交互模式运行容器，通常与 -t 同时使用

-t：为容器重新分配⼀个伪输入终端，通常与 -i 同时使用

-d：后台运行容器，并返回容器id

-p：端口映射（前者宿主机端口映射后者docker容器内部端口）

-name：为容器指定一个名称（自定义）

-v：数据卷挂载（可以挂载目录或者文件）

qing:1.0：指定运行哪个镜像（镜像名+标签）

（前端部署之前，请求后端地址IP一定要做修改，改成部署主机IP）

前端部署

vue项目打包

在vue项目目录下，运行以下指令，生成dist文件夹

npm run build

构建vue应用镜像

• 创建 nginx config配置文件

在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf内容如下：

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

• 创建 Dockerfile 文件，（项目根目录下应该有三个内容：dist文件夹、nginx文件夹、 Dockerfile 文件）Dockerfile 文件内容如下：

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

• 构建vue前端镜像，命令如下：

docker build -t qing-front .

• 运行前端镜像

docker run -d --name vueApp -p 8090:80 qing-front

查看Docker关于项目容器的日志

docker logs 容器名 --tail 行数