AI建站生成的页面怎么接入CDN和HTTPS证书？

照着做完，你能让 AI 生成的那套页面挂上自己的域名、走 CDN 加速，并且浏览器地址栏出现小锁。

第一步：先确认你的 AI 建站产出属于哪种形态

这一步决定后面走哪条路，结果是你明确自己该改 DNS 还是改 Nginx 配置。常见的三种：

1. 纯静态导出：AI 工具（如 v0、Claude Artifacts、Bolt.new）给你一个压缩包或一堆 .html/.css/.js，需要你自己找地方放。→ 走第二、三、四步。
2. 平台托管项目：代码已经推在 Vercel、Netlify、Cloudflare Pages 上，平台给了你一个 xxx.vercel.app 之类的临时域名。→ 走第五步。
3. 带后端：有 Node/Python 服务在跑，页面是服务端渲染的。→ 也走第二到四步，但缓存策略要保守。

注意：先确认站点里没有硬编码 localhost:3000 这类地址，否则上线后接口全 404。在项目目录执行 grep -rn "localhost" . --include="*.html" --include="*.js" 排查一遍。

第二步：把域名解析托管到 Cloudflare

这一步是把域名的 DNS 交给 CDN 厂商，做完后你的域名解析记录在 Cloudflare 后台统一管理，才能开启代理加速。免费版就够用。

1. 登录 dash.cloudflare.com，点右上角 Add a site（添加站点），输入你的域名，选 Free 套餐。
2. Cloudflare 会给你两个 NS 地址，形如 ada.ns.cloudflare.com。回到你买域名的注册商后台（阿里云万网、腾讯云 DNSPod、Namecheap 都行），把域名的 DNS 服务器改成这两个。
3. 等待生效，通常 10 分钟到 24 小时。在 Cloudflare 的 Overview 页面看到 Active 就算成功。
4. 进 DNS → Records，添加记录：类型 A，名称 @，内容填你源站服务器 IP；再加一条 CNAME，名称 www，内容 @（或你的主域名）。代理状态必须是橙色的云朵（Proxied），灰色云朵（DNS only）不经过 CDN。

注意：橙云状态下，Cloudflare 对外暴露的是它自己的 IP，你源站的真实 IP 被隐藏了，这是顺带的好处。

第三步：给源站签一张源服务器证书，加密模式调到"完全(严格)"

这一步解决"CDN 到源站"这段链路的加密，做完后 Cloudflare 和你的服务器之间也是 HTTPS。

1. Cloudflare 后台进 SSL/TLS → Overview，把加密模式从默认的 Flexible（灵活） 改成 Full (Strict)（完全-严格）。
2. 进 SSL/TLS → Origin Server（源服务器），点 Create Certificate，保持默认（RSA 2048、有效期 15 年、包含根域和 *. 通配符），点创建。
3. 复制生成的 Origin Certificate 和 Private Key 两段文本，在服务器上存成文件：

sudo mkdir -p /etc/nginx/ssl
sudo nano /etc/nginx/ssl/example.com.pem   # 粘贴证书
sudo nano /etc/nginx/ssl/example.com.key   # 粘贴私钥
sudo chmod 600 /etc/nginx/ssl/example.com.key

注意：千万不要用 Flexible 模式。它意味着 Cloudflare 回源走的是 HTTP，而你的 Nginx 又强制跳 HTTPS，浏览器会报 ERR_TOO_MANY_REDIRECTS 无限重定向。

第四步：改 Nginx 配置，监听 443 并强制跳转

这一步让源站正确响应 HTTPS，做完后直接访问 http:// 会自动跳到 https://。

