Shell / Bash大前端
Nginx 实战：前后端项目配置 HTTPS 指南
如何在 Nginx 上为前后端项目配置 HTTPS。主要步骤包括：域名解析至服务器公网 IP、开放 80 和 443 端口、申请并上传 SSL 证书、配置 Nginx 监听 443 并启用 SSL、设置 HTTP 自动跳转 HTTPS、以及反向代理后端 API。文中还列举了常见错误排查点，如证书路径、文件权限、端口放行及 Vue history 路由配置等，确保服务安全加密访问。
如何在 Nginx 上为前后端项目配置 HTTPS。主要步骤包括：域名解析至服务器公网 IP、开放 80 和 443 端口、申请并上传 SSL 证书、配置 Nginx 监听 443 并启用 SSL、设置 HTTP 自动跳转 HTTPS、以及反向代理后端 API。文中还列举了常见错误排查点，如证书路径、文件权限、端口放行及 Vue history 路由配置等，确保服务安全加密访问。
在开始之前，我先带大家建立一个心智模型。
从而理解，配置 https的整体流程大致长什么样子：
浏览器 → 域名 → Nginx(443) →
dist）Nginx 官方对 HTTPS 的最基本要求就是：在 server 块里用 listen 443 ssl;，再指定 ssl_certificate 和 ssl_certificate_key。
我们现在要做的事情，其本质上只有 5 步：
这样以后用户访问：
http://your-domain.com → 自动跳到 https://your-domain.com/api 请求由 Nginx 转发到 Gin对于新手而言，往往可以这样处理：
127.0.0.1:8080/api原因很简单：证书只维护在 Nginx，既可以只配置一处，也最容易排错。
你要确认：
在云服务商控制台 → 云服务器 ECS → 实例 → 点进你的服务器实例
接下来的操作，是需要你拥有一个自己的域名，并认证过。 在云服务商控制台 → 域名服务 → 点击解析 然后点击添加记录即可。（作用：使这个域名指向你的公网 IP）
提醒：
因为 HTTPS 证书是给域名用的，不是给裸 IP 用的。
如果你用浏览器直接访问 https://你的公网 IP，大概率会证书不匹配。
你要确保：
80/tcp443/tcp你现在先自己核对这几个点：
Vue/Vite 是否已经打包过，例如：
npm run build
然后 Nginx 是否已经在提供 dist/ 目录。
Gin 是否监听一个端口，比如：
r.Run("127.0.0.1:8080")
前端有没有写死这种地址：
http://your-domain.com/api
或者：
http://your-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; } }
说明：
root 指向 Vue/Vite 打包后的 disttry_files ... /index.html 是给 Vue history 路由兜底/api/ 反向代理到 Gin这一步的目标不是 HTTPS，而是先确认：
进入证书管理页，找到你的证书
下载时优先选择：Nginx
通常你最终会拿到两类文件：
.pem 或 .crt.key建议把证书放到类似目录：
/etc/nginx/ssl/
例如：
/etc/nginx/ssl/your-domain.pem /etc/nginx/ssl/your-domain.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.pem;
ssl_certificate_key /etc/nginx/ssl/your-domain.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 自动跳转到 HTTPSserver 负责真正提供 HTTPS 服务ssl_certificate 指向你的证书文件ssl_certificate_key 指向你的私钥文件每次改完配置后，都先检查语法：
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 也不会正常工作。
try_files这样刷新页面时可能会返回 404。
http://your-domain.com 可以访问ssl_certificate 和 ssl_certificate_keysudo nginx -tsudo systemctl reload nginxhttps://your-domain.com/api 请求
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 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