Ubuntu中使用Docker部署NestJs+SpringBoot+Vue+React+MySQL项目

一、研究背景

        最近项目开发已经接近尾声，现在需要把包含 NestJs、SpringBoot、Vue、React、MySQL等前后端的项目部署到Docker中，实现网络访问。

二、安装环境

        本次部署之前我们需要安装部署所需要的软件，Docker和其Docker Compose工具。本次部署使用Docker Compose的方式。

        安装过程可能会遇到一些问题，如网络不可达、下载速度慢等。网络不可达需要使用检查网络是否正常，可能需要修改DNS。下载速度慢的，可自行更换Ubuntu系统源或Docker源。

2.1、更新系统软件包

        更新 Ubuntu 操作系统上的软件包，可以确保操作系统和软件包都是最新的，从而提高系统的安全性和稳定性。可定期运行这两个命令，以保持系统的最新状态。

# 更新系统软件包列表和升级已安装软件
sudo apt update
sudo apt upgrade

2.2、安装Docker

2.2.1、卸载旧版本

    下载新本之前，需要卸载旧版本。先停止并删除所有 Docker 容器和镜像。可以使用以下命令操作Docker卸载，当然可能没有卸载干净，自行判断。

# 1.停止运行所有容器
docker stop $(docker ps -a -q)
# 2.删除所用容器
docker rm $(docker ps -a -q)
# 3.删除所有 Docker 镜像
docker rmi $(docker images -q)
# 4.删除Docker所有网络
docker network rm $(docker network ls -q)
# 5.卸载 Docker 软件。卸载方法取决于你使用的操作系统和安装方式。在Ubuntu或基于Debian的Linux安装的 Docker，可使用该命令卸载：
sudo apt-get purge docker-ce docker-ce-cli containerd.io
# 在Red Hat Enterprise Linux或基于 RPM的Linux，用以下命令来卸载：
sudo yum remove docker-ce docker-ce-cli containerd.io

2.2.2、安装

# 1.安装docker依赖
apt-get install ca-certificates curl gnupg lsb-release
# or
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
# 2.添加Docker官方GPG密钥
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
# or
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
# 3.添加Docker软件源
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
# or
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
# 4.安装docker
apt-get install docker-ce docker-ce-cli containerd.io
# 5.可选配置用户组。默认只有root用户和docker组的用户才能运行Docker命令。可以将当前用户添加到docker组，以避免每次都需要使用sudo。
sudo usermod -aG docker $USER # 需要重启docker
# 6.运行docker （通过apt安装的，docker或许已经自启）
systemctl start docker
# 7.验证docker是否安装成功
docker version
# 查看docker镜像
docker images
# 查看docker容器
docker ps [-a]

2.2.3、安装工具

# 安装工具
apt-get -y install apt-transport-https ca-certificates curl software-properties-common

2.2.4、更换Docker源

# 修改docker镜像源
vim /etc/docker/daemon.json
# 修改为
{
    "registry-mirrors": [
        "https://registry.hub.docker.com",
        "http://hub-mirror.c.163.com",
        "https://mirror.baidubce.com",
        "https://docker.mirrors.sjtug.sjtu.edu.cn",
        "https://docker.nju.edu.cn"
    ]
}

# 重启docker
systemctl restart docker
# or
service docker restart

# 查看是否成功
docker info
 

2.2.5、安装Docker Compose

        Docker Compose通过一个单独的docker-compose.yml模板文件（YAML格式）来定义一组相关联的应用容器，帮助我们实现多个相互关联的Docker容器的快速部署。

# 安装最新稳定的 Docker Compose 文件
sudo curl -L "https://github.com/docker/compose/releases/download/v2.6.1/docker-compose-$(uname -s)-$(uname -m)" -o /root/docker/docker-compose
# 赋予二进制文件可执行权限
sudo chmod +x /root/docker/docker-compose
# 检查是否安装成功
docker-compose version

        到此，基本环境安装完成，下面就需要准备制作项目镜像。

三、项目打包

3.1、前端资源打包

        Vue和React的项目，到项目目录下的package.json文件里可找到打包命令，一般是 “build:prod”，运行完打包命令，把Vue（admin）项目和React（h5）放到统一一个文件下（www）,方便后续操作。

3.2、后端项目打包

        NestJs项目原始的打包配置，不能生成到个js文件，可自行使用配置webpack等进行打包。SpringBoot项目打包，点击idea编辑器右侧Maven的lifestyle的package，执行完成从target里面找到*.jar，把它和nestjs项目打包生成的app.js等放入www文件夹。

        打包完成后的文件目录结构如下：

# www项目文件结构：
./
  admin/
  h5/
  nestjs/
    public/
    app.js
    Dockerfile
    package.json    
  springboot/
    Dockerfile
    springboot-0.0.1-SNAPSHOT.jar
  docker-compose.yml
  _nginx.conf

3.3、配置Nginx文件

        www项目目录下新建_nginx.conf，并编写nginx配置，注意以前使用ip连接数据的，部署到Docker容器需要换成容器名称。

