# CDN加速静态资源配置指南
## 概述
本文档详细说明如何为novalon.cn配置腾讯云CDN加速静态资源，提升网站加载速度和用户体验。
## 前置条件
- 腾讯云账号
- 已备案域名: novalon.cn
- 已部署的Next.js应用
- 腾讯云COS存储桶
## 方案架构
```
用户请求
↓
cdn.novalon.cn (CDN加速域名)
↓
腾讯云CDN节点 (全国边缘节点)
↓
COS存储桶 (源站)
↓
静态资源 (JS/CSS/图片/字体)
```
## 实施步骤
### 步骤1: 创建COS存储桶
1. 登录腾讯云控制台: https://console.cloud.tencent.com
2. 进入对象存储COS服务
3. 创建存储桶:
- 名称: `novalon-cdn-[APPID]` (APPID在账号信息中查看)
- 地域: 成都 (ap-chengdu) - 与服务器同地域
- 访问权限: 公有读、私有写
- 版本控制: 不启用
4. 记录存储桶信息:
- 存储桶名称: `novalon-cdn-[APPID]`
- 地域: `ap-chengdu`
- 访问域名: `novalon-cdn-[APPID].cos.ap-chengdu.myqcloud.com`
### 步骤2: 配置CDN加速域名
1. 进入CDN控制台: https://console.cloud.tencent.com/cdn
2. 点击"域名管理" > "添加域名"
3. 配置域名信息:
- 加速域名: `cdn.novalon.cn`
- 业务类型: CDN网页小文件
- 加速区域: 中国大陆
- 源站类型: COS源
- 源站地址: `novalon-cdn-[APPID].cos.ap-chengdu.myqcloud.com`
- 回源协议: HTTPS
- 回源Host: `novalon-cdn-[APPID].cos.ap-chengdu.myqcloud.com`
4. 点击"提交"，等待审核通过
### 步骤3: 配置DNS解析
1. 进入DNS解析控制台 (新网)
2. 为`cdn.novalon.cn`添加CNAME记录:
- 记录类型: CNAME
- 主机记录: cdn
- 记录值: `cdn.novalon.cn.cdn.dnsv1.com` (腾讯云CDN提供的CNAME地址)
- TTL: 600
3. 验证DNS解析:
```bash
nslookup cdn.novalon.cn
```
### 步骤4: 配置HTTPS证书
1. 在CDN域名管理页面，点击域名名称进入详情页
2. 选择"高级配置" > "HTTPS配置"
3. 上传SSL证书:
- 证书来源: 自有证书
- 证书内容: 复制`novalon.cn`的SSL证书
- 私钥内容: 复制私钥
4. 开启HTTP2.0
5. 开启强制跳转HTTPS
### 步骤5: 配置缓存规则
在CDN域名详情页 > "缓存配置" > "节点缓存过期配置":
1. 添加缓存规则:
- 类型: 目录
- 内容: `/_next/static/`
- 过期时间: 365天
- 权重: 90
2. 添加文件类型规则:
- 类型: 文件后缀
- 内容: `js;css;jpg;jpeg;png;gif;webp;avif;svg;woff;woff2;ttf;eot`
- 过期时间: 365天
- 权重: 80
3. 配置不缓存规则:
- 类型: 目录
- 内容: `/api/`
- 过期时间: 不缓存
- 权重: 100
### 步骤6: 配置访问控制
1. 防盗链配置:
- 类型: 白名单
- 名单: `novalon.cn;*.novalon.cn`
- 是否包含空Referer: 是
2. IP访问限频:
- 单IP访问频率限制: 开启
- 限制频率: 100次/秒
### 步骤7: 上传静态资源到COS
#### 方法1: 使用部署脚本 (推荐)
1. 安装依赖:
```bash
pip install coscmd
```
2. 配置环境变量:
```bash
export COS_SECRET_ID="your-secret-id"
export COS_SECRET_KEY="your-secret-key"
export COS_BUCKET="novalon-cdn-[APPID]"
export COS_REGION="ap-chengdu"
```
3. 运行部署脚本:
```bash
chmod +x scripts/deploy-cdn.sh
./scripts/deploy-cdn.sh
```
#### 方法2: 手动上传
1. 使用COS控制台上传:
- 进入存储桶
- 创建目录: `_next/static/`
- 上传`dist/static/`目录下的所有文件
2. 设置对象元数据:
- Cache-Control: `public, max-age=31536000, immutable`
### 步骤8: 更新应用配置
1. 更新环境变量:
```bash
# 在.env文件中添加
CDN_DOMAIN=https://cdn.novalon.cn
```
2. 重新构建并部署应用:
```bash
npm run build
docker buildx build --platform linux/amd64 -t novalon-website:1.0.1 --load .
# 部署到服务器...
```
### 步骤9: 验证CDN加速效果
1. 检查静态资源URL:
```bash
curl -I https://cdn.novalon.cn/_next/static/chunks/main.js
```
2. 检查响应头:
```
HTTP/2 200
server: tencent-cdn
x-cache-lookup: Cache Hit
age: 3600
cache-control: public, max-age=31536000, immutable
```
3. 使用浏览器开发者工具:
- Network面板查看资源加载时间
- 确认资源来自CDN节点
## 性能优化建议
### 1. 图片优化
使用Next.js Image组件自动优化图片:
```tsx
import Image from 'next/image'
```
### 2. 字体优化
配置字体CDN:
```tsx
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
```
### 3. 代码分割
Next.js自动进行代码分割，确保每个页面只加载必要的代码。
### 4. 预加载关键资源
```tsx
import Head from 'next/head'
```
## 监控与告警
### 1. CDN监控指标
在CDN控制台配置监控告警:
- 带宽峰值
- 请求数
- 命中率
- 状态码分布
- 回源带宽
### 2. 告警规则
- 带宽峰值 > 100Mbps
- 命中率 < 80%
- 4xx/5xx错误率 > 5%
### 3. 日志分析
开启CDN访问日志，定期分析:
- 热门资源
- 访问地域分布
- 异常访问模式
## 成本估算
### CDN费用 (按流量计费)
- 基础费用: 0.21元/GB (中国大陆)
- HTTPS请求: 0.05元/万次
- 预估月流量: 100GB
- 预估月费用: 21元 + 5元 = 26元
### COS费用
- 存储费用: 0.118元/GB/月
- 流量费用: 0.5元/GB (CDN回源)
- 预估存储: 500MB
- 预估月费用: 0.06元 + 50元 = 50.06元
### 总计
预估月费用: **76元** (实际费用根据访问量动态调整)
## 常见问题
### Q1: CDN缓存未命中怎么办?
**原因**:
- 首次访问
- 缓存已过期
- 缓存规则配置错误
**解决方案**:
1. 检查缓存规则配置
2. 使用CDN刷新功能预热缓存
3. 增加缓存过期时间
### Q2: 静态资源404错误?
**原因**:
- 资源未上传到COS
- 路径不匹配
- 权限配置错误
**解决方案**:
1. 检查COS存储桶中是否存在该文件
2. 确认文件路径与URL匹配
3. 检查存储桶访问权限
### Q3: 跨域问题?
**原因**:
- CDN域名与应用域名不同
- CORS配置缺失
**解决方案**:
在COS存储桶设置CORS规则:
```json
[
{
"AllowedOrigin": ["https://novalon.cn"],
"AllowedMethod": ["GET", "HEAD"],
"AllowedHeader": ["*"],
"MaxAgeSeconds": 3600
}
]
```
### Q4: 如何回滚?
如果CDN出现问题，可以快速回滚:
1. 修改`next.config.ts`，移除`assetPrefix`配置
2. 重新构建并部署应用
3. 所有静态资源将从源站加载
## 维护计划
### 日常维护
1. 每周检查CDN命中率
2. 每月分析访问日志
3. 定期清理无用资源
### 版本更新
1. 更新应用时同步上传新静态资源
2. 使用版本化文件名避免缓存冲突
3. 更新后刷新CDN缓存
### 安全加固
1. 定期更新SSL证书
2. 配置IP黑名单
3. 开启CC防护
## 参考资料
- [Next.js CDN配置官方文档](https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix)
- [腾讯云CDN产品文档](https://cloud.tencent.com/document/product/228)
- [腾讯云COS产品文档](https://cloud.tencent.com/document/product/436)
- [Web性能优化最佳实践](https://web.dev/performance/)