Jamstack：構(gòu)建更快速、安全、可擴(kuò)展網(wǎng)站的現(xiàn)代化架構(gòu)

圖片提供：Netlify

近年來，Web開發(fā)技術(shù)日新月異。本文將介紹Jamstack架構(gòu)，闡明其概念和優(yōu)勢。

過去，LAMP架構(gòu)主導(dǎo)動(dòng)態(tài)網(wǎng)站的開發(fā)。隨后，MEAN架構(gòu)為新一代Web應(yīng)用奠定了基礎(chǔ)。如今，隨著API和可復(fù)用組件的興起，靜態(tài)網(wǎng)站再次成為潮流。這是一種“回歸基礎(chǔ)”的方式，但并非完全如此。

核心要點(diǎn)：

• Jamstack是一種現(xiàn)代化的Web開發(fā)架構(gòu)，有助于創(chuàng)建速度更快、安全性更高、可擴(kuò)展性更好的網(wǎng)站。它代表著JavaScript (J)、APIs (A)和Markup (M)的結(jié)合，其工作方式已為全球眾多開發(fā)者帶來啟示。
• Jamstack可將動(dòng)態(tài)網(wǎng)站轉(zhuǎn)換為靜態(tài)網(wǎng)站，從而顯著提升速度、增強(qiáng)安全性并改善SEO。這可以通過使用靜態(tài)站點(diǎn)生成器創(chuàng)建文章和頁面、將靜態(tài)內(nèi)容與代碼倉庫同步以及自動(dòng)化部署流程來實(shí)現(xiàn)。
• 與傳統(tǒng)的全棧開發(fā)相比，Jamstack利用CDN進(jìn)行全球部署、自動(dòng)化流水線和預(yù)渲染頁面來提高速度。它還允許通過API和微服務(wù)解耦前端和后端，并使用單一技術(shù)棧——JavaScript。

什么是Jamstack？

Jamstack是重新定義現(xiàn)代Web，以構(gòu)建更快、更安全的網(wǎng)站的一種架構(gòu)。這些網(wǎng)站具有更好的可擴(kuò)展性，并且使用合適的工具集，開發(fā)和維護(hù)也更容易（更有趣）。

讓我們分解一下這個(gè)術(shù)語：

• J代表JavaScript。 自1995年Netscape推出JavaScript以來，它已經(jīng)發(fā)展壯大。借助響應(yīng)式和漸進(jìn)式庫，您可以設(shè)計(jì)行為與移動(dòng)應(yīng)用幾乎相同的Web應(yīng)用。
• A代表APIs。 您無需自己編寫所有功能，而是可以依賴第三方處理大量任務(wù)。
• M代表Markup。 您可以重用已開發(fā)的組件，或創(chuàng)建更容易維護(hù)的新組件。

這只是炒作嗎？

某種程度上是的。 “Jamstack”（最初風(fēng)格化為JAMstack）這個(gè)術(shù)語是由Netlify公司創(chuàng)造的，用于推廣其“用于自動(dòng)化現(xiàn)代Web項(xiàng)目的全能平臺(tái)”。 Jamstack背后的原則并非全新，因?yàn)閃eb組件和API已經(jīng)存在了一段時(shí)間。

但與Ajax（異步JavaScript和XML）這個(gè)術(shù)語當(dāng)年由另一家公司Adaptive Path創(chuàng)造的情況非常相似——盡管使Ajax成為可能的XMLHttpRequest (XHR) API也存在了一段時(shí)間，但Ajax和JAMstack都是對(duì)現(xiàn)有理念的令人耳目一新的改進(jìn)，具有被社區(qū)迅速采用的合法用途。這種炒作是當(dāng)之無愧的：這種工作方式已為全球眾多開發(fā)者帶來啟示。

靜態(tài)網(wǎng)站？

“靜態(tài)網(wǎng)站”是“動(dòng)態(tài)網(wǎng)站”的對(duì)立面，對(duì)嗎？那么，如何僅使用簡單的HTML文件提供豐富而動(dòng)態(tài)的交互呢？答案是JavaScript。

自第一次瀏覽器大戰(zhàn)以來，JavaScript已經(jīng)發(fā)生了很大的變化，隨著Node.js的出現(xiàn)以及React、Angular和Vue.js等庫的出現(xiàn)，它已經(jīng)鞏固了自己作為通用編程語言的地位。設(shè)計(jì)高級(jí)用戶界面（UI）的可能性是無限的。

當(dāng)然，JavaScript并非萬能藥。您很可能不會(huì)用它進(jìn)行數(shù)據(jù)分析或AI。但對(duì)于Web開發(fā)而言，幾乎沒有什么事情是您無法通過JavaScript方法使用的API來完成的，因?yàn)楹芸赡苡腥艘呀?jīng)為此創(chuàng)建了微服務(wù)。

而且，如果您能夠?qū)⑺羞@些過程與標(biāo)記封裝到可復(fù)用的組件中——您可以在需要特定功能時(shí)隨時(shí)插入——那么您每次都可能節(jié)省數(shù)小時(shí)的工作時(shí)間。

這就是J·A·M堆棧：JavaScript、API、標(biāo)記。

解耦、無頭、微服務(wù)、無服務(wù)器……抱歉，這是什么？

所有這些都是Web開發(fā)中的熱門話題，它們都密切相關(guān)，但并不完全相同。您會(huì)經(jīng)常聽到這些術(shù)語，因此讓我們從一開始就澄清一些術(shù)語。

耦合與解耦與無頭

耦合是指網(wǎng)站的內(nèi)容是在網(wǎng)站的后端（數(shù)據(jù)庫所在的位置，例如WordPress管理面板）創(chuàng)建、管理和存儲(chǔ)的。然后從后端提取此內(nèi)容，并通過前端界面（例如WordPress模板）在瀏覽器中表示。在某種程度上，“耦合”應(yīng)用程序是傳統(tǒng)意義上的“全?！睉?yīng)用程序，后端和前端是同一個(gè)應(yīng)用程序的不同方面。

相反，解耦是指后端和前端是分別管理的——這意味著數(shù)據(jù)庫和管理工具將位于一個(gè)服務(wù)器上，而前端位于另一個(gè)服務(wù)器上。當(dāng)然，需要一種媒介來連接兩者，通常是API。此外，由于后端現(xiàn)在實(shí)際上與前端分離，因此實(shí)際上可能存在多個(gè)位于不同位置的前端?。ㄏ胂胧褂孟嗤娴牟煌昝妫鏢hopify。）

簡而言之，無頭軟件根本沒有前端或表示層。例如，無頭CMS可以生成靜態(tài)內(nèi)容并將其推送到任何地方：移動(dòng)應(yīng)用程序、物聯(lián)網(wǎng)設(shè)備、靜態(tài)網(wǎng)站。誠然，這也是一種“解耦”情況，但在這里您甚至可能不需要API。想想一個(gè)將帖子導(dǎo)出為靜態(tài)HTML文件以供服務(wù)的WordPress引擎：這就是無頭。事實(shí)上，您現(xiàn)在就在一個(gè)以這種方式生成的頁面上。

單體式（緊密耦合）與微服務(wù)（松散耦合）

簡單地說，單體式可以定義為作為一個(gè)整體構(gòu)建的軟件。示例可能包括移動(dòng)應(yīng)用程序、大多數(shù)可以在您的計(jì)算機(jī)上安裝的應(yīng)用程序以及WordPress等Web應(yīng)用程序。這些應(yīng)用程序仍然可以具有內(nèi)部“模塊”或“組件”，但我們說這些是緊密耦合的，因?yàn)樗鼈兪菓?yīng)用程序不可或缺的一部分，沒有它們，應(yīng)用程序?qū)o法工作。

另一方面，松散耦合的軟件組件的工作方式更像可以移除或替換的插件，并且功能可能會(huì)發(fā)生變化，但應(yīng)用程序的核心仍然可以工作。這一原則允許通過第三方API（通常稱為“微服務(wù)”）“外包”功能——因?yàn)樗鼈兲峁┍旧聿⒎菓?yīng)用程序不可或缺部分的輔助功能（圖像調(diào)整大小、登錄、存儲(chǔ)）。

