nginx配置https一个域名不同路径分别访问前端和后端两个项目

该博客讲述了如何配置SSL安全证书以实现主域名www.liyongquan.com的HTTPS访问,并解决其子域名http://api.liyongquan.com跨协议问题。通过设置nginx服务器,将子域名接口请求重定向至HTTPS,确保前后端通信安全。同时提供了配置文件内容及测试、重启方法。

可参考:

https://help.aliyun.com/document_detail/98728.html?spm=5176.2020520163.cas.15.4ed756a7Oi0HTv
https://www.cnblogs.com/phpper/p/6441475.html

背景:

https://www.liyongquan.com 主域名是经过配置ssl安全证书的指向前端页面,

http://api.liyongquan.com 子域名是未经过配置ssl指向后端接口项目的。

此时页面访问接口会跨协议。因此配置接口请求url为https://www.liyongquan.com/api/

www.liyongquan.com.conf 配置文件内容如下:

server {
    listen 80;
    server_name  www.liyongquan.com;
    return 301 https://$http_host$request_uri;
}

server {
        listen       443 ssl;
        server_name  www.liyongquan.com;
        client_max_body_size 125M;
        access_log /data/logs/www/www.liyongquan.com.access.log;
        error_log /data/logs/www/www.liyongquan.com.error.log;

        ssl_certificate ./cert/www.liyongquan.com.pem;
        ssl_certificate_key ./cert/www.liyongquan.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

        #rewrite ^(.*)$ https://$host$1 permanent;
        location / {
           root /data/web/zhanfu-build/;
           index index.html;
           #try_files $uri $uri/ /index.html;
        }
        location ^~ /api {
            proxy_pass_header Server;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Referer $http_referer;
            proxy_set_header X-Scheme $scheme;
            proxy_pass http://127.0.0.1:7000;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        }
}

www.zhanfu6.api.com.conf 配置文件内容如下:

server {
        listen       7000;

        client_max_body_size 125M;
        root /data/web/zhanfu-server/public;
        access_log /data/logs/www/www.liyongquan.api.com.access.log;
        error_log /data/logs/www/www.liyongquan.api.com.error.log;
        index index.html index.htm index.php;
        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ .*\.(php|php5)?$ {
                fastcgi_pass  UNIX:/var/run/php-fpm/php-cgi.sock;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
                include        fastcgi.conf;
        }
        location = /50x.html {
        }

}

测试配置是否成功:nginx -t
平滑重启生效:nginx -s reload

 

是的,**完全可以在一台服务器上配置 Nginx 作为统一入口(反向代理),将请求分别转发到另一台服务器上的前端后端服务**。这是现代 Web 架构中非常常见的做法,常用于实现: - 统一域名访问 - 前后端分离部署 - 负载均衡与安全隔离 --- ## ✅ 场景说明 假设你有两台服务器: | 服务器 | 角色 | 功能 | |--------|------|------| | Server A(IP: `192.168.1.10`) | **边缘 Nginx 服务器** | 配置 Nginx,对外提供服务(如 `example.com`) | | Server B(IP: `192.168.1.20`) | **应用服务器** | 运行前端(Vue/React)后端 API(Node.js/Spring Boot 等) | 目标: > 用户访问 `https://example.com` → 请求由 Server A 的 Nginx 处理 → > - `/` 开头的静态资源 → 转发到 Server B 的前端服务(比如监听 3000 端口) > - `/api/` 开头的接口 → 转发到 Server B 的后端服务(比如监听 8080 端口) --- ## ✅ 解决方案:使用 Nginx 反向代理 + 路径分流 ### 在 Server A 上配置 Nginx(主入口) ```nginx # /etc/nginx/sites-available/example.com server { listen 80; server_name example.com www.example.com; # 重定向 HTTP 到 HTTPS(可选) return 301 https://$host$request_uri; } server { listen 443 ssl; server_name example.com www.example.com; # SSL 证书配置(可以用 Let's Encrypt) ssl_certificate /path/to/fullchain.pem; ssl_certificate_key /path/to/privkey.pem; # 缓存优化等... ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; # 【1】前端页面:根路径前端 location / { proxy_pass http://192.168.1.20:3000; # 假设前端运行在 Server B 的 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; proxy_http_version 1.1; } # 【2】后端 API:以 /api/ 开头的请求走后端 location /api/ { proxy_pass http://192.168.1.20:8080/; # 后端服务(Spring Boot/Express 等) 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; proxy_http_version 1.1; } # 【3】WebSocket 支持(如需) location /ws/ { proxy_pass http://192.168.1.20:8080/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } } ``` --- ### Server B 上的服务示例 #### ✅ 前端服务(如 Vue/React,运行在 `192.168.1.20:3000`) ```bash cd /var/www/myapp-frontend npm run serve --port 3000 ``` 该服务提供: - `GET /` → 返回 `index.html` - `GET /static/js/app.js` → 返回 JS 文件 #### ✅ 后端服务(如 Spring Boot 或 Express,运行在 `192.168.1.20:8080`) 提供 REST API: - `GET /api/users` - `POST /api/login` --- ## ✅ 实际访问流程图 ``` 用户浏览器 ↓ https://example.com Server A (Nginx) ├── / ------------------→ 转发 → 192.168.1.20:3000 └── /api/user ----------→ 转发 → 192.168.1.20:8080/api/user ``` ✅ 浏览器地址栏始终显示 `example.com`,不暴露任何内部 IP 或端口。 --- ## ✅ 更高级配置建议 ### 1. 使用 upstream 提高可维护性 ```nginx upstream frontend { server 192.168.1.20:3000 max_fails=3 fail_timeout=30s; } upstream backend { server 192.168.1.20:8080 max_fails=3 fail_timeout=30s; } server { ... location / { proxy_pass http://frontend; ... } location /api/ { proxy_pass http://backend; ... } } ``` 便于后续扩展为负载均衡。 --- ### 2. 静态资源缓存优化(如果前端构建产物放在 Server B) 如果你不想用 Node 服务跑前端,也可以让 Server B 直接用 Nginx 托管静态文件: #### Server B 的 Nginx(仅做内容源): ```nginx server { listen 3000; root /var/www/frontend-dist; location / { try_files $uri $uri/ /index.html; # SPA 支持 } } ``` 然后 Server A 仍通过 `proxy_pass` 访问它。 --- ### 3. CORS 不再需要! 因为前后端都通过同一个域名(`example.com`)访问,所以不存在跨域问题。 > ⚠️ 原本的“前端 localhost:3000 → 后端 server:8080”会产生 CORS,但现在全部由 Nginx 统一出口,彻底解决。 --- ## ✅ 安全与网络建议 | 项目 | 建议 | |------|------| | 内部通信加密 | 使用内网 VLAN 或 IPSec/TLS 加密流量 | | 防火墙 | Server B 只允许 Server A 的 IP 访问 3000/8080 端口 | | 认证 | 可在 Server A 添加 Basic Auth、JWT 校验等中间层 | | 日志 | 在 Server A 记录所有访问日志,集中审计 | --- ## ✅ 总结 > ✅ **可以在一台服务器上配置 Nginx,代理另一台服务器的前端后端服务**,这是一种标准的“反向代理 + 前后端分离”架构。 优势包括: - 统一入口,简化 DNS SSL 管理 - 隐藏真实服务器结构 - 消除跨域问题 - 易于扩展为集群或微服务网关 只要确保: 1. Server B 的服务能被 Server A 访问(网络通) 2. Nginx 配置正确使用 `proxy_pass` `proxy_set_header` 3. 后端能正确识别原始协议(HTTPS)、IP、Host 即可完美运行。 ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值