【后端】云服务器用nginx配置域名访问前后端分离项目

• 云服务器有多个服务（前端 3000 端口、后端 8288 端口，甚至还有别的服务）。
• 希望用户只输入 域名（比如 https://example.com），而不是 example.com:3000、example.com:8288。
• 本质上是要做 端口隐藏 + 域名统一入口。

核心方案是：用 Nginx / Caddy / Apache 作为反向代理（网关入口），监听标准端口 80/443，把请求转发到后端对应服务端口。

---

🔧 实现方式：Nginx 反向代理

1. 安装 Nginx

（大多数云服务器镜像都内置了 Nginx，没有就 apt/yum install nginx）

---

2. 配置虚拟主机

假设你有：

• 前端 React/Vue 项目跑在 3000 端口
• 后端 API 服务跑在 8288 端口

👉 你希望访问方式变成：

• https://example.com/ → 前端页面
• https://example.com/api/ → 后端 API

Nginx 配置：

server {listen 80;server_name example.com;# 前端（3000端口）location / {proxy_pass http://127.0.0.1:3000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}# 后端 API（8288端口）location /api/ {proxy_pass http://127.0.0.1:8288/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}

👉 用户访问 https://example.com/api/user，Nginx 会转发到 http://127.0.0.1:8288/user。
👉 用户访问 https://example.com/，会自动转到 http://127.0.0.1:3000/。

---

3. 其他服务端口同理

比如你还有 8080 端口的服务，可以映射为：

location /admin/ {proxy_pass http://127.0.0.1:8080/;
}

这样所有 非标准端口服务 都可以通过 域名 + 路径 来访问，不需要输入端口。

---

🔐 HTTPS 支持

再加上证书就能用 443 端口，避免浏览器提示不安全。
示例（Let’s Encrypt 免费证书）：

server {listen 443 ssl;server_name example.com;ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;location / {proxy_pass http://127.0.0.1:3000;}location /api/ {proxy_pass http://127.0.0.1:8288/;}
}

---

✅ 总结

一台服务器绑定多个端口的服务，要让用户只输入域名访问：

1. 统一入口：80/443 端口（HTTP/HTTPS）。
2. 用 Nginx/Apache/Caddy 做反向代理，把不同路径转发到不同端口。
3. 用户永远只用域名，Nginx 在后台帮你隐藏端口。

---

整理一个 一键可用的 Nginx 配置模板，支持：

• 前端项目（3000 端口）
• 后端 API（8288 端口）
• 其他服务（比如 8080 → /admin/）
• 自动 HTTP → HTTPS 跳转
• Let’s Encrypt 免费证书（只要申请一次即可）

---

🔧 完整 Nginx 配置示例

文件路径：/etc/nginx/sites-available/example.conf

# =============================
# HTTP 自动跳转到 HTTPS
# =============================
server {listen 80;server_name example.com;# 自动跳转 httpsreturn 301 https://$host$request_uri;
}# =============================
# HTTPS 配置（主站）
# =============================
server {listen 443 ssl http2;server_name example.com;# SSL 证书（用 certbot/Let’s Encrypt 获取）ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;# 一些推荐的 SSL 配置ssl_protocols TLSv1.2 TLSv1.3;ssl_prefer_server_ciphers on;# =============================# 前端服务 (3000端口)# =============================location / {proxy_pass http://127.0.0.1:3000;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;}# =============================# 后端 API (8288端口)# =============================location /api/ {proxy_pass http://127.0.0.1:8288/;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;}# =============================# 其他服务 (8080端口)# =============================location /admin/ {proxy_pass http://127.0.0.1:8080/;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;}
}

---

🚀 使用步骤

1. 安装 certbot 并申请证书
   （以 Ubuntu 为例）

sudo apt update
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com

2. 保存配置并启用

sudo ln -s /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/
sudo nginx -t   # 检查配置是否正确
sudo systemctl reload nginx

3. 测试访问

• https://example.com/ → 前端（3000）
• https://example.com/api/ → 后端（8288）
• https://example.com/admin/ → 其他服务（8080）

---

✅ 从此以后，用户访问时 永远只需要域名，端口完全隐藏。

👍 这个场景就是典型的 前后端分离部署方案：

• 前端 (React) → 打包后是纯静态文件，放 Nginx 上跑。
• 后端 (Spring Boot) → 打成 jar 包，跑在后台（一般是 8080/8288 端口）。
• Nginx → 负责做 反向代理 和 统一入口，屏蔽后端端口。

拆解完整步骤 👇

---

🚀 前后端分离项目部署流程

1. 部署 React 前端

1. 本地打包：

   npm run build
   

   生成 build/ 目录。

2. 上传到服务器：

   scp -r build/* root@your_server_ip:/var/www/react-app/
   

3. React 访问路径问题：

   • 如果前端路由用了 BrowserRouter，一定要在 Nginx 配置里加：

     try_files $uri /index.html;
     

     否则刷新会 404。

---

2. 部署 Spring Boot 后端

1. 打包 jar：

   mvn clean package -DskipTests
   

   生成 xxx.jar。

2. 上传服务器：

   scp target/xxx.jar root@your_server_ip:/var/www/springboot/
   

3. 启动 Spring Boot（建议后台运行 + 日志输出）：

   nohup java -jar /var/www/springboot/xxx.jar --server.port=8288 > app.log 2>&1 &
   

   👉 这样后端就跑在 http://127.0.0.1:8288。

（如果要长期运行，推荐用 systemd 或 Docker 部署。）

---

3. 配置 Nginx

编辑 /etc/nginx/sites-available/project.conf：

server {listen 80;server_name example.com;# ==================# 前端 React 静态资源# ==================root /var/www/react-app;index index.html;location / {try_files $uri /index.html;}# ==================# 后端 SpringBoot API# ==================location /api/ {proxy_pass http://127.0.0.1:8288/;   # 反向代理到 Spring Bootproxy_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

sudo ln -s /etc/nginx/sites-available/project.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

---

5. 配置 HTTPS（推荐）

使用 Let’s Encrypt 免费证书：

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com

然后配置会自动加上 443，强制跳转到 https。

---

✅ 最终效果

• https://example.com/ → React 前端页面
• https://example.com/api/... → Spring Boot 后端接口
• 用户只需要记住 域名，端口全隐藏，前后端统一由 Nginx 分发。

---