为你的项目配置 HTTPS
总体概念
我们现在要做的事情,其本质上只有 5 步:
- 域名解析到你的服务器
- 服务器开放 80 和 443 端口
- 申请一张证书
- Nginx 配置 443 + 证书
- 把 80 跳转到 443
这样以后用户访问:
http://your-domain.com → 自动跳到 https://your-domain.com
- Nginx 用证书和浏览器建立加密连接
- 前端页面通过 HTTPS 打开
/api 请求由 Nginx 转发到 Gin
我的建议
对于新手而言,往往可以这样处理:
- Nginx 负责 HTTPS
- 后端项目 继续跑 HTTP 内部端口,例如
127.0.0.1:8080
- Vue 前端走同域名
/api
- 不要让 后端项目 自己配证书
原因很简单:证书只维护在 Nginx,既可以只配置一处,也最容易排错。
前期准备
第 1 步:确认你的域名已经指向这台服务器
你要确认:
- 你的域名 A 记录已经解析到服务器公网 IP
- 以后访问的网站,就是这个域名,不是 IP
1、获取你的公网 IP:
在云服务器控制台 → 云服务器 ECS → 实例 → 点进你的服务器实例查看。
2、解析
接下来的操作,是需要你拥有一个自己的域名,并认证过。在域名服务控制台点击解析,添加记录即可。(作用:使这个域名指向你的公网 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 请求地址
前端有没有写死这种地址:
http:
或者:
http:
如果有,后面必须改。因为页面走 HTTPS 时,请求 HTTP API 会被浏览器拦截。
第 4 步:申请证书
一般你买个域名,就会直接送证书。进入证书管理页面下载即可。
具体落地方式
接下来,假设你已经拿到证书了。
你现在要做的是:
- 从证书服务商下载证书
- 上传到服务器
- 手动配置 Nginx 的 443
- 让 HTTP 跳转到 HTTPS
第 5 步:先把 Nginx 的 HTTP 站点跑通
先确保你现在这个配置能正常访问:
server {
listen 80;
server_name your-domain.com www.your-domain.com;
root /www/your-project/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
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;
}
}
说明:
root 指向 Vue/Vite 打包后的 dist
try_files ... /index.html 是给 Vue history 路由兜底
/api/ 反向代理到 Gin
这一步的目标不是 HTTPS,而是先确认:
- 域名解析正常
- 80 端口已放行
- Nginx 站点能正常打开
第 6 步:从证书服务商下载证书并上传到服务器
1、在证书管理页面下载证书
进入证书管理页,找到你的证书。下载时优先选择:Nginx。
然后可以解压成 PEM / KEY 格式。通常你最终会拿到两类文件:
- 证书文件:
.pem 或 .crt
- 私钥文件:
.key
2、上传到服务器
建议把证书放到类似目录:
/etc/nginx/ssl/
例如:
/etc/nginx/ssl/your-domain.com.pem
/etc/nginx/ssl/your-domain.com.key
如果目录不存在,可以先创建:
sudo mkdir -p /etc/nginx/ssl
然后把证书和私钥上传进去。
第 7 步:手动配置 Nginx 的 HTTPS
可以把 Nginx 配置改成这样:
server {
listen 80;
server_name your-domain.com www.your-domain.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name your-domain.com www.your-domain.com;
ssl_certificate /etc/nginx/ssl/your-domain.com.pem;
ssl_certificate_key /etc/nginx/ssl/your-domain.com.key;
root /www/your-project/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
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 https;
}
}
说明:
- 第一个
server 负责把 HTTP 自动跳转到 HTTPS
- 第二个
server 负责真正提供 HTTPS 服务
ssl_certificate 指向你的证书文件
ssl_certificate_key 指向你的私钥文件
第 8 步:检查配置并重载 Nginx
每次改完配置后,都先检查语法:
sudo nginx -t
如果输出类似:
syntax is ok
test is successful
再执行:
sudo systemctl reload nginx
如果你系统里没有 systemctl,也可能需要:
sudo service nginx reload
需要避免的坑
1、证书文件路径写错
ssl_certificate 和 ssl_certificate_key 指向的路径必须真实存在。
2、文件权限不对
Nginx 进程需要有权限读取证书和私钥。
3、443 端口没放行
即使 Nginx 配好了,如果云服务器安全组或系统防火墙没放 443,也无法访问 HTTPS。
4、域名没解析好
如果 your-domain.com 没正确解析到你的服务器公网 IP,HTTPS 也不会正常工作。
5、Vue history 路由没配 try_files
这样刷新页面时可能会返回 404。
回顾
第一轮
- 确认域名已经解析到服务器
- 确认 80 和 443 已放行
- 确认
http://your-domain.com 可以访问
- 确认证书已经从证书服务商下载下来
- 确认证书已经上传到服务器
第二轮
- 修改 Nginx 配置
- 配置
ssl_certificate 和 ssl_certificate_key
- 执行
sudo nginx -t
- 执行
sudo systemctl reload nginx
第三轮
- 浏览器测试
https://your-domain.com
- 检查前端
/api 请求
- 排查是否还有 Mixed Content