novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dev
novalon-website/docs/CDN_CONFIGURATION.md
T
张翔 7a38eae6e0 chore: 删除e2e测试相关的初始化文件和快照文件 
清理不再需要的测试初始化文件和视觉回归测试的快照文件，以保持代码库整洁
2026-03-27 09:56:57 +08:00

7.2 KiB
Raw Permalink Blame History

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解析:

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. 安装依赖:
pip install coscmd
  1. 配置环境变量:
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"
  1. 运行部署脚本:
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. 更新环境变量:
# 在.env文件中添加
CDN_DOMAIN=https://cdn.novalon.cn
  1. 重新构建并部署应用:
npm run build
docker buildx build --platform linux/amd64 -t novalon-website:1.0.1 --load .
# 部署到服务器...

步骤9: 验证CDN加速效果

  1. 检查静态资源URL:
curl -I https://cdn.novalon.cn/_next/static/chunks/main.js
  1. 检查响应头:
HTTP/2 200
server: tencent-cdn
x-cache-lookup: Cache Hit
age: 3600
cache-control: public, max-age=31536000, immutable
  1. 使用浏览器开发者工具:
    • Network面板查看资源加载时间
    • 确认资源来自CDN节点

性能优化建议

1. 图片优化

使用Next.js Image组件自动优化图片:

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority
/>

2. 字体优化

配置字体CDN:

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

3. 代码分割

Next.js自动进行代码分割，确保每个页面只加载必要的代码。

4. 预加载关键资源

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规则:

[
  {
    "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防护

参考资料

Reference in New Issue View Git Blame Copy Permalink