jamstack简介：建立安全的高性能站点

Jamstack：构建更快速、安全、可扩展网站的现代化架构

图片提供：Netlify

近年来，Web开发技术日新月异。本文将介绍Jamstack架构，阐明其概念和优势。

过去，LAMP架构主导动态网站的开发。随后，MEAN架构为新一代Web应用奠定了基础。如今，随着API和可复用组件的兴起，静态网站再次成为潮流。这是一种“回归基础”的方式，但并非完全如此。

核心要点：

• Jamstack是一种现代化的Web开发架构，有助于创建速度更快、安全性更高、可扩展性更好的网站。它代表着JavaScript (J)、APIs (A)和Markup (M)的结合，其工作方式已为全球众多开发者带来启示。
• Jamstack可将动态网站转换为静态网站，从而显着提升速度、增强安全性并改善SEO。这可以通过使用静态站点生成器创建文章和页面、将静态内容与代码仓库同步以及自动化部署流程来实现。
• 与传统的全栈开发相比，Jamstack利用CDN进行全球部署、自动化流水线和预渲染页面来提高速度。它还允许通过API和微服务解耦前端和后端，并使用单一技术栈——JavaScript。

什么是Jamstack？

Jamstack是重新定义现代Web，以构建更快、更安全的网站的一种架构。这些网站具有更好的可扩展性，并且使用合适的工具集，开发和维护也更容易（更有趣）。

让我们分解一下这个术语：

• J代表JavaScript。 自1995年Netscape推出JavaScript以来，它已经发展壮大。借助响应式和渐进式库，您可以设计行为与移动应用几乎相同的Web应用。
• A代表APIs。 您无需自己编写所有功能，而是可以依赖第三方处理大量任务。
• M代表Markup。 您可以重用已开发的组件，或创建更容易维护的新组件。

这只是炒作吗？

某种程度上是的。 “Jamstack”（最初风格化为JAMstack）这个术语是由Netlify公司创造的，用于推广其“用于自动化现代Web项目的全能平台”。 Jamstack背后的原则并非全新，因为Web组件和API已经存在了一段时间。

但与Ajax（异步JavaScript和XML）这个术语当年由另一家公司Adaptive Path创造的情况非常相似——尽管使Ajax成为可能的XMLHttpRequest (XHR) API也存在了一段时间，但Ajax和JAMstack都是对现有理念的令人耳目一新的改进，具有被社区迅速采用的合法用途。这种炒作是当之无愧的：这种工作方式已为全球众多开发者带来启示。

静态网站？

“静态网站”是“动态网站”的对立面，对吗？那么，如何仅使用简单的HTML文件提供丰富而动态的交互呢？答案是JavaScript。

自第一次浏览器大战以来，JavaScript已经发生了很大的变化，随着Node.js的出现以及React、Angular和Vue.js等库的出现，它已经巩固了自己作为通用编程语言的地位。设计高级用户界面（UI）的可能性是无限的。

当然，JavaScript并非万能药。您很可能不会用它进行数据分析或AI。但对于Web开发而言，几乎没有什么事情是您无法通过JavaScript方法使用的API来完成的，因为很可能有人已经为此创建了微服务。

而且，如果您能够将所有这些过程与标记封装到可复用的组件中——您可以在需要特定功能时随时插入——那么您每次都可能节省数小时的工作时间。

这就是J·A·M堆栈：JavaScript、API、标记。

解耦、无头、微服务、无服务器……抱歉，这是什么？

所有这些都是Web开发中的热门话题，它们都密切相关，但并不完全相同。您会经常听到这些术语，因此让我们从一开始就澄清一些术语。

耦合与解耦与无头

耦合是指网站的内容是在网站的后端（数据库所在的位置，例如WordPress管理面板）创建、管理和存储的。然后从后端提取此内容，并通过前端界面（例如WordPress模板）在浏览器中表示。在某种程度上，“耦合”应用程序是传统意义上的“全栈”应用程序，后端和前端是同一个应用程序的不同方面。

相反，解耦是指后端和前端是分别管理的——这意味着数据库和管理工具将位于一个服务器上，而前端位于另一个服务器上。当然，需要一种媒介来连接两者，通常是API。此外，由于后端现在实际上与前端分离，因此实际上可能存在多个位于不同位置的前端！（想想使用相同引擎的不同店面，例如Shopify。）

简而言之，无头软件根本没有前端或表示层。例如，无头CMS可以生成静态内容并将其推送到任何地方：移动应用程序、物联网设备、静态网站。诚然，这也是一种“解耦”情况，但在这里您甚至可能不需要API。想想一个将帖子导出为静态HTML文件以供服务的WordPress引擎：这就是无头。事实上，您现在就在一个以这种方式生成的页面上。

