nginx

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > nginx > nginx 域名访问前后端分离

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

作者:柯南二号

本文介绍通过Nginx反向代理实现多服务端口隐藏,统一域名入口访问,支持HTTPS自动跳转,用户只需输入域名即可访问前端、后端及其它服务,具有一定的参考价值,感兴趣的可以了解一下

云服务器有多个服务(前端 3000 端口、后端 8288 端口,甚至还有别的服务)。

希望用户只输入 域名(比如 https://example.com),而不是 example.com:3000example.com:8288

本质上是要做 端口隐藏 + 域名统一入口

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

🔧 实现方式:Nginx 反向代理

1. 安装 Nginx

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

2. 配置虚拟主机

假设你有:

👉 你希望访问方式变成:

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 配置模板,支持:

🔧 完整 Nginx 配置示例

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

# =============================
# HTTP 自动跳转到 HTTPS
# =============================
server {
    listen 80;
    server_name example.com;

    # 自动跳转 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;
    }
}

🚀 使用步骤

  1. 安装 certbot 并申请证书
    (以 Ubuntu 为例)
sudo apt update
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com
  1. 保存配置并启用
sudo ln -s /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/
sudo nginx -t   # 检查配置是否正确
sudo systemctl reload nginx
  1. 测试访问

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

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

拆解完整步骤 👇

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

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

(如果要长期运行,推荐用 systemdDocker 部署。)

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 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,强制跳转到 https

✅ 最终效果

到此这篇关于云服务器用nginx配置域名访问前后端分离项目的文章就介绍到这了,更多相关nginx 域名访问前后端分离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

您可能感兴趣的文章:
阅读全文