前端架构：如何免费托管您的 Web 应用程序

我正在开展一个个人项目，旨在帮助用户查找芝加哥音乐会。从架构角度来看，该项目的一个值得注意的方面是整个 Web 应用程序完全免费托管。

下图说明了架构组件：

免责声明：我没有受到我在这里提到的任何服务的赞助；我强调它们只是因为我发现它们很有用。

项目代码库

GitHub 是最受欢迎的免费托管代码库的平台。我还尝试过 Bitbucket 和 GitLab 等替代方案，它们也同样有效。老实说，这些选项中的任何一个都可以完成任务 - 只需选择一个并继续前进，无需过多考虑。

前端工作流程编排

在专业环境中，您通常会直接与 AWS 或其他云服务提供商合作，从而使您能够完全控制部署、通知和监控。然而，这种方法需要更多的时间和精力。幸运的是，Netlify 和 Vercel 等服务消除了很多麻烦，简化了这一过程。它们允许快速部署，但依赖于其生态系统。一旦您的网站开始接收大量流量（数千次访问），最好检查免费套餐限制以避免意外费用。对于个人项目，我已经多次使用这些服务，到目前为止没有任何问题。

也就是说，Netlify 提供了一些开箱即用的功能。在架构图中，Netlify 自动提供了三个组件：

• GUI 集成:

Netlify 的 GUI 允许您集成代码库存储库 - 在我的例子中是 GitHub。 Netlify 了解 Next.js 应用程序的默认设置并使用它们无缝部署代码。

• 静态站点托管：

chicagomusiccompass.com 是一个静态 Web 应用程序，这意味着不涉及服务器。触发部署时，应用程序会生成存储在 S3 存储桶中的静态资产（HTML、JS 和 CSS）。然后，Netlify 使用 CloudFront 处理配置，为您提供现成的 URL。

• Lambda 函数:

静态站点通常需要从其他域获取数据。这通常需要一个代理，称为“前端的后端”(BFF)。默认情况下，客户端应用程序无权访问其他域，除非服务器通过 CORS 明确允许，但这并不总是常见的做法。对于这个项目，我使用代理从不同的域中提取 JSON 文件。

Netlify 管理所有部署编排并提供一个 URL（子域），您可以将其链接到您的域以获得用户友好的 URL。

例如，这是我的项目的 Netlify URL：

https://clinquant-chebakia-f64a5b.netlify.app/

然后，我使用 CNAME 记录配置我的域，将 www 指向 Netlify URL：

当用户访问 https://www.chicagomusiccompass.com/ 时，DNS 会将域解析为其最终目的地 - Netlify URL ?.

虽然这里发生了很多事情，但其中大部分都是通过仪表板（GUI）进行配置的。关键是要理解一切是如何联系在一起的；剩下的只是浏览用户界面。

自动计划任务（Cron 作业）

cron-job.org 是一项允许您免费运行 cron 作业的服务。以下是它在此设置中的工作原理：

a) Netlify 部署挂钩:
Netlify 提供了一个可配置的 Webhook（URL 端点），触发后会重新部署站点。这确保了 chiagomusiccompass.com 可以在需要时自动更新。

b) cron-job.org 集成:
通过 cron-job.org，您可以安排一个 cron 作业——在本例中，设置为每天运行。该作业只是触发 Netlify 部署挂钩，提示 Netlify 每天重新部署（更新）站点。

注意：虽然chicagomusiccompass.com 也有后端组件，但本文仅关注前端架构。

概括

chicagomusiccompass.com 是一个 Next.js 应用程序，构建后会生成一个静态站点（无服务器）以及几个 Lambda 函数。 GitHub 存储库与 Netlify 集成，因此每次推送到存储库都会触发新的部署。此过程会生成新版本的静态站点并更新 Lambda 函数。 Netlify 处理这些文件的部署并自动配置必要的网络基础设施，允许通过子域访问 Web 应用程序。此外，我还配置了自定义域chicagomusiccompass.com，以指向Netlify。该网站通过触发 Netlify 部署挂钩的每日 cron 作业保持最新状态。

该网站已经运行了几个月，目前没有太多流量，但就基础设施成本而言，我没有支付一分钱。

在专业环境中，根据项目要求，我可能会选择类似的解决方案，尤其是在早期阶段。后来，随着业务的增长和需求的发展，我可以迁移某些组件。

前端架构如今变得非常令人兴奋，尤其是当您可以利用免费服务时。但是，请记住如果服务是免费的，那么您可能就是产品。

以上是前端架构：如何免费托管您的 Web 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！