单体式（紧密耦合）与微服务（松散耦合）

简单地说，单体式可以定义为作为一个整体构建的软件。示例可能包括移动应用程序、大多数可以在您的计算机上安装的应用程序以及WordPress等Web应用程序。这些应用程序仍然可以具有内部“模块”或“组件”，但我们说这些是紧密耦合的，因为它们是应用程序不可或缺的一部分，没有它们，应用程序将无法工作。

另一方面，松散耦合的软件组件的工作方式更像可以移除或替换的插件，并且功能可能会发生变化，但应用程序的核心仍然可以工作。这一原则允许通过第三方API（通常称为“微服务”）“外包”功能——因为它们提供本身并非应用程序不可或缺部分的辅助功能（图像调整大小、登录、存储）。

无服务器与传统计算

诚然，“无服务器”有点用词不当。无论您从事何种计算工作，都将涉及服务器。但是，您访问和管理服务器的方式可能大相径庭。

在传统模型中，您可能拥有一个实际的物理服务器（有时称为裸机），或者是一个虚拟专用服务器，其中资源分配给您——以及其他用户——在一个物理服务器上。资源是有限的，无论您是否使用100%的资源，您都必须为它们付费，就好像您使用了它们一样。

在无服务器模型中，许多服务器之间相互连接，提供了一个巨大的资源池。您只需在需要时提取所需资源，并根据需要进行扩展（向上和向下）。您无法真正确定任何物理服务器是您的——您只知道无论资源来自何处，资源都在那里。

传统模型 无服务器模型

具有有限资源的物理服务器 无限资源池 容易出现故障（例如硬盘故障） 更可靠的架构* 可扩展性有限 无限可扩展性 支付所有费用，包括空闲服务 按使用付费（按需付费） 简单易用 需要学习实施 **请注意，硬盘、CPU和内存芯片故障仍然会发生。但由于资源是透明分配的，因此即使硬件发生故障和更换，您也不会注意到。

Jamstack的实际示例

这些内容很多，特别是如果您不熟悉这些概念的话。因此，让我们休息一下理论，看看一些Jamstack在现实生活中的实际应用。

案例研究1：将WordPress转换为静态网站，速度提升10倍

如果静态是最佳选择，那么还有什么比将动态WordPress (WP)博客转换为静态博客更好呢？通过这样做，我们将至少将页面加载速度和延迟降低一个数量级，极大地增强安全性，并同时改善我们的SEO。

简而言之，该流程如下：

1. 使用静态站点生成器 (SSG) 从WP创建文章和页面，但采用静态格式（文本、Markdown、HTML）。
2. 将静态内容与GitHub、GitLab或Bitbucket上的代码仓库同步。
3. 自动化部署流程，以便每次代码仓库发生更改时，更改都会立即上线到全球CDN。
4. 放松身心，享受免费托管，拥有安全快速的网站和自动部署。?

但是……

当然，这会产生很多问题：

• 管理面板怎么办？
• 类别和RSS提要怎么办？
• 我现在如何管理内容？
• 评论部分和时事通讯怎么办？

此时，您可以告别WP管理面板，因为从现在开始，您将使用SSG生成内容。事实上，像Jekyll这样的SSG专门用于构建博客，而像Gatsby.js这样的SSG已经包含了所有功能。

管理内容（例如修改现有帖子）是无头CMS发挥作用的地方。对于评论和时事通讯，您是否已经在使用外部API（例如Disqus和Mailchimp）？

您实际上是如何做到的？

我们在这里无法涵盖SSG和无头CMS的来龙去脉，但请关注本系列的后续部分。我们将提供一个将WordPress网站迁移的逐步指南。

案例研究2：使用自动流水线免费托管静态网站

在Jamstack社区中，您会经常听到“免费”——值得庆幸的是，它不是免费的，因为您仍然必须告诉我们您的信用卡号码免费。

简而言之，该流程如下：

在本例中，我们将采用我们的静态网站（例如，我们在案例研究1中迁移的博客）并将其上线：

1. 设置GitHub、GitLab或Bitbucket代码仓库。
2. 部署到Netlify、GitLab Pages或GitHub Pages。

此时，代码仓库的每次更改都会自动触发新的部署（通过Webhook），如果出现问题，可以非常优雅地回滚。

为什么公司免费提供这些服务？

