|
|
|
|
# 前端部署文档
|
|
|
|
|
|
|
|
|
|
- ##### 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 <id|name>` to get more details about an app
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 问题
|
|
|
|
|
#### 1. 上传文件大小限制
|
|
|
|
|
编辑配置文件 `vi /etc/nginx/nginx.conf`
|
|
|
|
|
```
|
|
|
|
|
# 更改上传大小
|
|
|
|
|
client_max_body_size 1024m
|
|
|
|
|
```
|
