前端部署文档.md

# 前端部署文档

- ##### 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
```