HTML部署R2+Worker+CDN操作流程
之前一直在琢磨把一堆静态文件部署到服务器上同时又能保证速度，这里我的方案就是直接将静态文件都部署到CDN上，而又需要保持一些数据或者页面更新，这里就需要用到R2+Worker。
R2+Worker+CDN操作流程
- step1：生成HTML单文件：使用https://packager.turbowarp.org/打包Scratch项目，下载生成的HTML文件
- step2：建R2存储桶：在Cloudflare点击”Create bucket”创建一个新的R2存储桶。上传html文件到R2
- step3：配置R2公共访问：在R2控制台中,点击”Settings”标签，找到”Public access”部分，启用”Allow public access for this bucket”选项
- step4：创建Cloudflare Workers：
- 在Cloudflare控制台侧边栏,点击”Workers & Pages”
- 选择”Create Worker”
- 为Worker取一个名字,如”game-assets-worker”
- 点击”Deploy”
- 更换代码为：
export default { async fetch(request, env) { const url = new URL(request.url); const key = url.pathname.slice(1);
const object = await env.MY_BUCKET.get(key);
if (object === null) {
return new Response('Object Not Found', { status: 404 });
}
const headers = new Headers();
object.writeHttpMetadata(headers);
headers.set('etag', object.httpEtag);
headers.set('Cache-Control', 'public, max-age=31536000');
return new Response(object.body, {
headers,
});
}, };- 点击”Save and deploy”
- step5：将R2存储桶绑定到Worker(Worker有缓存，因此即套上了CDN)
- 在Worker的详情页面,点击”Settings”标签
- 滚动到”Variables”部分
- 在”R2 Bucket Bindings”下,点击”Add binding”
- 设置Variable name为”MY_BUCKET”,选择你创建的R2存储桶
- 点击”Save”
- 现在,你的游戏文件应该可以通过Cloudflare CDN访问了。例如:https://your-worker-name.your-account.workers.dev/your-game-file.html
- step6：设置自定义域名(可选)
- a. 在Cloudflare控制台中,添加你的域名
- 在Worker的”Domain”标签中,添加自定义域名 比如 game.yourdomain.com
- 然后应该就可以访问了： https://game.yourdomain.com/game-file.html
R2、Worker和CDN的关系
1. R2（对象存储）：
- 作用：存储原始文件（如你的HTML游戏文件）
- 相当于你的”源服务器”或”源存储”
2. Worker：
- 作用：处理请求，从R2获取文件，设置缓存策略
- 充当R2和CDN之间的”中间人”或”控制器”
3. CDN（内容分发网络）：
- 作用：在全球范围内缓存和分发内容
- 在这个设置中，Cloudflare的全球网络充当CDN 工作流程：
- 用户请求游戏文件
- 请求首先到达最近的Cloudflare CDN节点
- 如果内容已缓存且有效，CDN直接返回内容
- 如果内容未缓存或已过期，请求传递给Worker
- Worker从R2获取文件，设置缓存策略，返回内容
- CDN缓存这个响应，供future请求使用 成本效益分析：
4.存储成本：
- R2通常比传统云存储更便宜，特别是在数据检索方面
- 计算成本：
- Worker按实际使用量计费，比维护专用服务器更经济
- 只在需要处理请求时才产生费用
- CDN成本：
- Cloudflare的CDN服务通常包含在他们的基本计划中
- 缓存减少了对R2的请求，进一步降低成本
总结： 这种架构通过结合R2的经济存储、Worker的灵活计算和Cloudflare的全球CDN网络，创建了一个高效且经济的解决方案。它不仅能够提供出色的性能和全球可访问性，还能在多个方面帮助节省成本。对于像单页游戏这样的应用场景，这种设置通常比传统的托管解决方案更加经济实惠。