無服務(wù)器與傳統(tǒng)計(jì)算

誠然，“無服務(wù)器”有點(diǎn)用詞不當(dāng)。無論您從事何種計(jì)算工作，都將涉及服務(wù)器。但是，您訪問和管理服務(wù)器的方式可能大相徑庭。

在傳統(tǒng)模型中，您可能擁有一個(gè)實(shí)際的物理服務(wù)器（有時(shí)稱為裸機(jī)），或者是一個(gè)虛擬專用服務(wù)器，其中資源分配給您——以及其他用戶——在一個(gè)物理服務(wù)器上。資源是有限的，無論您是否使用100%的資源，您都必須為它們付費(fèi)，就好像您使用了它們一樣。

在無服務(wù)器模型中，許多服務(wù)器之間相互連接，提供了一個(gè)巨大的資源池。您只需在需要時(shí)提取所需資源，并根據(jù)需要進(jìn)行擴(kuò)展（向上和向下）。您無法真正確定任何物理服務(wù)器是您的——您只知道無論資源來自何處，資源都在那里。

傳統(tǒng)模型 無服務(wù)器模型

具有有限資源的物理服務(wù)器 無限資源池 容易出現(xiàn)故障（例如硬盤故障） 更可靠的架構(gòu)* 可擴(kuò)展性有限 無限可擴(kuò)展性 支付所有費(fèi)用，包括空閑服務(wù) 按使用付費(fèi)（按需付費(fèi)） 簡單易用 需要學(xué)習(xí)實(shí)施 **請注意，硬盤、CPU和內(nèi)存芯片故障仍然會(huì)發(fā)生。但由于資源是透明分配的，因此即使硬件發(fā)生故障和更換，您也不會(huì)注意到。

Jamstack的實(shí)際示例

這些內(nèi)容很多，特別是如果您不熟悉這些概念的話。因此，讓我們休息一下理論，看看一些Jamstack在現(xiàn)實(shí)生活中的實(shí)際應(yīng)用。

案例研究1：將WordPress轉(zhuǎn)換為靜態(tài)網(wǎng)站，速度提升10倍

如果靜態(tài)是最佳選擇，那么還有什么比將動(dòng)態(tài)WordPress (WP)博客轉(zhuǎn)換為靜態(tài)博客更好呢？通過這樣做，我們將至少將頁面加載速度和延遲降低一個(gè)數(shù)量級(jí)，極大地增強(qiáng)安全性，并同時(shí)改善我們的SEO。

簡而言之，該流程如下：

1. 使用靜態(tài)站點(diǎn)生成器 (SSG) 從WP創(chuàng)建文章和頁面，但采用靜態(tài)格式（文本、Markdown、HTML）。
2. 將靜態(tài)內(nèi)容與GitHub、GitLab或Bitbucket上的代碼倉庫同步。
3. 自動(dòng)化部署流程，以便每次代碼倉庫發(fā)生更改時(shí)，更改都會(huì)立即上線到全球CDN。
4. 放松身心，享受免費(fèi)托管，擁有安全快速的網(wǎng)站和自動(dòng)部署。?

但是……

當(dāng)然，這會(huì)產(chǎn)生很多問題：

• 管理面板怎么辦？
• 類別和RSS提要怎么辦？
• 我現(xiàn)在如何管理內(nèi)容？
• 評(píng)論部分和時(shí)事通訊怎么辦？

此時(shí)，您可以告別WP管理面板，因?yàn)閺默F(xiàn)在開始，您將使用SSG生成內(nèi)容。事實(shí)上，像Jekyll這樣的SSG專門用于構(gòu)建博客，而像Gatsby.js這樣的SSG已經(jīng)包含了所有功能。

管理內(nèi)容（例如修改現(xiàn)有帖子）是無頭CMS發(fā)揮作用的地方。對(duì)于評(píng)論和時(shí)事通訊，您是否已經(jīng)在使用外部API（例如Disqus和Mailchimp）？

您實(shí)際上是如何做到的？

