Linux 环境下前后端分离项目（Spring Boot + Vue）手动部署

# 检查是否有 java 进程在运行
ps -ef | grep java

关闭进程： 如果需要重启或停止服务，先查询进程号 (PID)，然后执行 kill 命令。

# -9 表示强制终止
kill -9 <PID>

[!IMPORTANT] 网络安全配置 云服务器安全组：需在云厂商控制台开放后端端口（如 8080）。 Linux 防火墙：如果服务器开启了 firewalld，也需放行对应端口。

部署验证： 后端启动成功后，Swagger 或接口文档应可访问。

2. 前端部署 (Vue)

2.1 项目打包

在本地前端项目根目录下，构建生产环境代码。

# 构建生产环境 (根据 package.json 中的脚本名称调整)
npm run build

打包结果：

• 生成 dist 文件夹。
• 包含 index.html 和 static 资源。

2.2 上传静态资源

将生成的 dist 文件夹上传至服务器。

[!NOTE] 目录规范建议 建议重命名 dist 文件夹以区分不同项目或端（如 parking-back），不要直接使用默认的 dist 名称。

上传路径示例：/home/www/parking-back/parking-back

3. Nginx 配置 (核心步骤)

Nginx 负责处理静态资源请求和将 API 请求反向代理到后端。

3.1 修改配置文件

编辑 Nginx 配置文件（通常位于 /usr/local/nginx/conf/nginx.conf 或 /etc/nginx/nginx.conf）。

配置示例与详解：

server {
    # 1. 监听端口 (前端访问入口)
    # 注意：此端口 (如 9090) 同样需要在安全组和防火墙中开放
    listen 9090;
    
    # 2. 服务器域名或 IP
    server_name localhost;
    
    # 3. 前端静态资源配置
    location / {
        # 指定前端文件上传的绝对路径
        root "/home/www/parking-back/parking-back";
        # 默认首页
        index index.html index.htm;
        
        # 4. 解决 Vue History 模式刷新 404 问题 (关键)
        # 尝试寻找 $uri，找不到找 $uri/，再找不到跳转 index.html
        try_files $uri $uri/ /index.html;
    }
    
    # 5. 后端接口反向代理配置
    # 拦截以 /prod-api/ 开头的请求
    location /prod-api/ {
        # 代理转发到后端服务地址
        # 注意：proxy_pass 结尾带 / 会去除 /prod-api/ 前缀
        proxy_pass http://localhost:8080/;
        
        # 传递真实客户端 IP 等头部信息
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
    # 错误页面配置
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

3.2 重启 Nginx

修改配置文件后，必须重载或重启 Nginx 才能生效。

# 进入 Nginx sbin 目录 (根据实际安装位置调整)
cd /usr/local/nginx/sbin

# 检查配置文件语法是否正确
./nginx -t

# 重载配置文件 (推荐，无需停止服务)
./nginx -s reload

4. 最终验证

在浏览器中访问 http://服务器 IP:前端端口（例如 http://x.x.x.x:9090）。 如果能正常显示页面且验证码/数据加载正常，说明前后端部署及 Nginx 代理配置成功。