|
|
|
|
@ -1,53 +1,31 @@
|
|
|
|
|
# 前端部署文档 |
|
|
|
|
|
|
|
|
|
- ##### 1. 开发环境搭建 |
|
|
|
|
前端有3种部署方式，分别为自动化部署，手动部署和编译源码部署 |
|
|
|
|
|
|
|
|
|
- ##### 2. 自动化部署 |
|
|
|
|
## 1、准备工作 |
|
|
|
|
#### 准备一：下载安装包 |
|
|
|
|
|
|
|
|
|
- ##### 3. 手动部署 |
|
|
|
|
目前最新安装包版本是1.0.1，下载地址： [码云下载](https://gitee.com/easyscheduler/EasyScheduler/attach_files/) |
|
|
|
|
|
|
|
|
|
- ##### 4. Liunx下使用node启动并且守护进程 |
|
|
|
|
下载escheduler-ui-1.0.1.tar.gz后，解压后会产生dist目录,进入dist目录 |
|
|
|
|
> cd dist |
|
|
|
|
|
|
|
|
|
#### 准备二：新建一个`.env`文件 |
|
|
|
|
|
|
|
|
|
### 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依赖 |
|
|
|
|
在dist目录下新建一个`.env`文件，在文件里添加后端服务的ip地址和端口，用于跟后端交互，`.env`文件内容如下： |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
在项目`escheduler-ui`根目录`.env`添加代理的端口地址 |
|
|
|
|
``` |
|
|
|
|
# 前端代理的接口地址（例） |
|
|
|
|
API_BASE = http://192.168.220.204:12345 |
|
|
|
|
# 代理的接口地址（自行修改） |
|
|
|
|
API_BASE = http://192.168.xx.xx:12345 |
|
|
|
|
|
|
|
|
|
# 如果您需要用ip访问项目可以把 "#" 号去掉（例） |
|
|
|
|
#DEV_HOST = 192.168.6.132 |
|
|
|
|
#DEV_HOST = 192.168.xx.xx |
|
|
|
|
``` |
|
|
|
|
运行 |
|
|
|
|
- `npm start` 项目开发环境 (启动后访问地址 http://localhost:8888/#/) |
|
|
|
|
|
|
|
|
|
- `npm run build` 项目打包 (打包后根目录会创建一个名为dist文件夹，用于发布线上Nginx) |
|
|
|
|
|
|
|
|
|
## 2、部署 |
|
|
|
|
以下两种方式任选其一部署即可，推荐自动化部署 |
|
|
|
|
### 2.1 自动化部署 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2.自动化部署 |
|
|
|
|
|
|
|
|
|
在项目`escheduler-ui`根目录编辑安装文件`vi install(线上环境).sh` |
|
|
|
|
在前端项目根目录dist下编辑安装文件`vi install(线上环境).sh`(执行时，最好修改install(线上环境).sh为install-ui.sh,跟后端部署区分) |
|
|
|
|
|
|
|
|
|
更改前端访问端口和后端代理接口地址 |
|
|
|
|
|
|
|
|
|
@ -56,40 +34,26 @@ API_BASE = http://192.168.220.204:12345
|
|
|
|
|
esc_proxy="8888" |
|
|
|
|
|
|
|
|
|
# 配置代理后端接口 |
|
|
|
|
esc_proxy_port="http://192.168.220.154:12345" |
|
|
|
|
esc_proxy_port="http://192.168.xx.xx:12345" |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
前端自动部署基于`yum`操作，部署之前请先安装更新`yum |
|
|
|
|
|
|
|
|
|
在项目`escheduler-ui`根目录执行`./install(线上环境).sh` |
|
|
|
|
前端自动部署基于linux系统`yum`操作，部署之前请先安装更新`yum` |
|
|
|
|
|
|
|
|
|
在前端项目根目录dist下执行`./install(线上环境).sh` 或者改名后的 `./install-ui.sh` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 3.手动部署 |
|
|
|
|
### 2.2 手动部署 |
|
|
|
|
|
|
|
|
|
安装epel源 `yum install epel-release -y` |
|
|
|
|
|
|
|
|
|
安装Nginx `yum install nginx -y` |
|
|
|
|
|
|
|
|
|
#### 命令 |
|
|
|
|
|
|
|
|
|
- 启用 `systemctl enable nginx` |
|
|
|
|
|
|
|
|
|
- 重启 `systemctl restart nginx` |
|
|
|
|
|
|
|
|
|
- 状态 `systemctl status nginx` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> #### 创建静态页面存放目录 |
|
|
|
|
> #### nginx配置文件地址 |
|
|
|
|
``` |
|
|
|
|
mkdir /data2_4T/escheduler_front/escheduler/server |
|
|
|
|
/etc/nginx/conf.d/default.conf |
|
|
|
|
``` |
|
|
|
|
> #### 配置文件地址 |
|
|
|
|
``` |
|
|
|
|
/etc/nginx/conf.d/escheduler.conf |
|
|
|
|
``` |
|
|
|
|
> #### 配置信息 |
|
|
|
|
> #### 配置信息(自行修改) |
|
|
|
|
``` |
|
|
|
|
server { |
|
|
|
|
listen 8888;# 访问端口 |
|
|
|
|
@ -97,11 +61,11 @@ server {
|
|
|
|
|
#charset koi8-r; |
|
|
|
|
#access_log /var/log/nginx/host.access.log main; |
|
|
|
|
location / { |
|
|
|
|
root /data2_4T/escheduler_front/escheduler/server; # 静态文件目录 |
|
|
|
|
root /xx/dist; # 上面前端解压的dist目录地址(自行修改) |
|
|
|
|
index index.html index.html; |
|
|
|
|
} |
|
|
|
|
location /escheduler { |
|
|
|
|
proxy_pass http://192.168.220.181:12345; # 接口地址 |
|
|
|
|
proxy_pass http://192.168.xx.xx:12345; # 接口地址(自行修改) |
|
|
|
|
proxy_set_header Host $host; |
|
|
|
|
proxy_set_header X-Real-IP $remote_addr; |
|
|
|
|
proxy_set_header x_real_ipP $remote_addr; |
|
|
|
|
@ -128,50 +92,16 @@ server {
|
|
|
|
|
systemctl restart nginx |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
#### 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` |
|
|
|
|
|
|
|
|
|
``` |
|
|
|
|
- 启用 `systemctl enable nginx` |
|
|
|
|
|
|
|
|
|
[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 |
|
|
|
|
- 重启 `systemctl restart nginx` |
|
|
|
|
|
|
|
|
|
``` |
|
|
|
|
- 状态 `systemctl status nginx` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 问题 |
|
|
|
|
## 前端常见问题 |
|
|
|
|
#### 1. 上传文件大小限制 |
|
|
|
|
编辑配置文件 `vi /etc/nginx/nginx.conf` |
|
|
|
|
``` |
|
|
|
|
|
dailidong
5 years ago