我們在這里無法涵蓋SSG和無頭CMS的來龍去脈，但請關(guān)注本系列的后續(xù)部分。我們將提供一個(gè)將WordPress網(wǎng)站遷移的逐步指南。

案例研究2：使用自動(dòng)流水線免費(fèi)托管靜態(tài)網(wǎng)站

在Jamstack社區(qū)中，您會(huì)經(jīng)常聽到“免費(fèi)”——值得慶幸的是，它不是免費(fèi)的，因?yàn)?em>您仍然必須告訴我們您的信用卡號(hào)碼免費(fèi)。

簡而言之，該流程如下：

在本例中，我們將采用我們的靜態(tài)網(wǎng)站（例如，我們在案例研究1中遷移的博客）并將其上線：

1. 設(shè)置GitHub、GitLab或Bitbucket代碼倉庫。
2. 部署到Netlify、GitLab Pages或GitHub Pages。

此時(shí)，代碼倉庫的每次更改都會(huì)自動(dòng)觸發(fā)新的部署（通過Webhook），如果出現(xiàn)問題，可以非常優(yōu)雅地回滾。

為什么公司免費(fèi)提供這些服務(wù)？

將HTML文件放到已部署的CDN上的開銷很小。請記住，不涉及實(shí)際計(jì)算，沒有PHP渲染。除非您托管一個(gè)非常受歡迎的網(wǎng)站，該網(wǎng)站會(huì)消耗大量帶寬，否則公司不介意提供一些托管服務(wù)。這樣做可以為他們帶來良好的宣傳。

通過贈(zèng)送大量免費(fèi)贈(zèng)品，公司也會(huì)將您鎖定。當(dāng)您需要高級(jí)服務(wù)時(shí)（如果您的業(yè)務(wù)發(fā)展壯大，您將需要），您已經(jīng)與他們合作了。這很公平——而且，那時(shí)您無論如何都需要開發(fā)一個(gè)臨時(shí)解決方案來解決您的問題或付費(fèi)使用服務(wù)。

您實(shí)際上是如何做到的？

Netlify或GitHub/GitLab這兩種情況都非常簡單，只需要最少的努力。（盡管如此，我們將在接下來的文章中詳細(xì)介紹該過程。）

Jamstack與全棧開發(fā)的比較

讓我們看看這種新方法與LAMP或MEAN堆棧相比如何：

LAMP/MEAN堆棧 Jamstack

運(yùn)行網(wǎng)站的Web服務(wù)器 到CDN的全球部署 FTP/SSH上傳，服務(wù)器重啟 自動(dòng)化流水線 運(yùn)行時(shí)渲染頁面 預(yù)渲染頁面以提高速度 單體式應(yīng)用程序（例如WordPress） API和微服務(wù)（前端/后端解耦） 全棧（前端和后端語言） 單一技術(shù)棧（“到處都是JavaScript”）

您還可以使用Jamstack做什么？

希望此時(shí)您已經(jīng)了解了創(chuàng)建網(wǎng)站的好處。但您可能仍然對(duì)如何在沒有后端處理的情況下執(zhí)行最基本的操作持懷疑態(tài)度，例如用戶登錄以及在沒有關(guān)系數(shù)據(jù)庫 (RDBMS) 的情況下管理或存儲(chǔ)動(dòng)態(tài)內(nèi)容。

以下是您可以使用Jamstack執(zhí)行的一些其他示例：

• 使用靜態(tài)網(wǎng)站實(shí)現(xiàn)無服務(wù)器數(shù)據(jù)庫
• 身份即服務(wù) (IDaaS)：無狀態(tài)身份驗(yàn)證
• 無頭內(nèi)容管理系統(tǒng)
• 在靜態(tài)網(wǎng)站中使用無服務(wù)器函數(shù)
• 多用途表單的管理
• 處理多平臺(tái)通知
• 無頭購物車
• 響應(yīng)式搜索

結(jié)論

事物的發(fā)展是不可避免的，尤其是在IT領(lǐng)域。以前是LAMP堆棧，然后是MEAN堆?！，F(xiàn)在是Jamstack，五年到十年后將是其他東西。最好接受這些變化并使它們成為我們自己的！

