3.4 KiB
前端部署文档
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中的参数,执行./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
启动项目
FAQ
1. 上传文件大小限制
编辑配置文件 vi /etc/nginx/nginx.conf
# 更改上传大小
client_max_body_size 1024m