Scratch游戏站带宽成本优化(R2+CDN)

之前哥飞提到做Scratch游戏站的带宽成本很高，为了优化成本可以把游戏html文件这类大对象放R2和套上cdn，我不是很懂技术，和ai沟通几轮后逐渐了解到基本概念，并磕磕碰碰走完了整个流程，因此把流程上的细节分享给大家，希望对大家有帮助(有错的话大家可指出)：

R2+Worker+CDN操作流程

step1：生成HTML单文件：使用https://packager.turbowarp.org/打包Scratch项目，下载生成的
HTML文件
step2：建R2存储桶：在Cloudflare点击"Createbucket"创建一个新的R2存储桶。上传html文件到R2
step3：配置R2公共访问：在R2控制台中，点击"Settings"标签，找到"Public access"部分，启
用"Allow public access for this bucket"选项

step4:创建CloudflareWorkers:

在Cloudflare控制台侧边栏，点击"Workers&Pages"选择"CreateWorker"为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) { const headers = new Headers(); object.writeHttpMetadata(headers) ; headers.set(’etag’, object.httpEtag); 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:llyour-worker-name.your-account.workers.dev/your-game-file.html

step6：设置自定义域名(可选)

·在Cloudflare控制台中，添加你的域名在Worker的"Domain"标签中,添加自定义域名比如 game.yourdomain.com然后应该就可以访问了：https://game.yourdomain.com/game-file.html

R2、Worker和CDN的关系：

1． R2（对象存储）：
作用：存储原始文件（如你的HTML游戏文件）
·相当于你的"源服务器"或"源存储"
作用：处理请求，从R2获取文件，设置缓存策略
。充当R2和CDN之间的"中间人"或"控制器"
3．CDN（内容分发网络）：
·作用：在全球范围内缓存和分发内容在这个设置中，Cloudflare的全球网络充当CDN工作流程：
·用户请求游戏文件
·请求首先到达最近的CloudflareCDN节点如果内容已缓存且有效，CDN直接返回内容
如果内容未缓存或已过期，请求传递给WorkerWorker从R2获取文件，设置缓存策略，返回内容CDN缓存这个响应，供future请求使用

成本效益分析：

1．存储成本：R2通常比传统云存储更便宜，特别是在数据检索方面
2.计算成本：Worker按实际使用量计费，比维护专用服务器更经济
·只在需要处理请求时才产生费用
3.CDN成本：
Cloudflare的CDN服务通常包含在他们的基本计划中
。缓存减少了对R2的请求，进一步降低成本

总结：

这种架构通过结合R2的经济存储、Worker的灵活计算和Cloudflare的全球CDN网络，创建了一个高效且经济的解决方案。它不仅能够提供出色的性能和全球可访问性，还能在多个方面帮助节省成本。对于像单页游戏这样的应用场景，这种设置通常比传统的托管解决方案更加经济实惠。

补充

·大佬补充1：有个小bug，就算r2不开公共访问，worker绑定后也能直接访问大佬补充2：另外缓存策略要控制好，不然你就算更新了Worker，也很容易拿到日数据。如果一直拿到旧数据，最好是把这个worker给直接删除掉，重新建立

评论区

夕远0ct 11, 2024

HackerQED Oct 15, 2024

中间加cache-control这部分很有用，昨天刚开始做，HTML丢在R2，没加cache，一个人本地开发就干了100多个请求，要是用的人多了不敢想，R2的A/BOperation费用都贵死。

阿杰0ct15,2024

如果只是要embedscratch游戏，我发现好像有projectid加以下代码就可以实现

https://docs.turbowarp.org/embedding

FireShot_Capture_103_Scratch游戏站_带宽成本优化_R2_CDN

文章目录