nginx 项目路径_UNIMAX5 V5系列开发第四讲 项目部署

Hello  大家好，本期给大家介绍UniMax MES V5产品系列培训第四讲-项目部署，主要包含环境准备、打包流程等内容。

达摩院论坛 本期培训视频地址：

http://119.96.220.140:9099/article/1601015175890 (请粘贴至浏览器或点击最下方阅读原文在线学习)

本期视频讲解的是前端项目如何部署到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错误说明打包配置中出错，需要重新配置并打包

戳