设计稿与资源导出时h5 游戏图用cdn的最佳实践与命名规范

1. 概述：为什么 H5 游戏资源必须走 CDN

1) H5 游戏资源（图/音/脚本）体量大，直接放在单台 VPS 或主机常导致带宽/并发瓶颈，使用 CDN 可降低源站流量并提升全局访问速度。
2) CDN 节点遍布多地区，能显著降低首屏加载时间和请求延迟，尤其对移动端用户体验影响明显。
3) 通过合理的文件命名与指纹化，CDN 能实现长缓存策略，减少用户重复下载与带宽成本。
4) CDN 服务通常提供 HTTPS、CORS、压缩传输（gzip/brotli）与智能回源功能，减轻源站压力。
5) 在 DDoS 攻击场景下，专业 CDN 提供吸收攻击能力与流量清洗，保护后端主机或 VPS 的可用性。

2. 命名规范总则（对接设计稿与导出工具）

1) 全部使用小写英文字母+数字+中划线（-），避免下划线和空格，例如：game-scene1-bg@2x.png。
2) 采用语义前缀：scene/btn/icon/sprite/atlas，例如：icon/hero-run-01.png，方便按目录集中管理和 CDN 路径匹配。
3) 支持设备分辨率后缀：@1x、@2x、@3x，且统一扩展名小写，如 .png .jpg .webp。
4) 采用内容指纹（hash）或版本号：hero-run-01.3f2a1.png 或 hero-run-01.v202608.zip，利于强缓存与回滚。
5) 对大图集使用 atlas+索引路径：atlas/level1.atlas + atlas/level1.png，导出工具输出同名索引文件便于引擎加载。

3. CDN 与源站（服务器/VPS/主机/域名）配置建议

1) 源站建议配置（示例）：2核4GB/20GB SSD/公有带宽 100Mbps（小型测试服），生产建议 4核8GB/50GB SSD/200Mbps 起；操作系统常用 Debian/Ubuntu。
2) 域名与子域：使用独立 CDN 域名 cdn.game.example.com，源站域名 origin.game.example.com，避免 cookie 污染并可设置不同证书。
3) CDN Origin 配置：支持回源主机头设置、回源协议（https）和备份 Origin（备用 VPS 或对象存储）。
4) 对象存储搭配：可将静态资源上传到 OSS/S3/COS 并作为 CDN 源，降低源站压力，例如腾讯 COS + CDN。
5) HTTPS 与证书：推荐使用 CDN 托管证书或通过 Let's Encrypt 自动签发，强制启用 HSTS 与 TLS1.2+以提高安全性与兼容性。

4. 缓存策略、压缩与响应头（具体数据示例）

1) 静态资源（图片/音频）设置长缓存：Cache-Control: public, max-age=31536000；配合文件指纹化实现安全缓存。
2) 脚本/CSS 设置合理短期缓存并启用版本号：Cache-Control: public, max-age=3600, must-revalidate，发布时更新版本字符串。
3) 启用压缩：对文本类文件启用 gzip/brotli，压缩比可减少 60%-80% 流量；图片使用 webp 或压缩工具进一步优化。
4) 示例响应头表格（居中，细边框）：

资源	Cache-Control	Content-Encoding
image/sprite.png	max-age=31536000	—
js/game-core.js	max-age=3600	br/gzip
audio/bg-music.ogg	max-age=31536000	—

5) CDN 缓存命中率目标：上线后一周内命中率应达到 90%+；若低于 80%，需检查路径、Cache-Control 与 query string 配置。

5. DDoS 防护与 WAF 策略（技术与实战）

1) 采用 CDN 厂商的 DDoS 清洗服务或第三方云防护，设置全网流量黑洞阈值并启用速率限制（rate limiting）。
2) 在 CDN 层启用 WAF（Web Application Firewall），常见规则包含：IP 黑白名单、地理封禁、机器人识别与异常请求拦截。
3) 对 API/接口与上传路径设置严格限流与校验，避免被利用作反射或放大攻击。
4) TCP/UDP 层面：对于大流量攻击，建议与运营商或云厂商合作启用带宽峰值保护与流量清洗节点。
5) 日志与告警：配置实时日志推送（例如 CDN → Log Service）与阈值告警（异常请求数、流量突增），并制定应急切换预案。

6. 导出工具与自动化部署流程（CI/CD）

1) 设计稿导出建议建立导出模板，统一命名规则，并在导出脚本中自动生成版本号与指纹（hash）。
2) 构建流水线示例：开发提交 → CI（压缩/转换图片、生成 atlas、指纹）→ 上传到对象存储/源站 → 通知 CDN 刷新或依赖文件指纹避免刷新。
3) 自动化示例命令：imagemin 压缩图片；webpack 输出带 contenthash 的文件名；rsync 或 coscli 上传到源站。
4) 刷新策略：对带版本指纹的文件无需强制刷新；对不带指纹的文件使用按路径或目录批量刷新并限制频率（避免刷爆 API）。
5) CI 节点建议资源：2核4GB 内存起步，上传并发控制在 10 并发以内以避免经常触发对象存储或 CDN 的限制。

7. 真实案例与具体服务器配置举例

1) 案例概述：某 H5 游戏《星际冒险》在国内上线，采用腾讯 COS + CDN + 阿里云 ECS 作为管理后台，目标用户量峰值 50k 并发。
2) 服务器配置（生产环境）：4 核 8GB 内存，带宽 200Mbps（阿里云 ECS，CentOS 7），Nginx 1.20 作为反向代理，SSL 由 CDN 托管。
3) CDN 配置：多线路加速，节点覆盖全国，开启 gzip/brotli，图片采用 webp 优先，静态资源缓存 TTL 30 天（配合指纹）。
4) 防护数据：上线首周遭遇一次小规模 DDoS（流量峰值 1.2Gbps），CDN 清洗后原站流量峰值控制在 50Mbps，未出现服务中断。
5) 部署效果（表格示例）：

指标	值
峰值并发（CDN 前端）	50,000
源站带宽峰值	~50 Mbps
缓存命中率	92%

来源：设计稿与资源导出时h5 游戏图用cdn的最佳实践与命名规范