freeCodeCamp.org 如何使用 JAMstack + 单个 API 服务器帮助每月数百万人学习编码

嘿，dev.to 的朋友们——长期潜水者，第一次发帖。

freeCodeCamp.org 现在每月帮助数百万人学习编码，我们使用单个 API 服务器来实现这一目标。

该平台的其余部分由 CDN 和其他优质服务处理。

这是一个称为JAMstack的新架构，它代表 JavaScript、API 和 Markup。

这是我撰写本文时 NGINX 的屏幕截图：

尽管有 1,368 人同时使用 freeCodeCamp.org，我们的 Node.js / Loopback 服务器却几乎不费吹灰之力。

freeCodeCamp.org 是一个小型非营利组织，预算更少，因此我们希望最大限度地提高基础设施的性价比。

我们主要提供静态页面服务。即使我们的编码挑战——尽管它们具有交互性——也完全在客户端运行，不需要服务器调用。因此，JAMstack 对我们来说非常有意义。

这对于您的组织来说可能也有意义。

因此，请允许我逐步向您介绍我们的堆栈的工作原理。

freeCodeCamp.org 的 JAMstack 架构

步骤＃1：开源贡献者打开拉取请求，更改 freeCodeCamp.org 的 6,000 多个交互式编码挑战和参考文章之一 - 所有这些都存储为易于编辑的 markdown 文件。

步骤＃2：我们的持续集成工具确认构建通过，并且 Git 确认没有任何合并冲突。

步骤#3：开源维护者对 GitHub 上的拉取请求进行 QA 和合并。

步骤＃4：Gatsby（一个静态站点构建器）将这 6,000 多个 markdown 文件转换为单页 React 应用程序。

步骤＃5：Netlify 将新建的应用程序推送到世界各地数据中心的 CDN 端点。

步骤＃6：想要练习编码的人请访问https://www.freecodecamp.org。

步骤＃7：他们的浏览器从最近的 Netlify CDN 端点拉取文件并呈现 Gatsby 应用程序。

步骤#8：Auth0 检查用户是否已登录 freeCodeCamp.org。如果已登录，则授予用户对我们公共 API（Node.js/Loopback 服务器）的读写权限。

步骤＃9：然后，API 服务器从我们在 mLab 上托管的 MongoDB 集群读取和写入数据。

步骤#10：浏览器现在可以获取用户完整的 freeCodeCamp 个人资料和进度。当他们完成编程挑战时，浏览器会将数据写入个人资料。

那么为什么选择 JAMstack？

JAMstack 有几个优点吸引我们远离更传统的以 Web 服务器为中心的架构。

好处 1：JAMstack 超级便宜。

我们是一个小型非营利组织。我们希望尽可能地将我们有限的资金用于帮助人们学习编程，而不是用于购买不必要的服务器和带宽。

自从我们开始将服务迁移到 JAMstack 以来，我们的基础设施成本已大幅下降。

好处2：更简单。

当你的堆栈简单且活动部件很少时，你会更加理智。这意味着半夜出问题的可能性更小。

好处3：更安全、更可靠。

我们现在依赖一系列专门的 API，它们各自负责做好一件事。这意味着我们自己犯错的可能性更小了。

Auth0 团队花费大量时间思考如何使身份验证更加安全。Algolia 则花费大量时间思考如何防范恶意查询。

我们可以专注于保护我们的单一 API，而不必陷入影响以 Web 服务器为中心的应用程序的所有额外安全考虑之中。

但为什么是 JAMstack？

你是认真的吗？我刚才才告诉你的。

抱歉——我指的是《超级名模》。我实在忍不住。

几周前，我做了一个关于 JAMstack 的演讲。在演讲中，我介绍了我们在拥抱 JAMstack 之前使用过的各种堆栈。我还分享了我们在 2019 年如何实现更大规模和更高性价比的愿景。

你知道的越多

freeCodeCamp.org 是一个小型非营利组织，致力于帮助全球数百万人免费学习编程。到目前为止，我们社区已有数万名成员获得了第一份开发者工作。

祝您编码愉快。