云服務器用nginx配置域名訪問前后端分離項目
更新時間：2025年09月16日 09:53:20 作者：柯南二號
本文介紹通過Nginx反向代理實現(xiàn)多服務端口隱藏,統(tǒng)一域名入口訪問,支持HTTPS自動跳轉(zhuǎn),用戶只需輸入域名即可訪問前端、后端及其它服務,具有一定的參考價值,感興趣的可以了解一下
云服務器有多個服務（前端 3000 端口、后端 8288 端口，甚至還有別的服務）。
希望用戶只輸入 域名（比如 https://example.com），而不是 example.com:3000、example.com:8288。
本質(zhì)上是要做 端口隱藏 + 域名統(tǒng)一入口。
核心方案是：用 Nginx / Caddy / Apache 作為反向代理（網(wǎng)關入口），監(jiān)聽標準端口 80/443，把請求轉(zhuǎn)發(fā)到后端對應服務端口。
?? 實現(xiàn)方式：Nginx 反向代理
1. 安裝 Nginx
（大多數(shù)云服務器鏡像都內(nèi)置了 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 會轉(zhuǎn)發(fā)到 http://127.0.0.1:8288/user。
?? 用戶訪問 https://example.com/，會自動轉(zhuǎn)到 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/;
}
}
? 總結(jié)
一臺服務器綁定多個端口的服務，要讓用戶只輸入域名訪問：
- 統(tǒng)一入口：80/443 端口（HTTP/HTTPS）。
- 用 Nginx/Apache/Caddy 做反向代理，把不同路徑轉(zhuǎn)發(fā)到不同端口。
- 用戶永遠只用域名，Nginx 在后臺幫你隱藏端口。
整理一個 一鍵可用的 Nginx 配置模板，支持：
- 前端項目（3000 端口）
- 后端 API（8288 端口）
- 其他服務（比如 8080 → /admin/）
- 自動 HTTP → HTTPS 跳轉(zhuǎn)
- Let’s Encrypt 免費證書（只要申請一次即可）
?? 完整 Nginx 配置示例
文件路徑：/etc/nginx/sites-available/example.conf
# =============================
# HTTP 自動跳轉(zhuǎn)到 HTTPS
# =============================
server {
listen 80;
server_name example.com;
# 自動跳轉(zhuǎn) https
return 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) → 打包后是純靜態(tài)文件，放 Nginx 上跑。
- 后端 (Spring Boot) → 打成 jar 包，跑在后臺（一般是
8080/8288端口）。 - Nginx → 負責做 反向代理 和 統(tǒng)一入口，屏蔽后端端口。
拆解完整步驟 ??
?? 前后端分離項目部署流程
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 靜態(tài)資源
# ==================
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 Boot
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
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，強制跳轉(zhuǎn)到 https。
? 最終效果
https://example.com/→ React 前端頁面https://example.com/api/...→ Spring Boot 后端接口- 用戶只需要記住 域名，端口全隱藏，前后端統(tǒng)一由 Nginx 分發(fā)。
到此這篇關于云服務器用nginx配置域名訪問前后端分離項目的文章就介紹到這了,更多相關nginx 域名訪問前后端分離內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Ubuntu16.04上為Nginx創(chuàng)建自簽名SSL證書
SSL證書是實現(xiàn)HTTPS的關鍵組成部分,本文主要介紹了Ubuntu16.04上為Nginx創(chuàng)建自簽名SSL證書,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-05-05
這篇文章主要介紹了Nginx 運維之域名驗證的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Nginx如何配置根據(jù)路徑轉(zhuǎn)發(fā)詳解
Nginx是作為一個反向代理,轉(zhuǎn)發(fā),和負載均衡的服務器,也可以用于分布式,下面這篇文章主要給大家介紹了關于Nginx如何配置根據(jù)路徑轉(zhuǎn)發(fā)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
對于Web而已,80端口和443端口是十分重要的,下面這篇文章主要給大家介紹了關于Nginx如何配置多個服務域名解析共用80端口的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Nginx配置如何區(qū)分PC或手機訪問不同域名，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Nginx中proxy_pass指令斜杠的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Nginx限制某個IP同一時間段的訪問次數(shù)和請求數(shù)示例代碼
nginx可以通過ngx_http_limit_conn_module和ngx_http_limit_req_module配置來限制ip在同一時間段的訪問次數(shù).具體示例代碼大家參考下本文2017-08-08
本文介紹了在Nginx中部署HTTP/3的詳細步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-09-09
這篇文章主要介紹了Filebeat 采集 Nginx 日志的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了關于nginx 實現(xiàn)jira反向代理的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09