# 前端部署文档 - ##### 1. 开发环境搭建 - ##### 2. 自动化部署 - ##### 3. 手动部署 - ##### 4. Liunx下使用node启动并且守护进程 ### 1.开发环境搭建 - #### node安装 Node包下载 (注意版本 8.9.4) `https://nodejs.org/download/release/v8.9.4/` - #### 前端项目构建 用命令行模式 `cd` 进入 `escheduler-ui`项目目录并执行 `npm install` 拉取项目依赖包 > 如果 `npm install` 速度非常慢 > 可以转淘宝镜像命令行输入 `npm install -g cnpm --registry=https://registry.npm.taobao.org` > 运行 `cnpm install` > ##### ！！！这里特别注意 项目如果在拉取依赖包的过程中报 " node-sass error " 错误，请在执行完后再次执行以下命令 ``` npm install node-sass --unsafe-perm //单独安装node-sass依赖 ``` 在项目`escheduler-ui`根目录`.env`添加代理的端口地址 ``` # 前端代理的接口地址（例） API_BASE = http://192.168.220.204:12345 # 如果您需要用ip访问项目可以把 "#" 号去掉（例） #DEV_HOST = 192.168.6.132 ``` 运行 - `npm start` 项目开发环境 (启动后访问地址 http://localhost:8888/#/) - `npm run build` 项目打包 (打包后根目录会创建一个名为dist文件夹，用于发布线上Nginx) ### 2.自动化部署 前端自动部署基于`yum`操作，部署之前请先安装更新`yum` 在项目`escheduler-ui`根目录执行`./install(线上环境).sh` ``` [root@localhost escheduler-ui]# ./install.sh escheduler-ui-install.sh ========================================================================配置信息======================================================================= 前端访问端口：8888 后端代理接口地址：http://192.168.220.154:12345 静态文件地址：/data/EasyScheduler/escheduler-ui/dist 当前路径：/data/EasyScheduler/escheduler-ui 本机ip：192.168.60.94 ========================================================================配置信息======================================================================= 获取http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 警告：/var/tmp/rpm-tmp.pgG0MW: 头V4 RSA/SHA1 Signature, 密钥 ID 7bd9bf62: NOKEY 准备中... ################################# [100%] 正在升级/安装... 1:nginx-release-centos-7-0.el7.ngx ################################# [100%] 已加载插件：fastestmirror Loading mirror speeds from cached hostfile * base: mirrors.zju.edu.cn * extras: mirrors.tuna.tsinghua.edu.cn * updates: mirrors.tuna.tsinghua.edu.cn 正在解决依赖关系 --> 正在检查事务 ---> 软件包 nginx.x86_64.1.1.14.2-1.el7_4.ngx 将被 安装 --> 解决依赖关系完成 依赖关系解决 ======================================================================================================================================================================================================== Package 架构 版本 源 大小 ======================================================================================================================================================================================================== 正在安装: nginx x86_64 1:1.14.2-1.el7_4.ngx nginx 754 k 事务概要 ======================================================================================================================================================================================================== 安装 1 软件包 总下载量：754 k 安装大小：2.6 M Downloading packages: nginx-1.14.2-1.el7_4.ngx.x86_64.rpm | 754 kB 00:00:18 Running transaction check Running transaction test Transaction test succeeded Running transaction 警告：RPM 数据库已被非 yum 程序修改。 正在安装 : 1:nginx-1.14.2-1.el7_4.ngx.x86_64 1/1 ---------------------------------------------------------------------- Thanks for using nginx! Please find the official documentation for nginx here: * http://nginx.org/en/docs/ Please subscribe to nginx-announce mailing list to get the most important news about nginx: * http://nginx.org/en/support.html Commercial subscriptions for nginx are available on: * http://nginx.com/products/ ---------------------------------------------------------------------- 验证中 : 1:nginx-1.14.2-1.el7_4.ngx.x86_64 1/1 已安装: nginx.x86_64 1:1.14.2-1.el7_4.ngx 完毕！ nginx 安装成功 已加载插件：fastestmirror Loading mirror speeds from cached hostfile * base: mirrors.zju.edu.cn * extras: mirrors.tuna.tsinghua.edu.cn * updates: mirrors.tuna.tsinghua.edu.cn 正在解决依赖关系 --> 正在检查事务 ---> 软件包 policycoreutils-python.x86_64.0.2.5-29.el7_6.1 将被 安装 --> 解决依赖关系完成 依赖关系解决 ======================================================================================================================================================================================================== Package 架构 版本 源 大小 ======================================================================================================================================================================================================== 正在安装: policycoreutils-python x86_64 2.5-29.el7_6.1 updates 456 k 事务概要 ======================================================================================================================================================================================================== 安装 1 软件包 总下载量：456 k 安装大小：1.2 M Downloading packages: policycoreutils-python-2.5-29.el7_6.1.x86_64.rpm | 456 kB 00:00:11 Running transaction check Running transaction test Transaction test succeeded Running transaction 正在安装 : policycoreutils-python-2.5-29.el7_6.1.x86_64 1/1 验证中 : policycoreutils-python-2.5-29.el7_6.1.x86_64 1/1 已安装: policycoreutils-python.x86_64 0:2.5-29.el7_6.1 完毕！ ValueError: 已定义端口 tcp/8888 success success 请浏览器访问：http://192.168.60.94:8888 [root@localhost escheduler-ui]# ``` ### 3.手动部署 安装epel源 `yum install epel-release -y` 安装Nginx `yum install nginx -y` #### 命令 - 启用 `systemctl enable nginx` - 重启 `systemctl restart nginx` - 状态 `systemctl status nginx` > #### 创建静态页面存放目录 ``` mkdir /data2_4T/escheduler_front/escheduler/server ``` > #### 配置文件地址 ``` /etc/nginx/conf.d/escheduler.conf ``` > #### 配置信息 ``` server { listen 8888;# 访问端口 server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /data2_4T/escheduler_front/escheduler/server; # 静态文件目录 index index.html index.html; } location /escheduler { proxy_pass http://192.168.220.181:12345; # 接口地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header x_real_ipP $remote_addr; proxy_set_header remote_addr $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_connect_timeout 4s; proxy_read_timeout 30s; proxy_send_timeout 12s; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } ``` > #### 重启Nginx服务 ``` systemctl restart nginx ``` #### 前端项目发布 前端在开发环境（dev）中运行 `npm run build` 命令，生成打包文件（dist）包 再拷贝到服务器 `/data2_4T/escheduler_front/escheduler/server`（服务器静态页面存放目录） 访问地址 `http://localhost:8888/#/` ### 4.Liunx下使用node启动并且守护进程 安装pm2 `npm install -g pm2` 在项目`escheduler-ui`根目录执行 `pm2 start npm -- run dev` 启动项目 ``` [root@localhost escheduler-ui]# pm2 start npm -- run dev [PM2] Applying action restartProcessId on app [npm](ids: 0) [PM2] [npm](0) ✓ [PM2] Process successfully started ┌──────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬──────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├──────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼──────────┼──────┼──────────┤ │ npm │ 0 │ N/A │ fork │ 6168 │ online │ 31 │ 0s │ 0% │ 5.6 MB │ root │ disabled │ └──────────┴────┴─────────┴──────┴──────┴────────┴─────────┴────────┴─────┴──────────┴──────┴──────────┘ Use `pm2 show ` to get more details about an app ``` ## 问题 #### 1. 上传文件大小限制 编辑配置文件 `vi /etc/nginx/nginx.conf` ``` # 更改上传大小 client_max_body_size 1024m ```