张翔
353 lines
7.2 KiB
Markdown
353 lines
7.2 KiB
Markdown
# 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'
|
|
|
|
<Image
|
|
src="/hero.jpg"
|
|
alt="Hero"
|
|
width={1920}
|
|
height={1080}
|
|
priority
|
|
/>
|
|
```
|
|
|
|
### 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'
|
|
|
|
<Head>
|
|
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
|
|
</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/)
|