Shell / Bash大前端
Nginx 配置 HTTPS 实战教程：前后端部署指南
详细讲解了在 Nginx 服务器上配置 HTTPS 的完整流程。涵盖域名解析、端口开放、SSL 证书申请与上传、Nginx 配置文件编写（含 HTTP 跳转 HTTPS）、前后端反向代理设置以及常见错误排查。旨在帮助开发者实现前后端分离架构下的安全通信，解决 Mixed Content 等问题。
详细讲解了在 Nginx 服务器上配置 HTTPS 的完整流程。涵盖域名解析、端口开放、SSL 证书申请与上传、Nginx 配置文件编写（含 HTTP 跳转 HTTPS）、前后端反向代理设置以及常见错误排查。旨在帮助开发者实现前后端分离架构下的安全通信，解决 Mixed Content 等问题。
在开始之前，我先带大家建立一个心智模型。从而理解，配置 https 的整体流程大致长什么样子：
浏览器 → 域名 → Nginx(443) →
Nginx 官方对 HTTPS 的最基本要求就是：在 server 块里用 listen 443 ssl;，再指定 ssl_certificate 和 ssl_certificate_key。
我们现在要做的事情，其本质上只有 5 步：
这样以后用户访问：
对于新手而言，往往可以这样处理：
原因很简单：证书只维护在 Nginx，既可以只配置一处，也最容易排错。
你要确认：
在云控制台 → 云服务器 ECS → 实例 → 点进你的服务器实例
[图片]
接下来的操作，是需要你拥有一个自己的域名，并认证过。 在云控制台 → 域名服务 → 点击解析 大概会出现这样一个界面：
[图片]
然后点击添加记录即可。（作用：使这个域名指向你的公网 IP）
提醒： 因为 HTTPS 证书是给域名用的，不是给裸 IP 用的。 如果你用浏览器直接访问 https://你的公网 IP，大概率会证书不匹配。
你要确保：
你现在先自己核对这几个点：
Vue/Vite 是否已经打包过，例如：
npm run build
然后 Nginx 是否已经在提供 dist/ 目录。
Gin 是否监听一个端口，比如：
r.Run("127.0.0.1:8080")
前端有没有写死这种地址：
http://你的域名/api
或者：
http://你的 IP:8080
如果有，后面必须改。 因为页面走 HTTPS 时，请求 HTTP API 会被浏览器拦截。
一般你买个域名，就会直接送证书。
接下来，假设你已经拿到证书了。
你现在要做的是：
先确保你现在这个配置能正常访问：
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;
}
}
说明：
这一步的目标不是 HTTPS，而是先确认：
进入证书管理页，找到你的证书
下载时优先选择：Nginx
[图片]
然后可以解压成 PEM / KEY 格式：
[图片]
通常你最终会拿到两类文件：
建议把证书放到类似目录：
/etc/nginx/ssl/
例如：
/etc/nginx/ssl/your-domain.com.pem
/etc/nginx/ssl/your-domain.com.key
如果目录不存在，可以先创建：
sudo mkdir -p /etc/nginx/ssl
然后把证书和私钥上传进去。
可以把 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;
}
}
说明：
每次改完配置后，都先检查语法：
sudo nginx -t
如果输出类似：
syntax is ok
test is successful
再执行：
sudo systemctl reload nginx
如果你系统里没有 systemctl，也可能需要：
sudo service nginx reload
ssl_certificate 和 ssl_certificate_key 指向的路径必须真实存在。
Nginx 进程需要有权限读取证书和私钥。
即使 Nginx 配好了，如果云安全组或系统防火墙没放 443，也无法访问 HTTPS。
如果 your-domain.com 没正确解析到你的服务器公网 IP，HTTPS 也不会正常工作。
这样刷新页面时可能会返回 404。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online