SpringBootWeb 篇-深入了解 SpringBoot + Vue 的前后端分离项目部署上线与 Nginx 配置文件结构

在SpringBoot与Vue前后端分离的项目中，我们通常需要将前端的静态资源部署在Nginx上，并通过Nginx代理后端的API接口。以下是部署和Nginx的基本步骤：

1. 构建前端Vue项目：在Vue项目根目录下，执行构建命令，通常是npm run build或yarn build，以生成可部署的静态文件。
2. 上传文件到服务器：将构建好的dist目录下的文件上传到服务器，通常是通过FTP或者SCP等工具。
3. 配置Nginx：编辑Nginx配置文件（通常是/etc/nginx/nginx.conf或者/etc/nginx/sites-available/下的某个文件），配置静态资源服务和代理设置。

server {
    listen 80;
    server_name your-domain.com; # 你的域名
 
    location / {
        root /path/to/your/dist; # 静态文件目录
        try_files $uri $uri/ /index.html; # 用于支持Vue-router的history模式
    }
 
    location /api/ {
        proxy_pass http://your-backend-server-url; # 你的后端服务器URL
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

4. 重启Nginx：保存配置并重启Nginx服务，使配置生效。
5. 测试部署：通过浏览器或者curl测试部署是否成功，并确保能正确访问静态资源和代理的后端API。

注意：确保你的SpringBoot后端应用已经打包成jar，并已经部署到服务器上，并且确保Nginx代理的后端API路径与你的SpringBoot应用中配置的一致。