Nginx 配置 HTTPS 实战：前后端集成方案

或者：

http://your-ip:8080

如果有，后面必须改。因为页面走 HTTPS 时，请求 HTTP API 会被浏览器拦截。

第 4 步：申请证书

一般购买域名时会赠送证书。进入证书管理中心下载证书即可。

具体落地方式

假设你已经拿到证书了，接下来要做的是：

1. 从证书管理页面下载证书
2. 上传到服务器
3. 手动配置 Nginx 的 443
4. 让 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 或 .crt
• 私钥文件：.key

2、上传到服务器

建议把证书放到类似目录：

/etc/nginx/ssl/

例如：

/etc/nginx/ssl/your-domain.pem
/etc/nginx/ssl/your-domain.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.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 自动跳转到 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. 域名没解析好 如果域名没正确解析到你的服务器公网 IP，HTTPS 也不会正常工作。

5. Vue history 路由没配 try_files 这样刷新页面时可能会返回 404。

实施步骤总结

1. 确认域名已经解析到服务器
2. 确认 80 和 443 已放行
3. 确认 http://your-domain.com 可以访问
4. 确认证书已经从证书中心下载下来
5. 确认证书已经上传到服务器
6. 修改 Nginx 配置
7. 配置 ssl_certificate 和 ssl_certificate_key
8. 执行 sudo nginx -t
9. 执行 sudo systemctl reload nginx
10. 浏览器测试 https://your-domain.com
11. 检查前端 /api 请求
12. 排查是否还有 Mixed Content