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

圖片提供：Netlify

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

過去，LAMP架構(gòu)主導(dǎo)動態(tài)網(wǎng)站的開發(fā)。隨後，MEAN架構(gòu)為新一代Web應(yīng)用奠定了基礎(chǔ)。如今，隨著API和可複用組件的興起，靜態(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可將動態(tài)網(wǎng)站轉(zhuǎn)換為靜態(tài)網(wǎng)站，從而顯著提升速度、增強(qiáng)安全性並改善SEO。這可以通過使用靜態(tài)站點(diǎn)生成器創(chuàng)建文章和頁面、將靜態(tài)內(nèi)容與代碼倉庫同步以及自動化部署流程來實現(xiàn)。
• 與傳統(tǒng)的全棧開發(fā)相比，Jamstack利用CDN進(jìn)行全球部署、自動化流水線和預(yù)渲染頁面來提高速度。它還允許通過API和微服務(wù)解耦前端和後端，並使用單一技術(shù)?！狫avaScript。

什麼是Jamstack？

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

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

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

這只是炒作嗎？

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

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

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

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

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

當(dāng)然，JavaScript並非萬能藥。您很可能不會用它進(jìn)行數(shù)據(jù)分析或AI。但對於Web開發(fā)而言，幾乎沒有什麼事情是您無法通過JavaScript方法使用的API來完成的，因為很可能有人已經(jīng)為此創(chuàng)建了微服務(wù)。

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

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

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

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

耦合與解耦與無頭

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

相反，解耦是指後端和前端是分別管理的——這意味著數(shù)據(jù)庫和管理工具將位於一個服務(wù)器上，而前端位於另一個服務(wù)器上。當(dāng)然，需要一種媒介來連接兩者，通常是API。此外，由於後端現(xiàn)在實際上與前端分離，因此實際上可能存在多個位於不同位置的前端！ （想想使用相同引擎的不同店面，例如Shopify。）

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

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

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

另一方面，鬆散耦合的軟件組件的工作方式更像可以移除或替換的插件，並且功能可能會發(fā)生變化，但應(yīng)用程序的核心仍然可以工作。這一原則允許通過第三方API（通常稱為“微服務(wù)”）“外包”功能——因為它們提供本身並非應(yīng)用程序不可或缺部分的輔助功能（圖像調(diào)整大小、登錄、存儲）。

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

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

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

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

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

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

Jamstack的實際示例

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

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

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

簡而言之，該流程如下：

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

但是……

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

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

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

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

您實際上是如何做到的？

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

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

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

簡而言之，該流程如下：

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

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

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

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

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

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

您實際上是如何做到的？

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

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

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

LAMP/MEAN堆棧 Jamstack

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

您還可以使用Jamstack做什麼？

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

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

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

結(jié)論

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

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

Jamstack基礎(chǔ)

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

Jamstack基礎(chǔ)知識

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

Jamstack工具

• Gatsby入門：構(gòu)建您的第一個靜態(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)將前端與後端解耦，從而實現(xiàn)更好的性能、安全性以及開發(fā)人員體驗。

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

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

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

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

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