【nginx】前后端分离部署

原创已于 2023-08-29 10:52:34 修改 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #linux #java #vue #tomcat

于 2019-12-25 19:23:32 首次发布

运维专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了使用Vue和axios进行前端开发，配合SpringBoot作为后端服务的项目打包及部署流程。前端通过增加统一前缀/api，便于Nginx配置反向代理，实现与后端接口的无缝对接。同时，文章提供了具体的nginx配置示例和前后端的部署步骤，包括前端dist目录的生成、后端jar包的构建与启动，以及浏览器访问验证。

打包

前端(vue、axios)

由于后台接口没有统一前缀，因此在前端增加统一前缀/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': ''
        }
      }
    },

build打包成dist

后台(springboot)

maven打包成jar包
8082端口

部署

前端

nginx安装
上传dist
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;
        }
    }