nginx部署SPA页面

  前后端分离开发过程中，前端需要独立发布项目。在当前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的博客：全面了解Nginx到底能做什么