# 前端部署文档

## 前端项目环境构建及编译

#### Escheduler项目前端技术栈

##### `Vue + es6 + Ans-ui + d3 + jsplumb + lodash`

#### 开发环境

##### `Node`

- #### node安装

  Node包下载 (注意版本 8.9.4) `https://nodejs.org/download/release/v8.9.4/`

- #### 拉取前端项目到本地

  项目git仓库地址 `git@git.analysys.cn:analysys_changsha/escheduler.git`

- #### 前端项目构建

  用命令行模式 `cd` 进入 `escheduler`项目目录并执行 `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依赖

项目根目录创建`.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

# results matching ""

# No results matching ""