學(xué)習(xí)新的做事方法聽起來可能很麻煩，但它也可以重新激發(fā)您對(duì)開發(fā)的熱情。您可能會(huì)發(fā)現(xiàn)自己花費(fèi)更少的時(shí)間維護(hù)服務(wù)器和擔(dān)心安全問題。您可能會(huì)發(fā)現(xiàn)開發(fā)需要更少的努力，并且您的客戶更滿意。您甚至可能會(huì)因此而更有競爭力（并能夠要求加薪）。?

Jamstack基礎(chǔ)

請關(guān)注有關(guān)此主題的更多文章。雖然多年來我們一直在介紹Jamstack，但它已經(jīng)成為一門獨(dú)立的學(xué)科和實(shí)踐。我們將為您提供成為Jamstack專業(yè)人士所需的教程，并在此頁面的索引中進(jìn)行更新。您還可以通過我們的RSS提要或社交媒體隨時(shí)了解最新信息。

Jamstack基礎(chǔ)知識(shí)

• Jamstack簡介：構(gòu)建安全、高性能的網(wǎng)站
• Jamstack工具、API和服務(wù)：全面比較
• 如何使用自動(dòng)流水線免費(fèi)托管靜態(tài)網(wǎng)站
• 如何從WordPress遷移到靜態(tài)站點(diǎn)生成器

Jamstack工具

• Gatsby入門：構(gòu)建您的第一個(gè)靜態(tài)網(wǎng)站
• Eleventy入門

以及更多正在進(jìn)行中的工作。

關(guān)于Jamstack的常見問題

什么是Jamstack？Jamstack代表“JavaScript、API和標(biāo)記”。這是一種構(gòu)建網(wǎng)站和Web應(yīng)用程序的架構(gòu)，它強(qiáng)調(diào)將前端與后端解耦，從而實(shí)現(xiàn)更好的性能、安全性以及開發(fā)人員體驗(yàn)。

Jamstack與傳統(tǒng)Web開發(fā)有何不同？在傳統(tǒng)的Web開發(fā)中，服務(wù)器負(fù)責(zé)在每個(gè)請求中動(dòng)態(tài)生成HTML。另一方面，Jamstack在構(gòu)建過程中預(yù)先構(gòu)建頁面，直接向客戶端提供靜態(tài)資產(chǎn)，并利用API實(shí)現(xiàn)動(dòng)態(tài)功能。

Jamstack架構(gòu)的關(guān)鍵原則是什么？Jamstack的關(guān)鍵原則包括預(yù)渲染、以API為中心的開發(fā)以及使用全球內(nèi)容交付網(wǎng)絡(luò) (CDN)。預(yù)渲染涉及在構(gòu)建階段生成靜態(tài)HTML，而API處理動(dòng)態(tài)功能。

使用Jamstack的好處是什么？Jamstack 提供了諸多好處，例如由于靜態(tài)站點(diǎn)生成而提高的性能、通過減少服務(wù)器的攻擊面而增強(qiáng)的安全性以及借助CDN簡化的可擴(kuò)展性。此外，它通常還會(huì)帶來更好的開發(fā)人員體驗(yàn)。

我可以在Jamstack應(yīng)用程序中使用服務(wù)器端功能嗎？是的，Jamstack應(yīng)用程序可以通過無服務(wù)器函數(shù)或API利用服務(wù)器端功能。無服務(wù)器函數(shù)允許您響應(yīng)事件執(zhí)行服務(wù)器端代碼，從而提供動(dòng)態(tài)功能，同時(shí)保持靜態(tài)站點(diǎn)交付的優(yōu)勢。

Jamstack適用于所有類型的網(wǎng)站嗎？Jamstack適用于各種各樣的網(wǎng)站，從簡單的博客和營銷網(wǎng)站到復(fù)雜的Web應(yīng)用程序。但是，其適用性取決于項(xiàng)目的具體要求以及對(duì)實(shí)時(shí)服務(wù)器端處理的需求。

以上是jamstack簡介：建立安全的高性能站點(diǎn)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！