【Docker专题】使用Docker部署Vue-Flask项目前后端分离版【前端Vue3项目部署】第一步Nginx镜像部署1.1 创建Nginx工作目录1.2 拉取Nginx镜像1.3 启动Nginx容器并复制配置文件至宿主机/服务器1.4 启动新的nginx容器并访问Dcoker所部署主机/服务器ip地址第二步Vue3前端项目部署2.1 前端项目配置代理端口2.2 配置default.conf2.3 打包Vue3前端项目2.4 复制前端项目包至Docker并完成部署访问第一步Nginx镜像部署部署Vue前端需要Nginx因此我们在操作Vue文件之前需要拉取Nginx镜像启动Nginx容器并进行相关配置操作。1.1 创建Nginx工作目录我们需要在Docker所部署主机/服务器上创建conf文件存放目录html文件目录以及日志存放目录Windows版直接在目录下创建即可Linux版在终端中按照如下命令创建即可mkdir-p/data/applications/nginx/conf mkdir-p/data/applications/nginx/html mkdir-p/data/applications/nginx/cert mkdir-p/data/logs1.2 拉取Nginx镜像以管理员身份打开PowerShell输入如下命令拉取Nginx镜像本人使用的是1.22版大家可以根据自身需要选择合适的版本docker pull nginx:1.221.3 启动Nginx容器并复制配置文件至宿主机/服务器启动Nginx容器我将容器命名为nginx大家可以根据自身需要进行命名docker run--name nginx-p 80:80-d nginx:1.22复制Nginx配置文件至宿主机/服务器1Linux版dockercpnginx:/etc/nginx/nginx.conf/data/applications/nginx/conf/nginx.conf dockercpnginx:/etc/nginx/conf.d/data/applications/nginx/conf/conf.d dockercpnginx:/usr/share/nginx/html/data/applications/nginx/2Windows版dockercpnginx:/etc/nginx/nginx.conf D:\Nginx\data\applications\nginx\conf\nginx.conf dockercpnginx:/etc/nginx/conf.d D:\Nginx\data\applications\nginx\conf\conf.d dockercpnginx:/usr/share/nginx/html D:\Nginx\data\applications\nginx\复制配置文件后停止运行Nginx容器并删除Nginx容器docker stop nginx dockerrmnginx1.4 启动新的nginx容器并访问Dcoker所部署主机/服务器ip地址创建网络docker network create YZ_net在所创建的启动容器1Linux版docker run-d \-p 80:80 \-p 443:443 \--name nginx \--restartalways \--network-alias nginx \-e TZAsia/Shanghai\--privilegedtrue \-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.02Windows版docker run-d -p 80:80 -p 443:443 --name nginx --restartalways --network YZ_net -e TZAsia/Shanghai--privilegedtrue -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容器是否启动成功dockerps-a在浏览器地址栏中输入localhost:80第二步Vue3前端项目部署2.1 前端项目配置代理端口创建配置文件.env.development与.env.production位置如下配置文件.env.development内容设置为NODE_ENVdevelopmentVUE_APP_URLdevelopmentURL配置文件.env.production内容设置为NODE_ENVproductionVUE_APP_URLproductionURL按照如下代码配置 package.json重点关注注释下方的部分{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中添加如下代码scriptexportdefault{name:App,// 添加mounted()函数mounted(){console.log(process.env,process.env)console.log(process.env.VUE_APP_URL,VUE_APP_URL)}}/script在本地运行npm run serve若看到控制台打印初步配置成功为前端项目配置代理端口将.env.production中的VUE_APP_URL设置为【公网ip:端口号】即该项目的后端端口NODE_ENVproductionVUE_APP_URLlocalhost:8085至此Vue3前端项目代理端口配置完成。2.2 配置default.conf打开在步骤1.3复制的配置文件default.conf找到 location / {}部分在最后一行追加try_files $uri $uri/ /index.html; 完整如下location/{root/usr/share/nginx/html;index index.html index.htm;try_files $uri $uri//index.html;}2.3 打包Vue3前端项目在前端项目中打开终端执行打包命令npm run build-production生成dist文件后打包成功2.4 复制前端项目包至Docker并完成部署访问将dist文件夹内所有内容拷贝到步骤1.3复制的html文件夹下将index.html覆盖:运行Nginx容器将主机的8085端口主机端口号可以自行选择映射到Docker的80端口并将主机/服务器的相应Nginx目录挂载至容器内目录实现文件向Nginx Docker内部复制docker run-d -p 8085:80 -p 443:443 --name nginx --restartalways --network YZ_net -e TZAsia/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访问成功