将HTML文件放到已部署的CDN上的开销很小。请记住，不涉及实际计算，没有PHP渲染。除非您托管一个非常受欢迎的网站，该网站会消耗大量带宽，否则公司不介意提供一些托管服务。这样做可以为他们带来良好的宣传。

通过赠送大量免费赠品，公司也会将您锁定。当您需要高级服务时（如果您的业务发展壮大，您将需要），您已经与他们合作了。这很公平——而且，那时您无论如何都需要开发一个临时解决方案来解决您的问题或付费使用服务。

您实际上是如何做到的？

Netlify或GitHub/GitLab这两种情况都非常简单，只需要最少的努力。（尽管如此，我们将在接下来的文章中详细介绍该过程。）

Jamstack与全栈开发的比较

让我们看看这种新方法与LAMP或MEAN堆栈相比如何：

LAMP/MEAN堆栈 Jamstack

运行网站的Web服务器 到CDN的全球部署 FTP/SSH上传，服务器重启 自动化流水线 运行时渲染页面 预渲染页面以提高速度 单体式应用程序（例如WordPress） API和微服务（前端/后端解耦） 全栈（前端和后端语言） 单一技术栈（“到处都是JavaScript”）

您还可以使用Jamstack做什么？

希望此时您已经了解了创建网站的好处。但您可能仍然对如何在没有后端处理的情况下执行最基本的操作持怀疑态度，例如用户登录以及在没有关系数据库 (RDBMS) 的情况下管理或存储动态内容。

以下是您可以使用Jamstack执行的一些其他示例：

• 使用静态网站实现无服务器数据库
• 身份即服务 (IDaaS)：无状态身份验证
• 无头内容管理系统
• 在静态网站中使用无服务器函数
• 多用途表单的管理
• 处理多平台通知
• 无头购物车
• 响应式搜索

结论

事物的发展是不可避免的，尤其是在IT领域。以前是LAMP堆栈，然后是MEAN堆栈。现在是Jamstack，五年到十年后将是其他东西。最好接受这些变化并使它们成为我们自己的！

学习新的做事方法听起来可能很麻烦，但它也可以重新激发您对开发的热情。您可能会发现自己花费更少的时间维护服务器和担心安全问题。您可能会发现开发需要更少的努力，并且您的客户更满意。您甚至可能会因此而更有竞争力（并能够要求加薪）。?

Jamstack基础

请关注有关此主题的更多文章。虽然多年来我们一直在介绍Jamstack，但它已经成为一门独立的学科和实践。我们将为您提供成为Jamstack专业人士所需的教程，并在此页面的索引中进行更新。您还可以通过我们的RSS提要或社交媒体随时了解最新信息。

Jamstack基础知识

• Jamstack简介：构建安全、高性能的网站
• Jamstack工具、API和服务：全面比较
• 如何使用自动流水线免费托管静态网站
• 如何从WordPress迁移到静态站点生成器

Jamstack工具

• Gatsby入门：构建您的第一个静态网站
• Eleventy入门

以及更多正在进行中的工作。

关于Jamstack的常见问题

什么是Jamstack？Jamstack代表“JavaScript、API和标记”。这是一种构建网站和Web应用程序的架构，它强调将前端与后端解耦，从而实现更好的性能、安全性以及开发人员体验。

Jamstack与传统Web开发有何不同？在传统的Web开发中，服务器负责在每个请求中动态生成HTML。另一方面，Jamstack在构建过程中预先构建页面，直接向客户端提供静态资产，并利用API实现动态功能。

Jamstack架构的关键原则是什么？Jamstack的关键原则包括预渲染、以API为中心的开发以及使用全球内容交付网络 (CDN)。预渲染涉及在构建阶段生成静态HTML，而API处理动态功能。

使用Jamstack的好处是什么？Jamstack 提供了诸多好处，例如由于静态站点生成而提高的性能、通过减少服务器的攻击面而增强的安全性以及借助CDN简化的可扩展性。此外，它通常还会带来更好的开发人员体验。

我可以在Jamstack应用程序中使用服务器端功能吗？是的，Jamstack应用程序可以通过无服务器函数或API利用服务器端功能。无服务器函数允许您响应事件执行服务器端代码，从而提供动态功能，同时保持静态站点交付的优势。

Jamstack适用于所有类型的网站吗？Jamstack适用于各种各样的网站，从简单的博客和营销网站到复杂的Web应用程序。但是，其适用性取决于项目的具体要求以及对实时服务器端处理的需求。

以上是jamstack简介：建立安全的高性能站点的详细内容。更多信息请关注PHP中文网其他相关文章！