- 云服務器有多個服務（前端
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/;}
}
? 總結
一臺服務器綁定多個端口的服務，要讓用戶只輸入域名訪問：
- 統一入口：80/443 端口（HTTP/HTTPS）。
- 用 Nginx/Apache/Caddy 做反向代理，把不同路徑轉發到不同端口。
- 用戶永遠只用域名，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;}
}
🚀 使用步驟
- 安裝 certbot 并申請證書
（以 Ubuntu 為例）
sudo apt update
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com
- 保存配置并啟用
sudo ln -s /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/
sudo nginx -t # 檢查配置是否正確
sudo systemctl reload nginx
- 測試訪問
https://example.com/→ 前端（3000）https://example.com/api/→ 后端（8288）https://example.com/admin/→ 其他服務（8080）
? 從此以后，用戶訪問時 永遠只需要域名，端口完全隱藏。
👍 這個場景就是典型的 前后端分離部署方案：
- 前端 (React) → 打包后是純靜態文件，放 Nginx 上跑。
- 后端 (Spring Boot) → 打成 jar 包，跑在后臺（一般是
8080/8288端口）。 - Nginx → 負責做 反向代理 和 統一入口，屏蔽后端端口。
拆解完整步驟 👇
🚀 前后端分離項目部署流程
1. 部署 React 前端
-
本地打包：
npm run build生成
build/目錄。 -
上傳到服務器：
scp -r build/* root@your_server_ip:/var/www/react-app/ -
React 訪問路徑問題：
-
如果前端路由用了
BrowserRouter，一定要在 Nginx 配置里加：try_files $uri /index.html;否則刷新會
404。
-
2. 部署 Spring Boot 后端
-
打包 jar：
mvn clean package -DskipTests生成
xxx.jar。 -
上傳服務器：
scp target/xxx.jar root@your_server_ip:/var/www/springboot/ -
啟動 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 分發。
