如何让你的
网站建设更具魅力？ 如何使用JAMstack构建快速，安全的网站
在过去的几个月中，JAMstack的接受度非常高，现在可以使用多种工具和服务来创建快速，动态的Web应用程序。JAMstack提倡原子部署，这种部署可以产生更频繁，更轻松的部署周期，这意味着可以以简单的方式将最新更新交付给用户。
这改变了整个开发流程。传统上复杂的应用程序和功能（例如身份验证，结帐，支付系统和媒体管理）现在可以通过几行代码来添加。此外，有了JAMstack，我们不再使用整体应用程序，而是开发较小的组件并将其原子部署到全局CDN（边缘服务器）。开发人员可以利用静态网站生成器，并使用客户端JavaScript和无数API来增强其网站，这意味着他们只需要关注一件事：开发。无需处理与DevOps相关的任务。
在本文中，我们将回顾为什么您应该关心这个新堆栈，以及如何最好地使用它来构建更快，更安全的网站。您还可以在下面的苏黎世前线会议上观看我就此主题发表的演讲。
塔马斯Piros -释放的JAM堆栈的力量从正面苏黎世会议上Vimeo的。
什么是JAMstack？
jamstack：主页
该JAMstack主页。
JAMstack的JAM部分是作为堆栈核心的三个核心概念的首字母缩写：JavaScript，API和标记。但是，我们需要更深入地研究，以找出JAMstack的功能，以及如何一起使用这些技术来获得出色的体验。
对JAMstack的更好描述（尽管更长）是，它使我们可以使用易于访问的服务来创建性能卓越的网站，并更快地部署它们，而无需原始服务器。
描述的最后一部分很好奇。为什么没有原始服务器？
原始服务器是运行应用程序的服务器，通常是Web服务器，例如Apache或Express，它可以接受请求并提供响应。
这样做的关键之处在于，当您考虑使用LAMP堆栈之类的经典设置时，会在请求时生成页面：用户单击链接，PHP文件被加载，该文件可能通过以下方式向数据库发出请求： SQL查询的一种方式，它收集数据并返回一些模板，然后将其渲染为HTML，这就是用户所看到的最终产品。尽管有一些可用的缓存机制，但只要加载同一页面，就会发生此过程，这意味着可能不需要每次都进行数据查询。但是，这个概念仍然存在：我们有在每个请求上执行的服务器端代码。
“换句话说，我们预先渲染了标记，因此当用户请求页面时，根本不需要执行服务器端代码。”
使用JAMstack，我们的方法略有不同。如果我们在构建时提前基于模板逻辑和结构生成HTML文件怎么办？换句话说，我们预先渲染了标记，因此，当用户请求页面时，根本不需要执行服务器端代码。生成的HTML代码可以放置到任何托管提供商的服务器，GitHub Pages上，甚至只是Amazon的S3上，并可以立即提供。
jamstack：流程图
JAMstack网站是使用JavaScript，API和标记构建的，无需原始服务器即可提供服务。
模板图标
项目管理：规划您的Web设计工作流程
将免费的项目管理副本：规划Web设计工作流发送到收件箱。
电子邮件
输入您的电子邮件地址
输入您的电子邮件-我们还将向您发送与Shopify相关的营销电子邮件。您可以随时取消订阅。注意：该指南不会发送到基于角色的电子邮件，例如info @，developer @等。
我们的虚拟齿轮正在转动。
请注意，
我们的电子邮件最多可能需要15分钟
才能到达您的收件箱。
使用静态网站生成器进行预渲染
为了实现我们之前讨论的内容，我们需要一个能够预渲染标记的工具。静态站点生成器（SSG）正是为此目的而设计的。今天有一些静态站点生成器，其中大多数基于流行的JavaScript前端框架，例如React（Gatsby，Next.js）和Vue（Nuxt.js，Gridsome）。还有一些不基于JavaScript的语言，例如Jekyll（Ruby）和Hugo（Go aka Golang），或者基于香草JavaScript的语言（11y）。
“我们如何预渲染标记与用于该工具的编程语言无关。”
此时，当我们谈论Ruby和Go for SSG时，您可能想知道JAMstack中的“ J”为什么用于JavaScript。实际上，这是我大多数演讲和讲习班中提到的一个问题。关键的区别在于静态站点生成器与JAMstack中的“ M”（标记）相关。我们如何预渲染标记与用于该工具的编程语言无关。“ J”（JavaScript）位是指我们可以使用各种JavaScript功能来增强应用程序，但这是应用程序中的“客户端”。
这使我想到了JAM API中的第二个字母。
您可能还会喜欢： 业内人士对Shopify所采用技术的关注。
蜜蜂
您可能以前曾经听说过“站在巨人的肩膀上”的说法。我发现这句话在这里非常相关。让我举两个例子。
传统上（想想LAMP堆栈），创建联系表单有些挑战。我们必须使用HTML和JavaScript创建一个表单，并且必须将数据从表单发送到后端（PHP）进行处理。服务器不仅必须处理数据，而且还必须配置并运行邮件服务器，以便可以从前端发送处理了数据的电子邮件。这需要Unix知识以及其他编程技能。
另一个示例是身份验证。身份验证通常很困难：我们需要将用户名/密码组合存储在数据库中，确保其安全性，生成Cookie和令牌，并对它们进行验证，等等。但是，当数据库负载增加两倍时，会发生什么？如果我们从未有过单独的身份验证数据库怎么办？我们如何分别缩放它们？
如今，有很多服务可以帮助我们更轻松地创建联系表和身份验证。Formspree是联系表单的一个示例。我们需要做的就是在action表单中添加一个指向的属性https://formspree.io/my@email.com，仅此而已。
jamstack：formspree主页
Formspree使添加联系表单变得容易。
以同样的方式，我们可以使用Netlify Identity或Auth0之类的服务来向我们的应用程序添加身份验证。
这一切的重点？有一些公司在其领域内是专家。Formspree仅处理表单和表单集成，Auth0仅处理身份验证，Cloudinary仅处理图像管理，Shopify处理电子商务和相关项目。这些公司（和其他公司）做一件事，并且做得很好。作为开发人员，我们应该利用他们的服务。这些组织几乎专有地公开了API或为我们提供了某种SDK，可以很容易地与我们的代码集成。
“这些公司（和其他公司）做一件事，并且做得很好。作为开发人员，我们应该利用其服务。”
在创建更复杂的应用程序（例如电子商务网站）时，问题通常是整个应用程序是一个巨大的，相互耦合的整体。管理界面与购物车，支付系统，产品清单和评论一起绑定到了主应用程序。一切都在一个屋檐下，管理小变化非常困难。使用JAMstack，我们可以打破僵局！
借助Shopify 及其API等服务，我们可以构建一个脱钩的电子商务平台并静态生成所有页面，以提高性能。这意味着，当用户查看产品列表时，我们不需要进行数据库查询即可收集有关产品的数据-在构建时就已经为我们完成了。
使用这种方法对应用程序所做的更改要容易得多，因为为了更改产品清单中的某些内容，我们不需要关闭整个站点。相反，我们可以进行更改，重新生成页面，并且所有内容都将为我们发布到CDN（前提是我们使用的是Netlify之类的服务）。
jamstack：netlify主页
该Netlify主页。
Shopify为开发人员提供了REST API和GraphQL API，以管理电子商务平台的管理端，并且再次与应用程序的其余部分完全分离。让他们担心扩展，负载平衡，安全性以及其他通常不是我们要做的事情。
但是，如果我们仍然需要执行服务器端代码怎么办？我们可以利用功能即服务（无服务器功能），例如AWS Lambda或Google Cloud Functions。这些通常以JavaScript编写，并且可以部署在供应商的服务器上。最终，我们得到的只是一个端点，可以从客户端JavaScript代码中调用该端点，然后依次调用我们的函数并返回结果。
还有一个名为Serverless，Inc的组织，它是Serverless Framework的创建者，它封装了所有其他服务，并允许我们使用CLI工具将其部署到任何提供商。
您可能还会喜欢： 解构Monolith：设计可最大程度提高开发人员生产力的软件。
无头CMS
通常，网站也需要数据。考虑一下博客或电子商务平台之类的东西。如果由于没有在请求时渲染网站而没有进行数据库查询的选项，那么如何确保仍然有可用数据？
请遇到无头的CMS。现在，这个名字很好奇。什么是无头CMS？考虑一下像WordPress这样的经典内容管理系统。WordPress是一个前端和后端紧密耦合的整体应用程序。没有办法将它们分开。
另一方面，无头CMS将数据层与表示层分开-换句话说，数据是在一个地方进行管理的，但是无头CMS并不关心该数据如何呈现以及在何处呈现。
请注意，一些无头CMS提供程序确实提供了UI，但这只是可以管理基础数据的管理界面-仍然不会影响将数据呈现给用户的方式。
无头CMS有两种类型：基于git和基于API。基于API的API允许我们将数据存储在数据库（SQL或NoSQL）中，并公开可通过HTTP调用使用的API端点。基于git的文件管理可在文件（例如Markdown）中找到的数据，并通过YAML前题将元数据提供给markdown文件。元数据类型是因素，例如帖子的作者或产品的价格。
部署
jamstack：火箭起飞
我们已经确定，作为开发人员，我们需要使用工具（静态站点生成器）预先渲染标记，然后需要以某种方式将该站点部署到CDN网络。
使用Netlify，AWS Amplify和Zeit Now之类的服务，可以通过多种方式发布和部署应用程序。它们都将我们预先渲染的标记推送到CDN。为什么这有用？CDN会自动进行负载平衡，并且它们将始终根据其地理位置将内容提供给最近的请求用户。
从历史上看，使CDN缓存无效是很困难的。使CDN缓存无效意味着如果有新版本的应用程序可用，则不应将其缓存在CDN上的任何位置，因为某些访问者可能会获取“陈旧”数据。如前所述，所有服务都会自动处理缓存失效。
此外，从开发人员的角度来看，可以非常迅速地部署原子更改。通常，工作流程如下所示：处理某些代码的开发人员执行git push和commit。部署服务会注意到有一个对git的新提交，并开始了重新部署过程，该过程包括预渲染和再次使缓存无效。
“由于堆栈的预渲染，非原始服务器方面，默认情况下站点将更快。”
诸如Netlify之类的服务将使所有部署保持其历史记录，而只需单击一下鼠标，即可回滚到该应用程序的先前版本。
使用JAMstack对最终用户和开发人员也有许多其他好处。最终用户显然将能够更快地接收到站点的更新/更改，并且由于堆栈中预先呈现的非原始服务器方面，因此默认情况下站点将更快。
开发人员和开发团队可以从失去的原因中受益匪浅。首先，他们不需要管理服务器，并且与标准开发相关的任务中添加的DevOps相关任务也更少。即使需要执行一些服务器端代码，无服务器功能也可以解决。
开箱即用也可以使用JAMstack中的安全性。如果我们考虑一下LAMP堆栈，则涉及到许多服务器-应用程序服务器，数据库服务器-彼此连接，每个服务器执行代码和查询。攻击表面积相当大。
在JAMstack中，没有服务器端代码执行，默认情况下，所有站点内容都是“静态”的，并且放置在CDN服务器上。攻击表面积小得多。
不过，请不要对术语“静态”感到困惑。JAMstack使用称为静态站点生成器的事实并不意味着该站点只是普通的旧HTML。
前面我们讨论了“ J”（JavaScript）用于向应用程序添加动态功能和交互性。客户端JavaScript可用于通过使用API??，使用SDK甚至增强水合作用来增强应用程序。
您可能还会喜欢： 网站安全性：改善前端安全性而不被黑客入侵的13种方法。
对企业有利
企业还可以利用一个事实，即使用JAMstack计划项目要容易得多，并且成本也要高得多。无需购买服务器即可轻松进行成本计算，而可以购买服务时间，这很容易计算。一般而言，由于无需管理物理服务器，因此对操作的依赖较少。
此外，谈到成本，必须提到开发人员的成本。之前，我们提到过开发人员如何专注于开发，这意味着他们的时间花在了应该做的事情上，而不是在DevOps和其他与基础架构管理相关的任务上，这也节省了一些成本。
JAMstack不仅是为其带来的开发利益，而且为其可以提供的业务优势的可靠决定。
模板图标
项目管理：规划您的Web设计工作流程
将免费的项目管理副本：规划Web设计工作流发送到收件箱。
电子邮件
输入您的电子邮件地址
输入您的电子邮件-我们还将向您发送与Shopify相关的营销电子邮件。您可以随时取消订阅。注意：该指南不会发送到基于角色的电子邮件，例如info @，developer @等。
我们的虚拟齿轮正在转动。
请注意，
我们的电子邮件最多可能需要15分钟
才能到达您的收件箱。
天生充满活力
JAMstack对最终用户和开发人员都有很多好处，当然，您应该尝试一下它。它提供了更好的用户体验和更好的整体开发工作流程。不要害羞地利用一些出色的服务来使您本来应该静态的应用程序自然地动态化。
