Vue + SpringBoot 项目的 Docker 部署

一. 本地部署

1. 本地 Docker 配置

1) 配置 mirror

在 Docker Engine 内添加如下内容:

"registry-mirrors": [
    "https://vlkh77ku.mirror.aliyuncs.com",
    "https://registry.docker-cn.com/",
    "http://hub-mirror.c.163.com/",
    "https://docker.mirrors.ustc.edu.cn/",
    "https://cr.console.aliyun.com/",
    "https://mirror.ccs.tencentyun.com/"
  ]

2) 拉取镜像

docker pull openjdk:18.0.2.1
docker pull mysql:8.0.30
docker pull niginx

3) 启动容器

docker run -d --name mysql -p 33306:3306 mysql:8.0.30 -e MYSQL_ROOT_PASSWORD=root

这里添加了环境变量 MYSQL_ROOT_PASSWORD, 设定了新建 mysql 默认 root 用户密码

4) 往 mysql 容器写入数据

2. AiSortTool 的 Docker 打包与部署

0). 修改本项目的 webpack 配置 (仅针对本项目)

仅针对本项目, 如果存在不同情酌情判断是否需要修改

参考: Issue #168 · bailicangdu/vue2-manage

npm 安装依赖

npm install --save--dev babel-preset-es2015@6.24.1

在 /build/webpack.base.conf.js 修改

// 将全部 include: [resolve('src'), resolve('test')] 修改为
include: [resolve('src'), resolve('test'),resolve('node_modules/time-formater')]

在 /config/index.js 修改

// 将全部 assetsPublicPath 修改为
assetsPublicPath: './'

1). 编写 nginx 配置

在根目录下新建目录 /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;
    }
}

2). 打包 vue 项目

在项目根路径下运行如下命令打包:

npm run build
或者
yarn build

可以尝试运行静态网页内容进行测试, 这里是 /manage/index.html, 但通常是 /dict/index.html

3). 准备 Dockerfile

在根目录下创建 Dockerfile 内容如下 (具体文件名称需要修改)

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

FROM: 指该镜像依赖项, 这里是本项目依赖的 nginx 版本默认为 latest
COPY: 从上下文目录中复制文件或者目录到容器里指定路径, 这里是将 manage/ 与 nginx/default.conf 下内容复制到 nginx 配置目录下

4). 进行 Docker 构建

docker build -t aisorttool .

这里 -t 指定了该镜像的名称, 默认版本 latest

5). 运行容器

docker run -d --name AiSortTool -p 8002:80 aisorttool

6). 测试前端程序是否挂载成功

测试登录功能是否正常 (需要搭配后端)

3. AiSortToolBD 的 Docker 打包与部署

1). 修改配置文件 application.yml 中 database 部分

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://mysql:3306/AiSortToolLib?useUnicode=true&characterEncoder=utf-8&useSSL=true&serverTimeZone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver

2). 调用 Maven 打包

调用 Maven 声明周期内的 clean 和 package

将 target 目录下的 xxx.jar 包取出

3). 准备 Dockerfile

在 xxx.jar 包同目录下新建文件 Dockerfile, 并写入如下内容 (具体文件名称需要修改)

FROM openjdk:18.0.2.1
MAINTAINER owemshu
VOLUME /tmp
ADD AiSortToolBD-0.0.1-SNAPSHOT.jar AiSortToolBD.jar
EXPOSE 8082
ENTRYPOINT [ "java", "-jar", "/AiSortToolBD.jar" ]

FROM: 指该镜像依赖项, 这里是本项目依赖的 jdk 版本
MAINTAINER: 该镜像作者
VOLUME: 定义匿名数据卷, 在启动容器时忘记挂载数据卷，会自动挂载到匿名卷, 这里使用了 springboot 默认挂载位置
ADD: 类似于 COPY 指令，从上下文目录中复制文件或者目录到容器里指定路径, 这里进行了重命名
EXPOSE: 暴露端口
ENTRYPOINT: 类似于 CMD 指令，但其不会被 docker run 的命令行参数指定的指令所覆盖, 这里是执行了该 jar 包

4). 进行 Docker 构建

docker build -t aisorttoolbd .

