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

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

总体概念

配置 HTTPS 的本质流程包含以下 5 步：

1. 域名解析到你的服务器
2. 服务器开放 80 和 443 端口
3. 申请一张证书
4. Nginx 配置 443 + 证书
5. 把 80 跳转到 443

用户访问流程如下：

• http://your-domain.com → 自动跳转至 https://your-domain.com
• Nginx 使用证书与浏览器建立加密连接
• 前端页面通过 HTTPS 打开
• /api 请求由 Nginx 转发到后端服务

Nginx 官方对 HTTPS 的最基本要求是：在 server 块里使用 listen 443 ssl;，并指定 ssl_certificate 和 ssl_certificate_key。

我的建议

对于新手而言，推荐采用以下架构：

• Nginx 负责 HTTPS
• 后端项目继续跑 HTTP 内部端口，例如 127.0.0.1:8080
• Vue 前端走同域名 /api
• 不要让后端项目自己配证书

原因很简单：证书只维护在 Nginx，既可以只配置一处，也最容易排错。

前期准备

第 1 步：确认你的域名已经指向这台服务器

你需要确认：

• 你的域名 A 记录已经解析到服务器公网 IP
• 以后访问的网站是这个域名，不是裸 IP

1、获取你的公网 IP

在云平台控制台 → 云服务器 ECS → 实例 → 查看你的服务器实例信息。

2、解析

你需要拥有一个自己的域名。在云平台控制台 → 域名服务 → 点击解析，添加一条 A 记录，将域名指向你的公网 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://your-domain.com/api

或者：

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