8.7 KiB
前端部署文档
前端项目环境构建及编译
Escheduler项目前端技术栈
Vue + es6 + Ans-ui + d3 + jsplumb + lodash
开发环境
Node
-
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)
安装及配置
(1-1) Nginx安装
安装 wget http://nginx.org/download/nginx-1.10.1.tar.gz
Nginx的配置及运行需要pcre、zlib等软件包的支持,因此应预先安装这些软件的开发包(devel),以便提供相应的库和头文件,确保Nginx的安装顺利完成。
[root@nginx ~]# service iptables stop
[root@nginx ~]# setenforce 0
[root@nginx ~]# mount /dev/cdrom /mnt/
[root@nginx ~]# vim /etc/yum.repos.d/yum.repo
[base]
name=RedHat Enterprise Linux Server
baseurl=file:///mnt/Packages
gpgcheck=0
[root@nginx ~]# yum -y install pcre-devel zilb-devel openssl-devel
(1-2) 创建运行用户、组
Nginx服务程序默认以nobody身份运行,建议为其创建专门的用户账号,以便更准确地控制其访问权限,增加灵活性、降低安全风险。如:创建一个名为nginx的用户,不建立宿主目录,也禁止登录到shell环境。
[root@nginx ~]# useradd -M -s /sbin/nologin escheduler
(1-3) 编译安装nginx
释放nginx源码包
[root@nginx ~]# tar xf nginx-1.6.2.tar.gz -C /usr/src/
编译前配置
[root@nginx ~]# cd /usr/src/nginx-1.6.2/
[root@nginx nginx-1.6.2]# ./configure --prefix=/usr/local/nginx --user=escheduler --group=escheduler --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module
注:配置前可以参考 ./configure --help给出说明
--prefix 设定Nginx的安装目录
--user和—group 指定Nginx运行用户和组
--with-http_stub_status_module 启用http_stub_status_module模块以支持状态统计
--with-http_ssl_module 启用SSL模块
错误
[root@centos nginx-1.6.2]# ./configure --prefix=/usr/local/nginx --user=escheduler --group=escheduler --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module
checking for OS
+ Linux 2.6.32-431.el6.i686 i686
checking for C compiler ... not found
./configure: error: C compiler cc is not found
解决方法
yum -y install gcc gcc-c++
编译 安装
[root@nginx nginx-1.6.2]# make && make install
为了使Nginx服务器的运行更加方便,可以为主程序nginx创建链接文件,以便管理员直接执行nginx命令就可以调用Nginx的主程序。
[root@nginx nginx-1.6.2]# ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/
[root@nginx nginx-1.6.2]# ll /usr/local/bin/nginx
lrwxrwxrwx 1 root root 27 12-29 07:24 /usr/local/bin/nginx -> /usr/local/nginx/sbin/nginx
Nginx的运行控制 与Apache的主程序httpd类似,Nginx的主程序也提供了"-t"选项用来对配置文件进行检查,以便找出不当或错误的配置。配置文件nginx.conf默认位于安装目录/usr/local/nginx/conf/目录中。若要检查位于其他位置的配置文件,可使用"-c"选项来指定路径。
root@nginx conf]# nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
启动、停止Nginx 直接运行nginx即可启动Nginx服务器,这种方式将使用默认的配置文件,若要改用其他配置文件,需添加"-c 配置文件路径"选项来指定路径。需要注意的是,若服务器中已安装有httpd等其他WEB服务软件,应采取措施(修改端口,停用或卸载)避免部突。
[root@nginx conf]# chown -R escheduler:escheduler /usr/local/nginx
/usr/local/nginx/conf/nginx.conf
[root@nginx conf]# netstat -anpt |grep :80
[root@nginx conf]# nginx
[root@nginx conf]# netstat -anpt |grep :80
tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 6810/nginx: master
通过检查 Nginx程序的监听状态,或者在浏览器中访问此WEB服务(默认页面将显示"Welcome to nginx!"),可以确认Nginx服务是否正常运行。
[root@nginx ~]# yum -y install elinks
[root@nginx ~]# elinks --dump http://localhost
Welcome to nginx!
主程序Nginx支持标准的进程信号,通过kill或者killall命令传送
HUP 重载配置 等同于-1
QUIT 退出进程 等同于-3
KILL 杀死进程
[root@nginx ~]# killall -s HUP nginx
[root@nginx ~]# killall -s QUIT nginx
[root@nginx ~]# netstat -anpt |grep :80
当Nginx进程运行时,PID号默认存放在logs/目录下的nginx.pid文件中,因此若改用kill命令,也可以根据nginx.pid文件中的PID号来进行控制。 为了使Nginx服务的启动、停止、重载等操作更加方便,可以编写Nginx服务脚本,并使用chkconfig和service工具来进行管理,也更加符合RHEL系统的管理习惯。
[root@nginx ~]# vim /etc/init.d/nginx
脚本一
#!/bin/bash
# chkconfig: 2345 99 20
# description: Nginx Server Control Script
PROG="/usr/local/nginx/sbin/nginx"
PIDF="/usr/local/nginx/logs/nginx.pid"
case "$1" in
start)
$PROG
;;
stop)
kill -s QUIT $(cat $PIDF)
;;
restart)
$0 stop
$0 start
;;
reload)
kill -s HUP $(cat $PIDF)
;;
*)
echo "Usage: $0 (start|stop|restart|reload)"
exit 1
esac
exit 0
[root@nginx ~]# chmod +x /etc/init.d/nginx
[root@nginx ~]# chkconfig --add nginx
[root@nginx ~]# chkconfig nginx on
[root@nginx ~]# chkconfig --list nginx
nginx 0:关闭 1:关闭 2:启用 3:启用 4:启用 5:启用 6:关闭
报错的话: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
这样就可以通过nginx脚本来启动、停止、重启、重载Nginx服务器了。
(2-1) root安装
安装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/default.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/#/
问题
1. 上传文件大小限制
编辑配置文件 vi /etc/nginx/nginx.conf
# 更改上传大小
client_max_body_size 1024m