这里 -t 指定了该镜像的名称, 默认版本 latest

5). 运行容器

参考: https://zhuanlan.zhihu.com/p/102802904

docker run -d --name AiSortToolBD --link mysql:mysql -p 8082:8082 aisorttoolbd

这里 --link 链接了 Docker 内的 mysql 容器

6). 测试后端程序是否挂载成功

二. 服务器部署

1. 服务器 Docker 配置

查看 docker 正在运行的容器是否包含 mysql

docker ps | grep mysql

注意到这里的服务器已经存在正在运行的 mysql 容器, 且向外暴露端口 33306, 版本 5.7

获取到数据库账号密码后, 在本地创建数据库表

2. AiSortTool 的 Docker 打包与部署

0) 修改项目请求 baseURL

将项目请求 baseURL 改为服务器地址和端口号

1) 上传相关文件

2) 打包与部署

打包

部署

3. AiSortToolBD 的 Docker 打包与部署

0) 修改项目 application.yml 内 database.url

参考: https://blog.csdn.net/moshowgame/article/details/122018398

在最后加上 &useSSL=false

url: jdbc:mysql://192.168.30.240:33306/AiSortToolLib?useUnicode=true&characterEncoder=utf-8&useSSL=true&serverTimeZone=UTC&useSSL=false

这里不进行修改会造成后端接收到请求后一直报错 create connection SQLException

1) 上传相关文件

2) 打包与部署

打包

部署 (由于原先的端口被占用, 这里需要修改端口号)

三. Docker 动态部署

如果依然使用实时打包方式，在实际部署中更新文件会造成极大的麻烦，因此可以使用项目路径挂载的方式，使容器只包含基本的配置文件同时动态加载新项目文件

1. 重写 Dockerfile

这里以 SpringBoot 文件为例子

FROM openjdk:18.0.2.1
MAINTAINER owemshu
EXPOSE 8082
ENTRYPOINT [ "java", "-jar", "/app/AiSortToolBD.jar", "--spring.config.location=/app/application.yml" ]

这里执行 ENTRYPOINT 时候额外附带了 /app 目录，以及载入本地配置文件的命令

2. 打包及部署

docker build -t asbd .
docker run -d --name ASBD -p 8082:8082 -v /Users/owemshu/Desktop/app:/app asbd

这里将本地目录 /Users/owemshu/Desktop/app 挂载到容器内 /app，其中本地的 jar 包文件和配置文件也被同步读入容器

Vue + SpringBoot 项目的 Docker 部署

一. 本地部署

1. 本地 Docker 配置

1) 配置 mirror

2) 拉取镜像

3) 启动容器

4) 往 mysql 容器写入数据

2. AiSortTool 的 Docker 打包与部署

0). 修改本项目的 webpack 配置 (仅针对本项目)

1). 编写 nginx 配置

2). 打包 vue 项目

3). 准备 Dockerfile

4). 进行 Docker 构建

5). 运行容器

6). 测试前端程序是否挂载成功

3. AiSortToolBD 的 Docker 打包与部署

1). 修改配置文件 application.yml 中 database 部分

2). 调用 Maven 打包

3). 准备 Dockerfile

4). 进行 Docker 构建

5). 运行容器

6). 测试后端程序是否挂载成功

二. 服务器部署

1. 服务器 Docker 配置

2. AiSortTool 的 Docker 打包与部署

0) 修改项目请求 baseURL

1) 上传相关文件

2) 打包与部署

3. AiSortToolBD 的 Docker 打包与部署

0) 修改项目 application.yml 内 database.url

1) 上传相关文件

2) 打包与部署

三. Docker 动态部署

1. 重写 Dockerfile

2. 打包及部署

3. 更新本地文件并重启容器

相关帖子

业务组件库 vue2.7 行动目录

Vue 事件总线（EventBus）

router history 模式

yarn run *** 报错 error:0308010C:digital envelope routines::unsupported

关于在 vue3+vite+ts 的情况下，构建 eslint 的方法，亲测有效

VUE 和 React 混用导致 TSX 报错的原因

请问这个 VUE 表单校验为啥不生效呢？

欢迎来到这里！