【Docker专题】使用Docker部署Vue-Flask项目前后端分离版【前端Docker部署】

【Docker专题】使用Docker部署Vue-Flask项目前后端分离版：【前端Vue3项目部署】

第一步：Nginx镜像部署
- [1.1 创建Nginx工作目录](#1.1 创建Nginx工作目录)
- [1.2 拉取Nginx镜像](#1.2 拉取Nginx镜像)
- [1.3 启动Nginx容器，并复制配置文件至宿主机/服务器](#1.3 启动Nginx容器，并复制配置文件至宿主机/服务器)
- [1.4 启动新的nginx容器，并访问Dcoker所部署主机/服务器ip地址](#1.4 启动新的nginx容器，并访问Dcoker所部署主机/服务器ip地址)
第二步：Vue3前端项目部署
- [2.1 前端项目配置代理端口](#2.1 前端项目配置代理端口)
- [2.2 配置default.conf](#2.2 配置default.conf)
- [2.3 打包Vue3前端项目](#2.3 打包Vue3前端项目)
- [2.4 复制前端项目包至Docker，并完成部署访问](#2.4 复制前端项目包至Docker，并完成部署访问)

第一步：Nginx镜像部署

部署Vue前端需要Nginx，因此我们在操作Vue文件之前，需要拉取Nginx镜像，启动Nginx容器并进行相关配置操作。

1.1 创建Nginx工作目录

我们需要在Docker所部署主机/服务器上创建conf文件存放目录，html文件目录，以及日志存放目录：

Windows版：

直接在目录下创建即可：

Linux版：

在终端中按照如下命令创建即可：

powershell 复制代码

mkdir -p /data/applications/nginx/conf
mkdir -p /data/applications/nginx/html
mkdir -p /data/applications/nginx/cert
mkdir -p /data/logs

1.2 拉取Nginx镜像

以管理员身份打开PowerShell，输入如下命令拉取Nginx镜像，本人使用的是1.22版，大家可以根据自身需要选择合适的版本：

powershell 复制代码

docker pull nginx:1.22

1.3 启动Nginx容器，并复制配置文件至宿主机/服务器

启动Nginx容器（我将容器命名为nginx，大家可以根据自身需要进行命名）：

powershell 复制代码

docker run --name nginx -p 80:80 -d nginx:1.22

复制Nginx配置文件至宿主机/服务器：

（1）Linux版：

powershell 复制代码

docker cp nginx:/etc/nginx/nginx.conf /data/applications/nginx/conf/nginx.conf
docker cp nginx:/etc/nginx/conf.d /data/applications/nginx/conf/conf.d
docker cp nginx:/usr/share/nginx/html /data/applications/nginx/

（2）Windows版：

powershell 复制代码

docker cp nginx:/etc/nginx/nginx.conf D:\Nginx\data\applications\nginx\conf\nginx.conf
docker cp nginx:/etc/nginx/conf.d D:\Nginx\data\applications\nginx\conf\conf.d
docker cp nginx:/usr/share/nginx/html D:\Nginx\data\applications\nginx\

复制配置文件后，停止运行Nginx容器并删除Nginx容器：

powershell 复制代码

docker stop nginx
docker rm nginx

1.4 启动新的nginx容器，并访问Dcoker所部署主机/服务器ip地址

创建网络：

powershell 复制代码

docker network create YZ_net

在所创建的启动容器：

（1）Linux版：

powershell 复制代码

docker run -d \
  -p 80:80 \
  -p 443:443 \
  --name nginx \
  --restart=always \
  --network-alias nginx \
  -e TZ="Asia/Shanghai" \
  --privileged=true \
  -v /data/applications/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
  -v /data/applications/nginx/conf/conf.d:/etc/nginx/conf.d \
  -v /data/logs/nginx:/var/log/nginx \
  -v /data/applications/nginx/html:/usr/share/nginx/html \
  -v /data/applications/nginx/cert:/etc/nginx/cert \
nginx:1.18.0

（2）Windows版：

powershell 复制代码

docker run -d `
  -p 80:80 `
  -p 443:443 `
  --name nginx `
  --restart=always `
  --network YZ_net `
  -e TZ="Asia/Shanghai" `
  --privileged=true `
  -v D:\Nginx\data\applications\nginx\conf\nginx.conf:/etc/nginx/nginx.conf `
  -v D:\Nginx\data\applications\nginx\conf\conf.d:/etc/nginx/conf.d `
  -v D:\Nginx\data\logs\nginx:/var/log/nginx `
  -v D:\Nginx\data\applications\nginx\html:/usr/share/nginx/html `
  -v D:\Nginx\data\applications\nginx\cert:/etc/nginx/cert `
  nginx:1.22

查看nginx容器是否启动成功：

powershell 复制代码

docker ps -a

在浏览器地址栏中输入：localhost:80

第二步：Vue3前端项目部署

2.1 前端项目配置代理端口

创建配置文件.env.development与.env.production，位置如下：

配置文件.env.development内容设置为：

java 复制代码

NODE_ENV = development
VUE_APP_URL = 'developmentURL'

配置文件.env.production内容设置为：

java 复制代码

NODE_ENV = production
VUE_APP_URL = 'productionURL'

按照如下代码配置 package.json，重点关注注释下方的部分：

javascript 复制代码

{
  "name": "vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    //打包测试开发版本  
    //--mode 后面需要对用文件的名字.env.development  重点是要和.env.后面的名字对应起来
    "build-development": "vue-cli-service build --mode development",
    //打包生产版本
    //--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来
    "build-production": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

然后测试打印设置的VUE_APP_URL，在app.vue中添加如下代码：

javascript 复制代码

<script>
export default {
  name: 'App',
  // 添加mounted()函数
  mounted() {
    console.log(process.env, 'process.env')
    console.log(process.env.VUE_APP_URL, 'VUE_APP_URL')
  }
}
</script>

在本地运行：

powershell 复制代码

npm run serve

若看到控制台打印：

初步配置成功！

为前端项目配置代理端口，将.env.production中的VUE_APP_URL设置为【公网ip:端口号】，即该项目的后端端口：

java 复制代码

NODE_ENV = production
VUE_APP_URL = 'localhost:8085'

至此，Vue3前端项目代理端口配置完成。

2.2 配置default.conf

打开在 步骤1.3 复制的配置文件default.conf，找到 location / {}部分，在最后一行追加：try_files $uri$ uri/ /index.html; 完整如下：

javascript 复制代码

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

2.3 打包Vue3前端项目

在前端项目中打开终端执行打包命令

powershell 复制代码

npm run build-production

生成dist文件后，打包成功：

2.4 复制前端项目包至Docker，并完成部署访问

将dist文件夹内所有内容拷贝到 步骤1.3 复制的html文件夹下（将index.html覆盖）:

运行Nginx容器，将主机的8085端口（主机端口号可以自行选择）映射到Docker的80端口，并将主机/服务器的相应Nginx目录挂载至容器内目录，实现文件向Nginx Docker内部复制：

powershell 复制代码

docker run -d `
  -p 8085:80 `
  -p 443:443 `
  --name nginx `
  --restart=always `
  --network YZ_net `
  -e TZ="Asia/Shanghai" `
  -v D:\Nginx\data\applications\nginx\conf\nginx.conf:/etc/nginx/nginx.conf `
  -v D:\Nginx\data\applications\nginx\conf\conf.d:/etc/nginx/conf.d `
  -v D:\Nginx\data\logs\nginx:/var/log/nginx `
  -v D:\Nginx\data\applications\nginx\html:/usr/share/nginx/html `
  -v D:\Nginx\data\applications\nginx\cert:/etc/nginx/cert `
  nginx:1.22

运行完成后，在主机/服务器上访问localhost:8085 或主机/服务器公网ip:8085

访问成功！