企业官网建设流程全解析

💡前言：
很多开发者在第一次接入 CDN 时，往往认为“只要添加个域名”就万事大吉了。
但实际上，回源策略、缓存规则、HTTPS证书等配置细节，直接决定了你的网站是“飞起来”还是“挂掉”。
本文结合真实踩坑经验（如 HSTS 访问错误、Nginx 反代 404 等），总结了一份 CDN 配置清单。

1. 基础配置：回源 (Origin Pull) 🎯

回源是 CDN 节点没有数据时，找你的服务器拿数据的过程。这里有两个核心概念最容易搞混：

1.1 回源 Host (非常重要！)

• 配置项：回源 Host (Host Header)
• 含义：CDN 节点在请求你的源站服务器时，HTTP 请求头里Host字段填什么。
• 避坑指南：
  • ✅通常填加速域名：比如你的网站是www.example.com，回源 Host 就填www.example.com。这样你的 Nginx 才能根据server_name找到正确的站点配置。
  • ❌不要填源站 IP：除非你的 Nginx 只有一个默认站点且不关心域名，否则填 IP 会导致 Nginx 走到default_server或者直接拒绝访问。

1.2 源站地址

• IP vs 域名：
  • IP：速度快，减少一次 DNS 解析。适合源站是固定 IP 的云服务器。
  • 域名：适合源站是 OSS、Load Balancer 或 IP 可能会变的场景。

2. HTTPS 与证书配置 🔒

这是最容易出现“访问受限”或“不安全提示”的地方。

2.1 证书传给谁？

• 原则：CDN 替你面对用户，所以CDN 必须持有你的域名证书。
• 操作：在 CDN 控制台上传www.example.com的 SSL 证书（公钥+私钥）。
• 误区：不需要上传 CDN 厂商分配给你的那个.cdn.dnsv1.com的证书，用户看的是你的域名。

2.2 强制 HTTPS 与 HSTS

• 强制 HTTPS：✅推荐开启。将 HTTP 请求 301 重定向到 HTTPS。
• HSTS (HTTP Strict Transport Security)：⚠️慎用！
  • 后果：一旦开启，浏览器会记住“这个网站只能用 HTTPS”。如果你证书过期了或者配置回退到 HTTP，用户将彻底无法访问（且无法通过“继续访问”跳过警告）。
  • 建议：除非你对证书续期自动化非常有信心，否则初期不要开启 HSTS，或者设置较短的max-age。

3. 缓存策略 (Caching) 🚀

缓存配置决定了 CDN 的性价比和用户体验。对于 Vue/React 等 SPA 项目，策略尤为关键。

3.1 黄金法则：动静分离

• HTML 文件(index.html)：永不缓存(no-cache) 或短缓存 (e.g., 1分钟)。
  • 原因：前端发版后，入口 HTML 变了才能引入新的 CSS/JS。如果 HTML 被缓存死，用户永远看不到新版。
• 静态资源(.js,.css,.png)：长缓存(e.g., 30天或1年)。
  • 前提：你的打包工具（Webpack/Vite）开启了Hash 文件名(如app.7ab53.js)。文件名变了就是新文件，旧文件缓存多久都没关系。

3.2 忽略参数 (Ignore Query String)

• 场景：访问xxx.jpg?v=1和xxx.jpg?v=2。
• 建议：开启“忽略参数”。
  • 除非你的图片是用参数来控制裁剪/缩放的，否则对于静态文件，参数不同通常内容相同。开启后能极大提高缓存命中率。

4. 刷新与预热 (Refresh & Prefetch) 🔄

当你更新了网站内容，CDN 节点上可能还是旧的。

• URL 刷新：精准清除单个文件。适合更新了某张图片或修正了某个 JS bug。
• 目录刷新：清除整个路径。适合大版本发布。
  • 注意：目录刷新比较慢，且对源站压力大（因为所有文件都要重新回源）。
• 预热：主动让 CDN 节点去拉取你的文件。适合大促活动前的热门商品图。

5. 安全防护 🛡️

5.1 防盗链 (Referer 防盗链)

• 作用：防止别人的网站直接引用你的图片，偷你的流量。
• 配置：设置白名单（你的域名）。
• 避坑：是否允许空 Referer？
  • ✅允许：如果你希望用户能直接在浏览器地址栏打开图片，或者在微信/QQ 这种不带 Referer 的 App 里看图。
  • ❌拒绝：安全性最高，但可能误伤直接访问的用户。

5.2 IP 频率限制

• 如果发现流量异常飙升，可以配置单 IP 每秒请求数限制 (QPS)，防止被 CC 攻击刷爆账单。

6. 特殊场景：反向代理与子路径 📂

场景描述：
假设你有一个主网站www.example.com，现在开发了一个独立的子系统（如“营销活动页”或“管理后台”），希望挂载到主域名的/sub-app/路径下访问，而不是申请新的子域名。

1. Nginx 配置 (主站服务器)：

   # 在 www.example.com 的 server 块中添加： location /sub-app/ { # 将请求转发到本机 8080 端口运行的子系统 proxy_pass http://127.0.0.1:8080/sub-app/; # 传递真实域名，防止后端识别错误 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }

2. CDN 陷阱：
   • CDN 可能会缓存 404 页面！如果你刚配好 Nginx 前访问过一次是 404，CDN 记住了。配好后怎么访问还是 404？
   • 解法：去 CDN 控制台刷新该 URL。
3. 资源路径 (关键)：
   • 子系统的 HTML 里引用的 JS/CSS 必须是相对路径(./js/app.js) 或带前缀的绝对路径(/sub-app/js/app.js)。
   • 如果写成/js/app.js，CDN 回源时会请求www.example.com/js/app.js（主站目录），导致 404。