Docker+Nginx部署Vue3+SpringBoot项目

前言

本篇记录如何在云服务器上使用Docker通过Nginx部署Vue3+SpringBoot项目。项目部署的方法有很多种，例如：宝塔面板快速部署、编写Dockerfile文件构建镜像容器部署，而我介绍的方法其实都是一个道理，通过修改Nginx的nginx.conf配置文件找到项目路径。

一、购买云服务器安装Docker

1. 查看云服务系统信息

powershell 复制代码

[root@VM-8-5-centos ~]# cat /etc/os-release
NAME="CentOS Linux"
VERSION="7 (Core)"
ID="centos"
ID_LIKE="rhel fedora"
VERSION_ID="7"
PRETTY_NAME="CentOS Linux 7 (Core)"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:centos:centos:7"
HOME_URL="https://www.centos.org/"
BUG_REPORT_URL="https://bugs.centos.org/"

CENTOS_MANTISBT_PROJECT="CentOS-7"
CENTOS_MANTISBT_PROJECT_VERSION="7"
REDHAT_SUPPORT_PRODUCT="centos"
REDHAT_SUPPORT_PRODUCT_VERSION="7"

2. 下载Docker使用官方安装脚本自动安装

安装命令如下：

powershell 复制代码

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

查看是否安装：

powershell 复制代码

[root@VM-8-5-centos ~]# docker -v
Docker version 24.0.7, build afdd53b

运行Docker:

powershell 复制代码

systemctl start docker

二、 Docker安装Springboot+Vue项目需要的配置环境

1. 安装MySql

Myslq安装命令：

powershell 复制代码

docker run -itd --name mysql5.7 --restart=always -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7

Navicat工具连接数据库，并导入项目的数据库sql文件（详细步骤略）：

2. 安装Redis

Redis安装命令：

powershell 复制代码

docker run -d --name redis8.0 --restart=always -p 6379:6379 redis --requirepass "123456"

3. yum 安装 JDK 17

powershell 复制代码

yum install java-17-openjdk.x86_64 -y

4. Dodcker查看镜像是否安装成功与运行

powershell 复制代码

[root@VM-8-5-centos ~]# docker images
REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
mysql        5.7       5107333e08a8   13 days ago    501MB
redis        latest    e40e2763392d   3 weeks ago    138MB

[root@VM-8-5-centos ~]# docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED      STATUS      PORTS                                                                          NAMES
116027bef2db   nginx       "/docker-entrypoint...."   2 days ago   Up 2 days   0.0.0.0:443->443/tcp, :::443->443/tcp, 0.0.0.0:8083->80/tcp, :::8083->80/tcp   nginx
52aa0fc2ac59   mysql:5.7   "docker-entrypoint.s..."   5 days ago   Up 5 days   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp                           mysql5.7

三、Springboot项目部署

1. application.yml配置项目生产环境

powershell 复制代码

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://云服务IP地址:3306/数据库名称?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: root
  redis:
    host: 127.0.0.1
    port: 6379
    password: 123456
mybatis-plus:
  mapper-locations: classpath*:/mapper/**Mapper.xml
yuqing:
  jwt:
    # 加密秘钥
    secret: f4e2e52034348f86b67cde581c0f9eb5
    # token有效时长，7天，单位秒
    expire: 604800
    header: Authorization
server:
  port: 8082
# 分页配置参数
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

2. 打包项目到服务器运行

项目根目录下运行:

powershell 复制代码

mvn clean package -Dmaven.test.skip

打包成功将jar包上传服务器运行：

powershell 复制代码

nohup java -jar jar包名-<版本号>.jar

四、前端项目部署

1. 安装Nginx和配置

启动 Nginx 的 Docker 临时容器：

powershell 复制代码

docker run -d --name nginx nginx

其中，Nginx 运行在 Docker 容器中对应的目录如下：

bash 复制代码

配置文件目录：/etc/nginx
日志目录：/var/log/nginx
项目根目录：/usr/share/nginx/html

2.将Docker中Nginx的文件复制到宿主机

powershell 复制代码

mkdir nginx
cd nginx
mkdir conf
cd conf
#  配置文件复制到宿主机
docker cp nginx:/etc/nginx ./
cd ..
mkdir html
mkdir log

3. 配置Nginx反向代理编写Nginx.conf文件

powershell 复制代码

#创建文件编写
vim conf/nginx/conf.d/Nginx.conf

# 配置内容
server {
    listen       80;
    server_name  www.theonelyq.cn #访问域名;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html last;
        index  index.html index.htm;
    }

     location /proxy_api/ {
        proxy_pass http://后端服务地址:8082;
        proxy_set_header Host $host:$server_port;
        rewrite ^/proxy_api/(.*) /$1 break;
    }
}

4. 删除之前配置的Nginx容器

powershell 复制代码

#删除运行中的Nginx容器
docker rm -f nginx

5. 启动新的Nginx容器

powershell 复制代码

docker run -d -p 8083:80 -p 443:443 --name nginx \
 -v /root/nginx/html:/usr/share/nginx/html:ro \
 -v /root/nginx/conf/nginx:/etc/nginx/:ro \
 -v /root/nginx/log:/var/log/nginx \
  nginx

powershell 复制代码

[root@VM-8-5-centos ~]# docker ps
CONTAINER ID   IMAGE       COMMAND                  CREATED      STATUS      PORTS                                                                          NAMES
116027bef2db   nginx       "/docker-entrypoint...."   2 days ago   Up 2 days   0.0.0.0:443->443/tcp, :::443->443/tcp, 0.0.0.0:8083->80/tcp, :::8083->80/tcp   nginx
971d33b5fc16   redis       "docker-entrypoint.s..."   5 days ago   Up 5 days   0.0.0.0:6379->6379/tcp, :::6379->6379/tcp                                      redis8.0
52aa0fc2ac59   mysql:5.7   "docker-entrypoint.s..."   6 days ago   Up 6 days   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp                           mysql5.7

6. 打包前端项目

项目根目录下运行 npm run build 命令构建
上传dist文件夹中的内容到到服务器/root/nginx/html目录中
部署完成浏览器输入www.theonelyq.cn:8083/