一. 背景

本期视频讲解的是前端项目如何部署到 nginx，以产品前端项目为例，通过 VSCode 软件打包部署到 nginx 中运行前端项目。

二. 环境准备

工具：VSCode、Nginx

优势：部署到 Nginx 后无需再启动前端项目

注意：必须先启动后端项目，不需要使用 VSCode 启动前台项目

三. 打包流程

1.vue 项目打包

1.1 在 VSCode 软件中修改项目文件夹 config 中 prod.env.js

ServerUrl：后端服务路径（注意是http://，必须与后端服务名一致）；

WebDomain：网站虚拟目录，从域名后的第一个“/”开始到最后一个“/”为止（用于配置虚拟目录，必须与 WebCDNUrl 配置路径一致，也可以为空，如果为空 WebCDNUrl 中配置虚拟目录名必须也为空。根据个人需求，在需要区分项目时可以如图配置以便区分）；

WebCDNUrl：网站本地 js 路径；（uma：虚拟目录名，方便区分项目文件夹，可以为空但必须与 WebDomain 配置一致；200924：打包后将生成项目包，如下图，修改配置时根据当前日期修改后四位日期，用于区分当前部署包日期，必须规范修改）；

AppName：网站名称（无需求不必修改）；

AppShortName：网站点击折叠后显示名称（无需求不必修改）；

assetsPublicPath：webpack assetsPublicPath 配置，网站虚拟目录，从域名后的第一个“/”开始到最后一个“/”为止；

修改配置文件时只需修改 ServerUrl、WebDomain 与 WebCDNUrl 配置，其他无需求不必修改；

1.2 执行打包命令

1.2.1 在 VSCode 软件中终端执行 npm run build 打包命令

1.3 将打包的 dist 文件夹下文件移至 nginx 文件夹 html 文件夹中

1.3.1 首先在 nginx 文件夹下 html 文件夹中创建与配置中的虚拟目录名为文件夹（必须与 WebDomain 配置中虚拟目录一致）

1.3.2 在 VSCode 软件中从项目中打开文件资源管理器

1.3.3 找到 dist 文件夹下文件并移至 nginx\html\uma 文件夹中

1.3.4 将 dist 文件夹下的所以文件移至在 nginx\html\uma 文件夹下

2. 配置 Nginx

2.1 修改 Nginx 的配置文件

2.1.1 配置文件默认文件路径：nginx\conf\nginx.conf

2.1.2 nginx.conf 文件中配置后台地址

upstream mes {ip_hash; server localhost:8082; // 配置后台地址以及端口号（重要）}

2.1.3 nginx.conf 文件中修改部署配置

server { listen 80; // 代理端口（前台端口号） server_name localhost; // 代理名称（可修改为域名、ip） location /uma-unimax-web { // 后端项目地址（必须一致） proxy_pass http://mes/uma-unimax-web; // 上图配置的后台地址以及后端项目名 tcp_nodelay on; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /uma/ {// 必须与配置中的虚拟目录名一致 tcp_nodelay on; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; root html; // 项目存放的地址（当前服务器位置） index index.html index.htm; // 指定项目入口文件, 一般默认 index.html} }

3.Nginx 启动项目

3.1 使用快捷启动 nginx 或者 cmd 命令中使用 nginx -s reload 命令启动 nginx

3.2 网页输入当前 ip 地址加项目名，例：localhost/uma

注意：如果进入页面登录时出现 404 错误说明打包配置中出错，需要重新配置并打包