打开站点配置（Ubuntu/Debian 在 /etc/nginx/sites-available/，CentOS 在 /etc/nginx/conf.d/），写入：

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    http2 on;                       # nginx 1.25.1+ 的写法，旧版写 listen 443 ssl http2;
    server_name example.com www.example.com;

    ssl_certificate     /etc/nginx/ssl/example.com.pem;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;
    ssl_protocols       TLSv1.2 TLSv1.3;

    root  /var/www/ai-site;         # 你的 AI 页面所在目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;   # 单页应用刷新不 404 的关键
    }
}

保存后执行 sudo nginx -t 检查语法，再 sudo systemctl reload nginx。

注意：源站的 443 端口没必要对全网开放。如果你的服务器有防火墙（ufw 或安全组），可以只放行 Cloudflare 的 IP 段，或干脆只放行 80/443 给 Cloudflare 回源。

第五步：站点在 Vercel / Netlify 上怎么办

这一步把平台的临时域名换成你自己的域名。这两个平台自带 HTTPS，证书自动签发自动续期，你不用碰证书文件。

• Vercel：项目页 → Settings → Domains → 输入域名 → Add。它会告诉你加什么 DNS 记录：一般根域加 A 记录指向 76.76.21.21，www 加 CNAME 指向 cname.vercel-dns.com。
• Netlify：Site configuration → Domain management → Domains → Add a domain。按提示加 CNAME 指向 你的站点名.netlify.app。

如果域名已经托管在 Cloudflare，就把这些记录加在 Cloudflare 的 DNS 页面。此时建议把云朵点成灰色（DNS only），让 Vercel/Netlify 自己处理证书，避免两个 CDN 叠加导致证书校验反复失败。

第六步：处理混合内容（Mixed Content）

这一步解决"页面能打开但锁是灰的、控制台一片红"的问题。AI 生成的 HTML 特别喜欢写死 http:// 的图片、字体、CDN 链接。

按 F12 打开开发者工具 → Console，搜索 Mixed Content 关键字，把报错里出现的 http:// 链接逐个改成 https://。批量替换最快：

grep -rl "http://" ./dist | xargs sed -i 's|http://|https://|g'

改完重新部署。同时可以顺手开 HSTS：Cloudflare 后台 SSL/TLS → Edge Certificates（边缘证书）→ HTTP Strict Transport Security (HSTS)，把 Enable HSTS 打开，Max Age 先设 6 months。

注意：HSTS 一旦开启，浏览器在有效期内会强制走 HTTPS，如果哪天证书过期了用户连"继续访问"的按钮都点不了。第一次开建议把 Max Age 设短一点。

第七步：验证结果

这一步确认整条链路都通。三个命令跑一遍：

dig www.example.com +short

curl -I https://www.example.com
# 应看到 HTTP/2 200，且响应头里有 server: cloudflare、cf-cache-status

openssl s_client -connect www.example.com:443 -servername www.example.com 2>/dev/null | openssl x509 -noout -issuer -dates
# 应看到 issuer 是 Google Trust Services 或 Let's Encrypt，日期没过期

再打开 www.ssllabs.com/ssltest/ 输入域名跑一次，拿到 A 或 A+ 就说明证书链、协议版本都配好了。

最后去 Cloudflare 的 Caching → Configuration，确认开发模式（Development Mode）是关闭的——调试时开过容易忘记关，会导致缓存全失效。

小结

• 三种形态对应三条路：静态导出走 Nginx 自建，Vercel/Netlify 走平台自动 HTTPS，带后端的两者都要配。
• DNS 在 Cloudflare，代理状态必须橙云才走 CDN。
• 加密模式选 Full (Strict)，源站放一张 15 年期的 Origin Certificate，别用 Flexible。
• Nginx 里 return 301 https://... 做强制跳转，try_files $uri $uri/ /index.html 防刷新 404。
• 平台托管（Vercel/Netlify）自带证书，云朵切灰避免双重 CDN。
• 锁是灰的先查 Console 里的 Mixed Content，批量把 http:// 换成 https://。
• 验证三板斧：dig 看 IP、curl -I 看响应头、SSL Labs 看评级。