一、问题背景
原始需求：
- 服务器上已有运行的 WordPress 博客（example.com，端口 80/443）
- 需要在同一服务器上部署餐厅预订系统
- 两个系统需要完全独立，互不影响
遇到的问题：
- 路径冲突：尝试将餐厅系统部署在博客子路径（/restaurant），会影响博客原有路径结构
- 端口访问失败：配置独立端口后，访问出现空白页和 502 Bad Gateway
- 防火墙限制：云服务商安全组已配置，但服务器本地 firewalld 未开放端口
二、最终解决方案：独立端口部署
架构设计
服务器 (YOUR_SERVER_IP)
├── WordPress 博客
│ ├── 域名：https://example.com
│ ├── 端口：80/443
│ └── 配置：/www/server/panel/vhost/nginx/example.com.conf
│
└── 餐厅预订系统
├── 访问地址：http://YOUR_SERVER_IP:8081
├── 前端：Nginx 8081 → /home/restaurant-reservation/frontend/dist
├── 后端：Spring Boot 8080 → /api/*
└── 配置：/www/server/panel/vhost/nginx/restaurant.conf
三、详细配置步骤
1. Nginx 配置（餐厅系统独立端口）
文件路径： /www/server/panel/vhost/nginx/restaurant.conf
nginx
server {
listen 8081;
server_name YOUR_SERVER_IP;
root /home/restaurant-reservation/frontend/dist;
index index.html;
# 前端路由配置
location / {
try_files $uri $uri/ /index.html;
}
# 后端 API 代理
location /api/ {
proxy_pass http://127.0.0.1:8080/api/;
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;
}
access_log /www/wwwlogs/restaurant.log;
error_log /www/wwwlogs/restaurant.error.log;
}
测试并重启 Nginx：
bash
nginx -t
/etc/init.d/nginx restart
2. 防火墙配置（关键步骤）
第一层：云服务商安全组
- 登录云服务器控制台
- 进入 云服务器 → 安全组
- 添加入站规则：
- 协议端口：TCP:8081
- 来源：0.0.0.0/0
- 策略：允许
第二层：服务器本地防火墙（firewalld）
bash
# 检查 firewalld 状态
systemctl status firewalld
# 永久开放 8081 端口
firewall-cmd --permanent --add-port=8081/tcp
# 重载防火墙规则
firewall-cmd --reload
# 验证端口已开放
firewall-cmd --list-ports
# 测试外部访问
curl -I http://YOUR_SERVER_IP:8081/
注意：必须同时配置两层防火墙，缺一不可！
3. 前端构建配置
Vite 配置（ frontend/vite.config.js ）：
javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
// 不需要设置 base 路径，使用根路径
plugins: [react()],
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
})
构建并上传：
bash
# 本地构建
cd frontend
npm run build
# 上传到服务器
scp -r dist root@YOUR_SERVER_IP:/home/restaurant-reservation/frontend/
4. 后端启动脚本
启动脚本（ start-server.sh ）：
bash
#!/bin/bash
echo "启动餐厅预订系统（服务器版）"
# 1. 重启 Nginx
/etc/init.d/nginx restart
# 2. 停止旧的后端进程
pkill -f 'reservation-system'
# 3. 启动后端服务
nohup java -jar backend/target/reservation-system-1.0.0.jar \
> backend.log 2>&1 &
echo "系统启动完成！"
echo "访问地址: http://YOUR_SERVER_IP:8081"
四、问题排查流程
问题1：空白页
排查步骤：
bash
# 1. 检查前端文件是否上传成功
ls -lh /home/restaurant-reservation/frontend/dist/
ls -lh /home/restaurant-reservation/frontend/dist/assets/
# 2. 检查 Nginx 配置
cat /www/server/panel/vhost/nginx/restaurant.conf
# 3. 测试静态文件访问
curl -I http://localhost:8081/
解决方案：
- 确认 dist 目录及 assets 子目录完整上传
- 使用 F12 开发者工具查看 Console 和 Network 错误
问题2：502 Bad Gateway
排查步骤：
bash
# 1. 检查 Nginx 是否监听 8081
netstat -tlnp | grep 8081
# 2. 测试内部访问
curl -I http://127.0.0.1:8081/
# 3. 测试外部访问
curl -I http://YOUR_SERVER_IP:8081/
错误诊断：
- 内部访问成功，外部访问失败 → 防火墙问题
- 内部外部都失败 → Nginx 配置问题
问题3：No route to host
原因：服务器本地防火墙（firewalld）未开放端口
解决方案：
bash
# 开放端口
firewall-cmd --permanent --add-port=8081/tcp
firewall-cmd --reload
# 验证
curl -I http://YOUR_SERVER_IP:8081/
# 应该返回：HTTP/1.1 200 OK
五、验证清单
服务器端验证
bash
# ✅ Nginx 监听 8081
netstat -tlnp | grep 8081
# ✅ 后端运行在 8080
ps aux | grep java | grep reservation
# ✅ 防火墙开放 8081
firewall-cmd --list-ports | grep 8081
# ✅ 内部访问正常
curl -I http://127.0.0.1:8081/
# ✅ 外部访问正常
curl -I http://YOUR_SERVER_IP:8081/
浏览器端验证
- ✅ 访问
http://YOUR_SERVER_IP:8081显示登录页面 - ✅ F12 Console 无错误
- ✅ Network 标签所有资源加载成功（200 状态）
六、最终访问地址
- WordPress 博客：
https://example.com - 餐厅预订系统：
http://YOUR_SERVER_IP:8081
七、方案优势
- 完全独立：两个系统使用不同端口，互不影响
- 配置简单：不需要修改代码的 base 路径
- 易于维护：可以分别重启、升级，不互相干扰
- 扩展性好：未来可以轻松添加更多项目（使用不同端口）
八、注意事项
- 防火墙双重配置：必须同时配置云服务商安全组和服务器 firewalld
- 端口规划：避免端口冲突，建议记录已使用的端口
- HTTPS 配置（可选）：如需 HTTPS，可申请 SSL 证书并配置到 8081 端口
- 性能监控：生产环境建议监控端口占用和进程状态