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

更新时间：2025年09月16日 09:53:20 作者：柯南二号

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

🔧 实现方式：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;

    # 自动跳转 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) → 打包后是纯静态文件，放 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 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。

✅ 最终效果

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

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

您可能感兴趣的文章:

nginx使用stream模块代理端口的实现
本文主要介绍了nginx使用stream模块代理端口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-02-02
nginx限速之连接数限制技巧分享
通过查看Nginx的并发连接，我们可以更清除的知道网站的负载情况。下面这篇文章主要给大家介绍了关于nginx限速之连接数限制技巧的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2018-01-01
Nginx+tomcat负载均衡集群的实现方法
这篇文章主要介绍了Nginx+tomcat负载均衡集群,的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
Nginx 解决WebApi跨域二次请求以及Vue单页面的问题
下面小编就为大家分享一篇Nginx 解决WebApi跨域二次请求以及Vue单页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
nginx配置同一域名同一端口下部署多个vue项目
本文主要介绍了nginx配置同一域名同一端口下部署多个vue项目,可以根据根路径不同分别代理访问不同项目,具有一定的参考价值,感兴趣的可以了解一下
2024-06-06
配置Nginx实现访问本地静态资源的完整指南
Nginx 是一个高性能的 HTTP 服务器和反向代理服务器,广泛用于静态资源的托管和负载均衡,在开发和生产环境中,我们常常需要使用 Nginx 来提供本地静态资源的访问,本文将详细介绍如何配置 Nginx 以便访问本地静态资源,需要的朋友可以参考下
2024-08-08
nginx部署.net core站点的方法
这篇文章主要介绍了nginx部署.net core站点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Nginx 访问 /root/下 403 Forbidden问题解决
在使用Nginx作为Web服务器时,可能会遇到403 Forbidden错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-05-05
Nginx 站点垂直扩容的几种优化方案
本文主要介绍了Nginx 站点垂直扩容的几种优化方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-01-01
配置nginx保证frps服务器与web共用80端口的方法
这篇文章主要介绍了frps服务端与nginx可共用80端口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06