【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