angular2 构建项目并配置反向代理

部署前端angular项目时遇到的问题有以下：

1. 使用nginx 配置反向代理
2. 使用nginx配置负载均衡
3. 使用nginx 开启gzip压缩
4. 配置nginx.config 解决angular2 项目不能刷新（刷新404）的情况

一、项目打包配置流程

1. 配置前端请求后端路径

'server.rootUrl': 'http://127.0.0.1:8080/web-angular/',

2. 配置nginx反向代理

[root@oa-web-01 conf.d]# cat default.conf
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location /web-angular {
        proxy_pass   http://127.0.0.1:8080;
    }
}

3. 使用npm build 生产版本

$ npm run build:prod

4. 将dist 文件夹中的文件全部复制到 nginx html 路径中

html 路径如下，使用不同linux版本，路径可能会有不同，另一种方式是直接在nginx 的config 文件中配置服务的根路径

/usr/share/nginx/html

5. 重新启动nginx

$ nginx -s reload

6. 解决刷新404错误解决

在使用angular4 构建项目，并部署到nginx 中， 浏览器访问页面并刷新页面后，浏览器网页加载失败，解决方案如下，nginx config 文件配置如下，当浏览器刷新时，不能识别的路径，重定向到index.html 页面.

location / {
    root   D:/Zmyitem/fsoa-pages/packages/beneform4j-angular-demo/target/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
 }

7. nginx 启动gzip压缩
   在nginx 的config 文件中，打开gzip 的注释，但测试后对比发现，并没有启动gzip 压缩

# gzip  on;

重新修改以下配置，启动成功

主要修改这一行:
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;
    gzip_min_length 500k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript  application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
    include /etc/nginx/conf.d/*.conf;
}

Nginx开启和配置Gzip压缩

gzip前.jpg

gzip后.jpg

开启压缩前和压缩后对比，压缩比率在 70% 左右，很神奇。