# _nginx.conf
server {
    listen       8081; # 配置端口
    # server_name  location; # 配置域名
    # access_log /root/docker/nginx/log/access.log main; # 成功日志
    # error_log /root/docker/nginx/log/error.log error; # 错误日志

    # 前端H5移动端静态资源
    location / {
        root   /home/resource/h5;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 前端后台静态资源
    location ^~ /admin {
        alias   /home/resource/admin/;
        index  index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }

    # 后端服务接口
    location ^~ /api/ {
        proxy_pass http://nestjs:3000/api/; 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

四、准备镜像

        制作项目的镜像，可在项目目录下创建Dockerfile，编写制作镜像内容。

4.1、Nestjs项目的Dockerfile镜像

# 制作Nestjs项目镜像

# 使用 Node.js 18 作为基础镜像，本地没有运行时会被下载
FROM node:18
# 设置时区
ENV TZ=Asia/Shanghai
RUN ln -fs /usr/share/zoneinfo/${TZ} /etc/localtime && echo ${TZ} > /etc/timezone
# 创建工作目录
RUN mkdir -p /nestjs
# 指定工作目录
WORKDIR /nestjs
# 复制 package.json 和 package-lock.json 到容器中
COPY package*.json ./
# 配置镜像源
RUN npm config set registry http://registry.npmmirror.com
# 安装cnpm
RUN npm install -g cnpm
# 下载项目依赖
RUN cnpm install
# 复制项目文件到容器中
COPY . .
# 安装 pm2 全局包
#RUN npm install -g pm2
# 暴露应用程序运行的端口号
EXPOSE 3000
# 启动应用程序
#CMD ["pm2", "start", "app.js"]
CMD ["node", "app.js"]

4.2、Springboot项目的Dockerfile镜像

# 制作springboot镜像

# 基础镜像使用 java 8
FROM java:8
# 将jar包添加到容器中并更名为app.jar
#ADD springboot-0.0.1-SNAPSHOT.jar app.jar
# 或者复制文件到容器中
COPY springboot-0.0.1-SNAPSHOT.jar app.jar
# 运行端口
EXPOSE 3001
# 设置所属时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
# 启动命令，加载指定路径的配置文件
ENTRYPOINT ["java","-jar","app.jar"]

4.3、定义DockerCompose模板文件

        新建docker-compose.yml文件，定义Docker Compose的内容，后面需要使用docker compose up -d 运行该文件。

# docker-compose.yml
version: "3.0.0"

services: # 服务
  mysql: # 标识
    image: mysql:5.7 # 镜像名称
    container_name: mysql # 容器名称
    restart: always # 重启策略
    ports:
      - "3306:3306" # 端口映射（宿主机端口:Docker容器端口）
    environment: # 变量
      TZ: Asia/Shanghai
      MYSQL_ROOT_PASSWORD: 123456
    volumes:
      - "/root/docker/mysql/conf/conf.d:/etc/mysql/conf.d"
      - "/root/docker/mysql/conf/mysql.conf.d:/etc/mysql/mysql.conf.d"
      - "/root/docker/mysql/data:/var/lib/mysql"
      - "/root/docker/mysql/log:/var/log/mysql"
    networks:
      - xxx-net
  nestjs:
    build: # 制作镜像
      context: ./nestjs # 当前目录，Dockerfile 所在的目录（单“.”表示当前目录）
      dockerfile: Dockerfile # dockerfile文件名称
    container_name: nestjs
    restart: always
    ports:
      - "3000:3000"
    networks: # 容器网络
      - xxx-net
    depends_on: # 依赖项
      - mysql # 容器名
      - springboot
  springboot: # nestjs的代理服务
    build:
      context: ./springboot
      dockerfile: Dockerfile
    container_name: springboot
    restart: always
    ports:
      - "8089:8089"
    networks:
      - xxx-net
  nginx:
    image: nginx:latest
    container_name: nginx
    restart: always
    ports:
      - "8088:8088"
    volumes: # 卷映射
      - "/root/docker/nginx/conf:/etc/nginx" # “宿主机路径:docker容器路径”
      - "/root/docker/nginx/html:/usr/share/nginx/html"
      - "/root/docker/nginx/logs:/var/log/nginx"
      - "/home/resource:/home/resource" # 存放静态资源（/admin、/h5）
    networks:
      - xxx-net
    depends_on:
      - nestjs

networks: # 声明容器网络
  xxx-net: # 网络标识
    name: xxx # 网络名

4.4、运行Docker Compose 

        在项目目录下，使用docker compose up -d 生成模板定义的项目镜像，并运行生成的所有容器，需要进入MySQL容器配置mysql和导入数据库文件。 

运行DockerCompose模板文件

# 全部后台运行容器
docker compose up -d 
# 查看容器
docker compose ps 
# or
dps
# 停止所有容器
docker compose down
# 停止指定容器
docker compose stop container_name
# 启动指定容器
docker compose start container_name
# 删除所有容器
docker compose rm
#  删除指定容器
docker compose rm container_name
# 查看容器日志
docker logs 容器名 -f