本博客是一篇记录性质的实操文章。 所以在本文章中你既能收获"为什么"，也会收获"怎么做"。
为你的项目配置配 HTTPS
-
- 总体概念
- 我的建议
- 前期准备：
-
- 第 1 步：确认你的域名已经指向这台服务器
-
- 1、获取你的公网IP：
- 2、解析
- 第 2 步：开放 80 和 443 端口
- 第 3 步：先确认当前 Nginx 和 后端项目 是怎么跑的
-
- 前端
- 后端
- API 请求地址
- 第 4 步：申请证书
- 具体落地方式
-
- 第 5 步：先把 Nginx 的 HTTP 站点跑通
- 第 6 步：从火山引擎下载证书并上传到服务器
-
- 1. 在火山引擎证书中心下载证书
- 2. 上传到服务器
- 第 7 步：手动配置 Nginx 的 HTTPS
- 第 8 步：检查配置并重载 Nginx
- 需要避免的坑
-
- 1. 证书文件路径写错
- 2. 文件权限不对
- 3. 443 端口没放行
- 4. 域名没解析好
- 5. Vue history 路由没配 `try_files`
- 回顾
-
- 第一轮
- 第二轮
- 第三轮
在开始之前，我先带大家建立一个心智模型。
从而理解，
配置https的整体流程大致长什么样子：
浏览器 → 域名 → Nginx(443) →
- 前端静态文件（Vue/Vite 打包后的 dist）
- 后端 API（反向代理到 Go/Gin）
Nginx 官方对 HTTPS 的最基本要求就是：在 server 块里用 listen 443 ssl;，再指定 ssl_certificate 和 ssl_certificate_key。([nginx.org][1])
总体概念
我们现在要做的事情，其本质上只有 5 步：
这样以后用户访问：
- http://你的域名 → 自动跳到 https://你的域名
- 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://你的域名/api
或者：
http://你的IP:8080
如果有，后面必须改。 因为页面走 HTTPS 时，请求 HTTP API 会被浏览器拦截。
第 4 步：申请证书
如果你用的也是火山云（申请免费证书）如果你是其他服务器的，这个仍然有借鉴价值。 （一般你买个域名，就会直接送证书）
具体落地方式
接下来，假设你已经拿到证书了。
你现在要做的是：
第 5 步：先把 Nginx 的 HTTP 站点跑通
先确保你现在这个配置能正常访问：
http://metaassist.cn
http://www.metaassist.cn
一个典型的 HTTP 配置长这样：
server {
listen 80;
server_name metaassist.cn www.metaassist.cn;
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/metaassist.cn.pem
/etc/nginx/ssl/metaassist.cn.key
如果目录不存在，可以先创建：
sudo mkdir -p /etc/nginx/ssl
然后把证书和私钥上传进去。
第 7 步：手动配置 Nginx 的 HTTPS
可以把 Nginx 配置改成这样：
server {
listen 80;
server_name metaassist.cn www.metaassist.cn;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name metaassist.cn www.metaassist.cn;
ssl_certificate /etc/nginx/ssl/metaassist.cn.pem;
ssl_certificate_key /etc/nginx/ssl/metaassist.cn.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. 域名没解析好
如果 metaassist.cn 没正确解析到你的服务器公网 IP，HTTPS 也不会正常工作。
5. Vue history 路由没配 try_files
这样刷新页面时可能会返回 404。
回顾
第一轮
第二轮
第三轮
记录：
/opt/personal_assistant/certs/metaassist.cn.pem
/opt/personal_assistant/certs/metaassist.cn.key
