1. 背景

目前，Java Web开发的前后端分离技术越来越成熟，许多新开发的信息系统使用了前后端分离的方案，这里就来记录一下前后端分离的项目部署。这里我们使用的前端框架是Vue，后台使用SpringBoot框架提供数据接口。

Nginx

nginx (engine x) 是一个高性能的HTTP和反向代理服务器,这里我们使用nginx来作为前端页面的静态服务器。

---

2. 思路

前端部署

nginx作为静态服务器部署前端代码

后端部署

nginx配置端口转发指向后台应用服务的预设端口

nginx反向代理

将发往nginx服务器的数据请求发送到后台端口，同时重写cookie路径使前后端共享cookie

---

3. 代码实现

    worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
            listen       80;
            server_name  your.domain.name;
    
            location / {
                    root html/build;
                    try_files $uri /index.html;  # try_files：检查文件； $uri：监测的文件路径； /index.html：文件不存在重定向的新路径 
                    index index.html; 
            }
    
            location /api/ {
                # 把 /api 路径下的请求转发给真正的后端服务器
                proxy_pass http://localhost:8080/;
    
                # 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
                proxy_set_header Host $http_host;
    
                # 把cookie中的path部分从/api替换成/
                proxy_cookie_path /api /;
    
                # 把cookie的path部分从localhost:8080替换成your.domain.name
                proxy_cookie_domain localhost:8080 your.domain.name;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }