前后端分离开发过程中，前端需要独立发布项目。在当前vue、react等前端主流框架下开发，都是SPA页面，具体的如何发布到web服务器上。nginx作为主流的前端服务器。如何配nginx规则。直接看配置文件吧，重点部分都含有注释，其他nginx的默认配置指不做处理。主要配置在nginx的 conf/nginx.config文件，如下所示：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        D:/webProject/goodsCenter/dist;  #单页面项目的打包后的dist目录

        location / {
            try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }

        #nginx反向代理，实现接口转发
        location ^~ /goodsCenterWeb/ {
            proxy_pass http://10.7.28.14;  #注意路径后边不要加/
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html break;
        }

}

SPA能正常访问的关键：在 location @router { rewrite ^.*$ /index.html break; }这部分配置。在SPA单页面访问时，实际上访问的是单页面的路由，例如/goods/list，对应的其实是单页面路由中配置的路由组件。但是对于nginx服务器来讲，被认为会寻找根目录下goods文件夹下的list文件夹，当然是找不到的。单页面实际上只有一个页面index.html，因此将所有的页面都rewirte到index页面，即可完成配置

业务能够正常跑通，就需要调用后台接口，由于前后端分离，势必会产生跨域请求，因此nginx反向代理就必不可少，也就是 location ^~ /goodsCenterWeb/ { proxy_pass http://10.7.28.14; #注意路径后边不要加/ } 这部分，会讲所有以goodsCenterWeb开始的请求转发到10.7.28.14 这台服务器。具体在实际开发过程，转发的规则、后台服务器以实际为准。涉及到其他的接口转发规则时，可以具体参考nginx正则表达式。

nginx location 匹配规则

*   ~ 波浪线表示执行一个正则匹配，区分大小写
*   ~* 表示执行一个正则匹配，不区分大小写
*   ^~ 表示普通字符匹配，如果该选项匹配，只匹配该选项，不匹配别的选项，一般用来匹配目录
*   = 进行普通字符精确匹配
*   @ 定义一个命名的 location，使用在内部定向时，例如 error_page, try_files

browserHistory 模式的刷新问题

browserHistory 路由模式下，使用history api可以在前端进行页面跳转，但是刷新的话，就需要对链接进行一个修复（重定向）
我们可以使用nginx 的 try_files 来实现：

location / {
    root /code/app1/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}
location ^~ /app {
    alias /code/app2/build;
    index index.html;
    try_files $uri $uri/ /app/index.html;
}
location ^~ /api/ {
  proxy_pass http://api.site;
}

多个SPA的部署与重定向

首先约定发布代码目录如下:

/publish_webapp/
|-- app1/
    |-- index.html
    |-- static
|-- app2/
    |-- index.html
    |-- static

nginx 配置：

location ~* ^\/(\w+) {
    root /publish_webapp/;
    index index.html;
    try_files $uri $uri/ $uri/index.html /$1/ /$1/index.html;
}

开启gzip

gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;