如何使用 Cloudflare 和 S3 End 设置我自己的个人 CDN

2025-06-09

如何使用 Cloudflare 和 S3 设置我自己的个人 CDN

结尾

什么是 CDN?

根据Cloudflare的说法, CDN 是:

内容分发网络 (CDN) 是指地理上分布的一组服务器,它们协同工作以快速分发互联网内容。

CDN 可以快速传输加载互联网内容所需的资源,包括 HTML 页面、JavaScript 文件、样式表、图片和视频。CDN 服务的普及度持续增长,如今大多数网络流量都通过 CDN 承载,包括来自 Facebook、Netflix 和 Amazon 等主要网站的流量。

正确配置的 CDN 还可以帮助保护网站免受一些常见的恶意攻击,例如分布式拒绝服务 (DDOS) 攻击

--什么是CDN?

tl;dr CDN 是遍布全球的计算机网络,可高效地传递内容。

CDN 可以提供什么?

  • 缓存以减少我的网络服务器的负载
  • 地理分布,无论您身在何处,均可快速送货
  • DDoS 保护,防止流量突然激增
  • 压缩文件以便为网速较慢的用户提供更快的传输速度

我为什么需要 CDN?

我经常需要托管公共静态文件。我希望能够以一种快速、高效、可靠且可扩展的方式进行托管。

最近,我的一篇文章登上了 HN 主页的榜首。

Screenshot_20201001-222913__01.jpg

我还发现它在Reddit上很流行,还有谁知道其他地方呢。长话短说。我的域名转眼间就流量爆棚了。

joelnet-文章-屏幕截图.png

我很幸运,几周前刚刚把joel.net迁移到了Hashnode。我之前的主机托管服务根本无法处理这么大的流量。即使在流量高峰期,joel.net也始终在线。

因为我还托管了其他文件,所以最好做好准备。所以我计划全面使用 CDN。

Cloudflare

这时Cloudflare就派上用场了。我用它们来托管joel.net的 DNS。Cloudflare会通过其 DNS 产品默认提供这些 CDN 功能,而且这些 DNS 产品也是免费的。🔥

现在我需要的是一个托管静态文件的地方。

AWS 简单云存储 (S3)

您可以使用任何静态网络主机,但我选择 S3,因为我已经熟悉它。

它只需要在线并允许自定义域名。

设置我的 S3 存储桶

S3 存储桶名称必须与域名匹配。在本例中,我使用cdn.joel.net域名作为存储桶名称。

图像.png

多次单击“下一步”,直到看到此屏幕。

图像.png

请务必取消选中“阻止所有公共访问”。然后检查上方的确认弹出窗口。

继续单击下一步,直到可以单击创建存储桶

现在我需要将此存储桶配置为公开访问。因此,我前往“权限”,然后是“存储桶策略”。

图像.png

我插入我的存储桶名称,cdn.joel.net然后Resource将其粘贴到存储桶策略编辑器中。



{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cdn.joel.net/*"
        }
    ]
}


Enter fullscreen mode Exit fullscreen mode

接下来,我在“属性”下设置静态网站托管

图像.png

我勾选了“使用此存储桶托管网站”index.html ,并设置了我的404/404.html 文件。我还将为我的 404 文件创建一个目录,以便我也可以在其中托管与 404 相关的资产。

图像.png

此时,我可以上传文件并通过从此页面访问端点来确保其正常工作。

配置 Cloudflare

最后一步是设置我的 Cloudflare DNS 以指向我刚创建的 S3 存储桶。

我通过添加一个新的CNAME记录来实现此目的,该记录的名称cdn和目标设置为 S3 存储桶的域。

图像.png

此时,我应该能够使用自定义域名访问我的存储桶了。那么,让我们测试一下我的 404 页面http://cdn.joel.net。看起来一切正常!

图像.png

现在只需检查最后一件事,我打开开发者控制台,单击“网络”选项卡,单击请求cdn.joel.net并转到“标头”

在这里我可以看到content-encoding: br。这意味着 Cloudflare 自动使用 Brotli 压缩算法为我压缩了 HTML。

图像.png

结尾

干杯🍻

鏂囩珷鏉ユ簮锛�https://dev.to/joelnet/how-i-setup-my-own-personal-cdn-3h06
PREV
使用 VSCode 调试器可视化闭包更多视频
NEXT
JavaScript 中的函数式模式与命令式模式 if / else if (no else) 对数组求和 for / if (1) for / if (2) 提前中断循环 if / else if / else 设置属性 修改数组 类 嵌套 for 循环 空值保护 结束