nextjs项目添加静态资源cdn加速

背景

年中的时候腾讯云和阿里云在疯狂推销自家的边缘加速,我当初在国际站部署过一次全站加速,最后感觉国内访问的速度还没直连的快因此放弃了(因为没有备案),众所周知在国内运营网站时,未备案域名无法使用国内 CDN 进行全站加速。但如果你有一个已备案的子域名，可以将静态资源"代理"到该子域名，借助 EdgeOne 实现加速。

核心思路：

• 主站点 eavan.dev（未备案）→ 正常部署到国外vps，不走国内 CDN
• 子域名 static.eavan.top（已备案）→ 接入 EdgeOne，加速静态资源
• S3 存储桶 → 通过 EdgeOne 回源加速图片, 我单独配置了一个域名,其实也可以用源站组的方式共用一个域名

架构规划图

一、前期检查清单

1.1 域名与备案状态确认

• 确认子域名已完成 ICP 备案
• 确认 DNS 解析权限（推荐使用 DNSPod 或 Cloudflare）

1.2 资源盘点

1.3 Next.js 配置检查

确认 next.config.js 支持自定义 assetPrefix

然后还要配置一下next/image组件的安全规则

二、EdgeOne 配置步骤

我选择的直接就是选择, 因为国际站实名需要根据地区去实名认证才能用国内节点, 反正就很麻烦, 我注册的地区是新加坡, 然后认证就需要新加坡的护照去实名认证

2.1 添加站点

DNSEdgeOne控制台用户DNSEdgeOne控制台用户添加站点 [example.com](http://example.com)返回 NS 记录或 CNAME配置 DNS 解析验证通过站点生效

操作路径： EdgeOne 控制台 → 站点管理 → 添加站点

接入方式选择：

• NS 接入：将整个域名 DNS 托管给 EdgeOne（推荐，功能最全）
• CNAME 接入：仅针对特定子域名，保留原 DNS 服务商

2.2 配置加速子域名

静态资源加速（CSS/JS）

S3 图片加速

2.3 缓存规则配置

操作路径： EdgeOne 控制台 → 站点加速 → 缓存配置

EdgeOne 提供三种缓存配置方式：

• 全局设置 (Global Settings)：站点级别配置，最简单
• 规则引擎 (Rule Engine)：基于条件的细粒度配置（推荐）
• 边缘函数 (Edge Functions)：代码级别控制，最灵活

2.3.1 节点缓存 TTL (Node Cache TTL)

节点缓存是指资源在 EdgeOne 边缘节点上的缓存时间。

推荐缓存规则（规则引擎配置）：

2.3.2 浏览器缓存 TTL (Browser Cache TTL)

控制客户端浏览器的缓存行为，通过修改响应头 Cache-Control: max-age 实现。

2.3.3 自定义缓存键 (Custom Cache Key)

缓存键决定了哪些请求会命中同一份缓存。默认为 URL 全路径，可根据业务需求调整。

对于 Next.js 静态资源 /_next/static/*，建议开启「忽略查询字符串」，因为文件名本身已包含 hash。

2.3.4 离线缓存 (Offline Caching)

当源站不可用时，继续使用边缘节点上的过期缓存，保证业务可用性。

2.3.5 缓存刷新 (Cache Purge)

部署新版本后需要清除旧缓存。

API 方式刷新缓存示例

2.3.6 智能压缩 (Smart Compression)

自动压缩响应内容，减少传输体积。

三、Next.js 代码改造

3.1 自定义图片 Loader

伪代码如下, 根据自己项目求改,别忘记环境变量和前面的nextjs.config的配置内容

四、排查与验证

4.1 验证清单

• 访问 https://cdn.example.com/_next/static/chunks/main.js 返回正常
• 检查响应头包含 Cache: HIT（表示命中缓存）
• 图片 https://img.example.com/path/to/image.jpg 加载正常
• 主站 HTML 中静态资源 URL 已替换为 CDN 域名

4.2 常见问题排查

问题 1：CORS 跨域错误

解决方案： 在 EdgeOne 或源站配置 CORS 响应头：

Access-Control-l-Allow-Origin: 你的域名或者直接*
Access-Control-Allow-Methods: GET, OPTIONS

问题 2：资源 404