nginx 前后端分离部署

打包
前端(vue、axios)
1、由于后台接口没有统一前缀，因此在前端增加统一前缀/api，方便nginx配置反向代理

前台请求：/api/index/getlist
相当于
后台请求：http://X.X.X.X:8082/index/getlist

//axios请求
axios.post(/api/index/getlist).then((res)=>{})

//本地开发调试代理配置需增加 pathRewrite，去掉/api
proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8082',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

2、build打包成dist

后台(springboot)
1、maven打包成jar包
2、8082端口

部署
前端
1、nginx安装
2、上传dist
3、nginx.conf修改配置

user  root;#因为是在root权限下安装启动的
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       8084; #端口号
        server_name  webapp;

        location / {
            root   /web/dist; #前端dist目录
            index  index.html index.htm; 
        }
        location /api {
            rewrite ^.+api/?(.*)$ /$1 break; #去掉后端接口没有的/api
            proxy_pass http://127.0.0.1:8082; #反向代理到后端
        }

        #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;
        }
    }

4、使修改配置文件生效：nginx -s reload 、nginx -s reopen

后台
1、java安装
2、上传jar包
3、nohup java -jar XXX.jar & 启动

浏览器访问
http://X.X.X.X:8084