同一台服务器同时部署前后端 + HTTPS
完全可以，一台服务器可以同时跑前端、后端，全部走 HTTPS，常见两种架构：
前端：Vue/React 打包后的静态文件；后端：SpringBoot、Node、Python 等服务
核心思路：用 Nginx（反向代理） 做统一入口，Nginx 处理 SSL/HTTPS 证书，对外只暴露 443 (https)、80 (http) 端口。
- 80 端口强制跳转 HTTPS
- 443 接收 HTTPS 请求，根据 URL 路径区分：
/、/index.html→ 转发给前端静态资源/api/*→ 反向代理转发给后端程序（后端内部跑本地端口，例如 8080、3000，不对外暴露）
架构简图
用户浏览器 → HTTPS 443 → Nginx
├─ 访问 / → 返回前端静态页面（dist）
└─ 访问 /api/xxx → 代理转发到后端服务 127.0.0.1:8080
后端服务监听
127.0.0.1:8080，只允许本机 Nginx 访问，公网访问不到后端端口，更安全。
Nginx 关键配置示例
server {
listen 80;
server_name yourdomain.com;
# http强制跳转https
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name yourdomain.com;
# SSL证书配置（申请的域名证书crt/key）
ssl_certificate /xxx/fullchain.crt;
ssl_certificate_key /xxx/private.key;
# 前端静态资源，dist打包目录
root /data/web/dist;
index index.html;
# 前端路由history模式必须配置
location / {
try_files $uri $uri/ /index.html;
}
# 所有/api开头请求转发后端
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X‑Real‑IP $remote_addr;
}
}
两种部署模式对比
模式 1：前后端同域名、不同路径（上面示例，推荐）
- 访问：
https://yourdomain.com前端页面 - 接口：
https://yourdomain.com/api/user - ✅ 无跨域问题，证书只需要 1 份，最简单，一台服务器搞定。
模式 2：不同子域名
- 前端：
https://www.yourdomain.com - 后端接口：
https://api.yourdomain.com
Nginx 写两个server{}块，共用一份泛域名证书；会有跨域，后端需要配置 CORS。
重要注意点
- HTTPS 证书是绑定域名的，服务器本身不需要证书，证书配置在 Nginx；后端服务不需要开启 HTTPS，后端跑 http 即可，Nginx 和后端内网通信。
❌ 不要后端自己也配置 HTTPS，会双层 SSL，没必要。
- 防火墙：服务器安全组只开放
80、443，后端端口（8080/3000）不要放行公网。 - 前端 history 路由模式，
try_files $uri $uri/ /index.html;必须加，否则刷新页面 404。 - 跨域：模式 1 路径区分，浏览器不存在跨域；子域名模式需要后端开启 CORS。
- 资源：一台服务器性能足够就可以，前端静态文件消耗资源极低，压力主要来自后端程序。
补充：如果不用 Nginx 行不行？
可以，但不推荐：后端程序（SpringBoot/Node）同时托管静态前端资源 + 内置 SSL 证书。
缺点：
- 后端程序挂掉，前端页面也打不开；
- SSL 配置麻烦，性能不如 Nginx；
- 静态文件由后端程序处理，消耗后端算力。
生产环境标准做法：Nginx 统一承接 HTTPS，分离静态前端、反向代理后端接口。
