前端部署文档

• 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.自动化部署

在项目escheduler-ui根目录编辑安装文件vi install(线上环境).sh

更改前端访问端口和后端代理接口地址

# 配置前端访问端口
esc_proxy="8888"

# 配置代理后端接口
esc_proxy_port="http://192.168.220.154:12345"

前端自动部署基于yum操作，部署之前请先安装更新`yum

在项目escheduler-ui根目录执行./install(线上环境).sh

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 启动项目

命令

• 启用 pm2 start npm -- run dev

• 停止 pm2 stop npm

• 删除 pm2 delete npm

• 状态 pm2 list

[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 <id|name>` to get more details about an app

问题

1. 上传文件大小限制

编辑配置文件 vi /etc/nginx/nginx.conf

# 更改上传大小
client_max_body_size 1024m