Nginx 配置 HTTPS 实战:前后端集成方案
总体概念
配置 HTTPS 的本质流程包含以下 5 步:
- 域名解析到你的服务器
- 服务器开放 80 和 443 端口
- 申请一张证书
- Nginx 配置 443 + 证书
- 把 80 跳转到 443
用户访问流程如下:
http://your-domain.com→ 自动跳转至https://your-domain.com- Nginx 使用证书与浏览器建立加密连接
- 前端页面通过 HTTPS 打开
/api请求由 Nginx 转发到后端服务
Nginx 官方对 HTTPS 的最基本要求是:在 server 块里使用 listen 443 ssl;,并指定 ssl_certificate 和 ssl_certificate_key。
我的建议
对于新手而言,推荐采用以下架构:
- Nginx 负责 HTTPS
- 后端项目继续跑 HTTP 内部端口,例如
127.0.0.1:8080 - Vue 前端走同域名
/api - 不要让后端项目自己配证书
原因很简单:证书只维护在 Nginx,既可以只配置一处,也最容易排错。
前期准备
第 1 步:确认你的域名已经指向这台服务器
你需要确认:
- 你的域名 A 记录已经解析到服务器公网 IP
- 以后访问的网站是这个域名,不是裸 IP
1、获取你的公网 IP
在云平台控制台 → 云服务器 ECS → 实例 → 查看你的服务器实例信息。
2、解析
你需要拥有一个自己的域名。在云平台控制台 → 域名服务 → 点击解析,添加一条 A 记录,将域名指向你的公网 IP。
提醒:HTTPS 证书是给域名用的,不是给裸 IP 用的。如果你用浏览器直接访问 https://你的公网 IP,大概率会提示证书不匹配。
第 2 步:开放 80 和 443 端口
你要确保:
- 服务器安全组放行
80/tcp - 服务器安全组放行
443/tcp - 服务器本机防火墙没有拦截
第 3 步:先确认当前 Nginx 和后端项目是怎么跑的
核对以下几点:
前端
Vue/Vite 是否已经打包过,例如:
npm run build
然后 Nginx 是否已经在提供 dist/ 目录。
后端
Gin 是否监听一个端口,比如:
r.Run("127.0.0.1:8080")
API 请求地址
前端有没有写死这种地址:
:


