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中文網其他相關文章！