快捷導(dǎo)航

云服務(wù)器用nginx配置域名訪問前后端分離項(xiàng)目

更新時(shí)間：2025年09月16日 09:53:20 作者：柯南二號(hào)

本文介紹通過Nginx反向代理實(shí)現(xiàn)多服務(wù)端口隱藏,統(tǒng)一域名入口訪問,支持HTTPS自動(dòng)跳轉(zhuǎn),用戶只需輸入域名即可訪問前端、后端及其它服務(wù),具有一定的參考價(jià)值,感興趣的可以了解一下

?? 實(shí)現(xiàn)方式：Nginx 反向代理

1. 安裝 Nginx

（大多數(shù)云服務(wù)器鏡像都內(nèi)置了 Nginx，沒有就 apt/yum install nginx）

2. 配置虛擬主機(jī)

假設(shè)你有：

前端 React/Vue 項(xiàng)目跑在 3000 端口
后端 API 服務(wù)跑在 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 會(huì)轉(zhuǎn)發(fā)到 http://127.0.0.1:8288/user。
?? 用戶訪問 https://example.com/，會(huì)自動(dòng)轉(zhuǎn)到 http://127.0.0.1:3000/。

3. 其他服務(wù)端口同理

比如你還有 8080 端口的服務(wù)，可以映射為：

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

這樣所有 非標(biāo)準(zhǔn)端口服務(wù) 都可以通過 域名 + 路徑 來訪問，不需要輸入端口。

?? HTTPS 支持

再加上證書就能用 443 端口，避免瀏覽器提示不安全。
示例（Let’s Encrypt 免費(fèi)證書）：

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ái)服務(wù)器綁定多個(gè)端口的服務(wù)，要讓用戶只輸入域名訪問：

統(tǒng)一入口：80/443 端口（HTTP/HTTPS）。
用 Nginx/Apache/Caddy 做反向代理，把不同路徑轉(zhuǎn)發(fā)到不同端口。
用戶永遠(yuǎn)只用域名，Nginx 在后臺(tái)幫你隱藏端口。

整理一個(gè) 一鍵可用的 Nginx 配置模板，支持：

前端項(xiàng)目（3000 端口）
后端 API（8288 端口）
其他服務(wù)（比如 8080 → /admin/）
自動(dòng) HTTP → HTTPS 跳轉(zhuǎn)
Let’s Encrypt 免費(fèi)證書（只要申請一次即可）

?? 完整 Nginx 配置示例

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

# =============================
# HTTP 自動(dòng)跳轉(zhuǎn)到 HTTPS
# =============================
server {
    listen 80;
    server_name example.com;

    # 自動(dòng)跳轉(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;

    # =============================
    # 前端服務(wù) (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;
    }

    # =============================
    # 其他服務(wù) (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/ → 其他服務(wù)（8080）

? 從此以后，用戶訪問時(shí) 永遠(yuǎn)只需要域名，端口完全隱藏。

?? 這個(gè)場景就是典型的 前后端分離部署方案：

前端 (React) → 打包后是純靜態(tài)文件，放 Nginx 上跑。
后端 (Spring Boot) → 打成 jar 包，跑在后臺(tái)（一般是 8080/8288 端口）。
Nginx → 負(fù)責(zé)做 反向代理 和 統(tǒng)一入口，屏蔽后端端口。

拆解完整步驟 ??

?? 前后端分離項(xiàng)目部署流程

1. 部署 React 前端

本地打包：
```
npm run build
```
生成 build/ 目錄。

上傳到服務(wù)器：

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

React 訪問路徑問題：
- 如果前端路由用了 BrowserRouter，一定要在 Nginx 配置里加：
```
try_files $uri /index.html;
```
  否則刷新會(huì) 404。

2. 部署 Spring Boot 后端

打包 jar：
```
mvn clean package -DskipTests
```
生成 xxx.jar。

上傳服務(wù)器：

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

啟動(dòng) Spring Boot（建議后臺(tái)運(yùn)行 + 日志輸出）：
```
nohup java -jar /var/www/springboot/xxx.jar --server.port=8288 > app.log 2>&1 &
```
?? 這樣后端就跑在 http://127.0.0.1:8288。

（如果要長期運(yùn)行，推薦用 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 免費(fèi)證書：

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

然后配置會(huì)自動(dòng)加上 443，強(qiáng)制跳轉(zhuǎn)到 https。

? 最終效果

https://example.com/ → React 前端頁面
https://example.com/api/... → Spring Boot 后端接口
用戶只需要記住域名，端口全隱藏，前后端統(tǒng)一由 Nginx 分發(fā)。

到此這篇關(guān)于云服務(wù)器用nginx配置域名訪問前后端分離項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx 域名訪問前后端分離內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片