通过nginx发布vue项目

最近马上要上线的项目是前后端分离的，后端部署就不说了，对于的前端的部署还是第一次部署，原来一般是前端打包好后直接放到项目中，静态资源少还行，如果是个庞大的前端直接放进去就不太好了，所以就采用nginx进行转发，现在总结一下：

一、安装nginx

借鉴https://www.cnblogs.com/xxoome/p/5866475.html

二、修改配置文件

server {
        listen       80;
        server_name  172.28.162.36;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root   /home/bbk/tomcats/softservice-questions/ui/dist;
        location / {
            try_files $uri $uri/ /index.html;
            index  index.php index.html index.htm;
        }
       
        location ~* /a(pi|uth) {
            proxy_pass http://172.28.162.36:8000;
        }
        #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   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

三、重点说明：

【1】root   /home/bbk/tomcats/softservice-questions/ui/dist;是配置的服务器中vue项目的打包文件，yarn run build，打包的时候注意一点就行，就是index.js中的build路径的设置。

【2】其他的转发地址配置

        location ~* /a(pi|uth) {
            proxy_pass http://172.28.162.36:8000;
        }

在项目中，前端请求网关的地址：以api或者auth开头的请求，转发到网关地址。

【3】配置好后刷新配置

./nginx -s reload
./nginx -t

【4】最终的访问