如何使用 ACF + WPGraphQL 構建您的第一個無頭 WordPress 項目

在 WordPress 開發方面，每個人都有自己喜歡的工具，而在沒有這些工具的情況下構建無頭網站的想法可能令人望而生畏。 幸運的是，WordPress 開發人員最喜歡的兩個工具——ACF 和 WPGraphQL——可以幫助您涉足無頭開發。

在本次會議中，WP Engine 高級開發倡導者 Jeff Everhart 通過使用 Atlas 在短短幾分鐘內構建一個演示站點來展示基礎設施的來龍去脈！

會議幻燈片：

成績單：

JEFF EVERHART： 大家好嗎？ 我叫 Jeff Everhart，是 WP Engine 的高級開發倡導者。 非常感謝您今天參加我關於使用 ACF 和 WP GraphQL 構建您的第一個無頭 WordPress 項目的演講。 在開始構建之前，我總是喜歡提供一些關於無頭 WordPress 是什麼的背景信息。 似乎 headless 不再是一個小眾術語，而是越來越主流，所以我會盡量保持簡短的解釋。

Headless WordPress 的核心是通過 API 使用 WordPress CMS 來支持其他類型的應用程序。 如果我們查看這張幻燈片中的圖表，當用戶請求 site.com/page 時，不是讓 WordPress 處理該請求，而是 JavaScript 應用程序響應該路由。 它會查看路徑，確定需要從 WordPress 或其他來源獲取哪些數據，調用這些 API，並生成對用戶的響應。

請務必注意，Node.js 運行時槽中的內容實際上可以是任意數量的不同類型的應用程序或客戶端。 我們已經看到使用所有最流行的框架構建的移動應用程序或網站的各種示例都使用了這種模式並取得了巨大成功。 現在您已經很好地了解什麼是無頭 WordPress，讓我們來看看我們將在今天的項目中使用的技術堆棧。

在我們的最底層，我們將使用 WP GraphQL 作為我們的 API。 WP GraphQL 將您的 WordPress 後端變成一個強大的 GraphQL API。 它執行與原生 WordPress 和核心 REST API 執行的所有相同的角色和功能安全檢查。 WP GraphQL 是開發無頭應用程序的絕佳選擇，因為使用其聲明式查詢語言，我們可以跨該內容工藝查詢不同的內容類型。 因此，在同一個請求中獲取帖子、頁面及其類別。

現在，讓我們看看如何使用 WordPress CMS 構建和建模一些更複雜的數據。 許多處理無頭項目的開發人員需要建模和存儲不同的數據，對吧？ 擴展到 WordPress 的典型帖子或頁面之外。 ACF 或高級自定義字段是為這些自定義字段建模的好工具。 在即將發布的版本中，它將變得更加強大，允許您直接在該插件的免費版本的 UI 中註冊帖子類型和分類法。

它使所有數據都可以通過 REST API 輕鬆獲得，但需要安裝 WP GraphQL 擴展才能將一些字段數據添加到我們的 GraphQL 架構中。 就個人而言，我真的很高興看到這個插件的發展，因為它對無頭開發人員來說變得更加強大。

現在，我們可以對複雜數據進行建模並通過 WP GraphQL 對其進行查詢，我們需要一些方法來為我們的用戶創建這些現代 Web 體驗，同時還支持已經了解並喜愛 WordPress 的內容編輯器。 這就是 Faust 的用武之地。Faust 是一個由兩部分組成的框架，包括一個 WordPress 插件和一個基於 Next.js 的 JavaScript 框架。 他們共同努力，使構建無頭 WordPress 網站變得簡單而直觀。

它增加了對帖子預覽和開箱即用身份驗證等功能的支持，您可以在現代 JavaScript 中體驗重新想像的 WP 模板層次結構體驗。 Faust.js 旨在成為一個高度可擴展的平台，並附帶一個插件系統和一個管理欄，您可以使用它們來自定義和創建支持您的特定用例的體驗。

最後但同樣重要的是，我們需要一些方法在本地和生產環境中使用這些工具。 使用 local 和 WP migrate，我將這個項目所需的所有 WordPress 資源提取到一個 zip 文件中，您可以將其拖放到本地以開始使用。 完成站點構建後，我們可以將工作推送到 Atlas 平台。 Atlas WP Engine 的多合一無頭託管解決方案結合了您的 WordPress 後端和 Node.js 容器，所有這些都經過調整以通過一個無縫儀表板協同工作。

現在您已經很好地理解了我們將在今天的演示中使用的所有工具，讓我們直接開始構建吧。 打開此幻燈片中的 URL 以在瀏覽器中訪問演示代碼。 我已嘗試讓這種體驗盡可能簡單，但我們將在接下來的 25 分鐘內介紹很多內容，所以請隨時觀看並回頭參考這個 GitHub 存儲庫和稍後記錄本次會議，以便在會議結束後繼續工作。 如果解碼的其餘部分是一場車展，那麼本次會議就是關於構建引擎。 雙關語完全是故意的。

現在我們已經打開了 GitHub 存儲庫，讓我們開始吧。 我建議您做的第一件事是在您自己的帳戶中創建此存儲庫的分支。 如果您查看此存儲庫中包含的內容，您將在自述文件中看到一堆示例代碼以及一些分步說明，了解我們將在本演示文稿中執行的所有操作。 事實上，我們會直接從這個存儲庫複製和粘貼到您的項目中。 要在本地克隆它，讓我們繼續在終端內運行 Git clone 命令。

下載只需一秒鐘，然後一旦我們下載了項目，讓我們繼續並將我們的目錄更改為該項目目錄。 從那裡，我將運行一個命令在 VS Code 中打開這個項目，但你應該隨意使用你想要的任何代碼編輯器。 由於 VS Code 已經有一個集成終端，我可以清理它，然後繼續關閉 iTerm。 現在，我們可以過渡到定位我們的 WordPress 本地站點。 為此，我們將在 Finder 中打開該項目，然後找到我為您準備的無頭 WP 演示 zip 文件。

我們將該 zip 文件直接拖放到本地開發環境中，本地將開始為您解壓縮和引導演示 WordPress 站點的過程。 我們幾乎可以堅持使用默認設置，然後本地只需幾分鐘即可為您創建一個新的 WordPress 站點。 現在，這是 WP migrate pro 的一個很棒的功能，它允許我將任何站點導出為 zip 並將其直接拖放到本地，這樣我就可以非常快速地將生產站點帶到我的本地機器上，而不管平台是什麼。

安裝完成後，您可能想要繼續並信任此 SSL 證書，然後我們將繼續並在 WP Admin 中打開此項目。 從那裡開始，我們將繼續並最小化本地，因為它已經在運行，我們真的不需要對它做任何其他事情。 因此，從那裡，我們將打開我們的存儲庫，您將在其中找到我已經為該演示站點創建的管理員用戶名和密碼。 您應該能夠使用這些憑據繼續並登錄到 WP 管理儀表板。 從那裡開始，我們將花費一秒鐘的時間來了解這個本地 WordPress 安裝。

我們要做的第一件事是查看隨此 WordPress 站點安裝的插件。 我們看到了諸如用於數據建模的高級自定義字段之類的東西。 我們有犯規來啟用我們的一些無頭功能，WP GraphQL 充當我們網站的 API，然後 WP GraphQL 用於 ACF 擴展以顯示一些 ACF 字段組。 現在，讓我們也看看這些帖子。 如果您查看我在這個項目中預先填充的所有不同的演示帖子，我們可以看到我們有許多不同的帖子，有很多不同的類別。

如果我們查看每個帖子的內容，我們會發現我們有一堆正文內容、一些圖像、特色圖像和一些我們已經創建並預填充的 ACF 字段組。 因此，讓我們更詳細地了解一下字段組。 如果我們打開 ACF 菜單，您會看到我們創建了兩個現場組——食物資源和甜蜜混音帶。 我們先來看看食物資源。

這只是一個非常基本的字段組，有兩個單獨的字段——文本和 URL。 對於其中的每一項，我都選中了 Show in GraphQL 選項，以便它們出現在 GraphQL 中。 然後我還在現場組級別檢查了該選項。 此外，我有一些條件邏輯來確定何時呈現這些帖子——如果帖子類別等於食物。 讓我們看看甜蜜的混音帶是什麼樣子的。

我們會看到這看起來與我們的食物資源非常相似，而且我們有幾個不同的領域。 每個選項都選中了 Show in GraphQL 選項，此外還選中了字段組級別的選項。 我們可以看到 WP GraphQL 擴展為我們提供了一些我們可能不需要的不同設置。 此外，我們可以看到我們也根據帖子類別有條件地顯示它。

那麼現在，讓我們來看看 WP GraphQL 以及它在工具方面給我們帶來了什麼。 如果我們打開 GraphQL 菜單，我們將進入圖形化 IDE。 現在，這是一個交互式開發環境，允許您使用 WP GraphQL 創建查詢。 我們可以指定我們想要，比如說，前 10 個帶有類別的帖子，並在此處也包括我們的附加 ACF 字段。 當我們單擊“運行”按鈕時，我們會從我們的 WordPress 站點取回與該查詢中的數據相匹配的實時數據。

如果需要，我們可以打開 Query Composer 窗口並可視化地組合查詢的各個方面。 因此，如果您不確定特定 WordPress 對像上可能包含哪些特定字段或數據，這將是一個非常方便的工具。 您可以使用查詢編輯器實時探索和運行這些查詢。 現在，讓我們通過打開 Faust 設置菜單來配置 Faust。 正如我在介紹中所說，Faust 實際上是一個由兩部分組成的框架，由一個 WordPress 插件和您的前端代碼庫組成。

所以如果我們回到 WordPress 插件設置菜單，我們可以看到我們已經為前端站點 URL 設置了這個選項，它將指向我們的前端站點的地址。 在密鑰選項的正下方，我們將繼續並單擊重新生成以生成可用於演示項目的唯一密鑰。 從那裡，讓我們真正跳回 JavaScript 代碼庫，我們將運行此命令將示例環境變量文件複製到我們可以在我們的站點中使用的文件中。

一旦我們運行它，命令打開 .env.local 文件，我們將進行一些更改。 第一件事是將下一個公共 WordPress URL 選項替換為您本地站點的位置。 所以 ACF.WPEngine.local。 然後我們還將獲取該密鑰值並將其用於我們的 Faust 密鑰。 確保我們也想取消註釋，然後最後一個環境變量實際上只對測試和本地開發有用，這樣您就可以解決在連接到本地開發環境時可能遇到的任何 SSL 問題。

從那裡，我們將要運行 NPM Install 來安裝我們項目的所有依賴項，然後一旦完成，我們就可以啟動它並運行 NPM Run Dev 來啟動我們的項目。 編譯只需要一秒鐘，但一旦完成，我們就可以在瀏覽器中打開 localhost:3000，我們應該可以看到我們的 Faust 站點正在運行。

渲染完成後，您可以看到 Faust 已經在為我們處理一些魔法。 如果我們查看右上角的菜單，我們可以看到它已經從我們在 WordPress 後端定義的菜單中提取頁面和內容，如果我們跳回 WordPress 管理，我們可以查看此連接如何更詳細地工作。

因為Faust插件知道我們前端URL的地址，所以它重寫了很多鏈接，比如那些預覽鏈接，這樣當你在瀏覽器中打開它們時，它們在前端站點URL中打開，這樣你'獲得您的內容在前端的外觀的真實實時預覽。

現在，讓我們更深入地研究 Faust JavaScript 項目的結構。 如果您熟悉在 Next.js 中工作，您可能已經使用頁面的目錄來創建實現路由的頁面組件。 您仍然可以在 Faust 中執行此操作，但它建立在這個概念之上，提供了一個名為 WordPress 節點的包羅萬象的路由，該路由允許您獲取 WordPress 管理的任何 URI 並將其解析為特定的內容片段。

然後，我們獲取有關該內容項的一些額外數據，並將其向下傳遞到我們的組件，以便我們可以將那一段單獨的內容解析為 WP 模板文件夾中的特定模板。 這與模板層次結構概念和傳統的 WordPress 主題以及許多命名約定非常相似。 比方說，frontpage.js是我們網站的首頁，而page.js負責渲染頁面內容類型的東西。 single.js 用於呈現單個帖子。

現在，讓我們開始讓我們的 frontpage.js 更動態一點。 好的 。 因此，首先，我們將繼續打開我們的 front page.js 文件，給我們自己多一點工作空間。 所以如果我們查看這個文件的內容，我們可以看到主要有三個部分。 這是我們渲染的組件本身，一個附加到組件的查詢屬性，每次我們渲染組件時都會運行它，然後是我們可以在底部傳遞的一些變量。

如您所見，有兩種真正主要的使用方法。 在組件內部使用 use query hook，或者它可以作為 props 傳遞到組件本身，你將在稍後的示例中看到。 因此，讓我們跳回存儲庫並開始執行步驟 2.1 以更新我們的 frontpage.js 的查詢。 所以我們將復制它，然後返回到圖形 IDE 並在那裡玩一會。 所以我們在剪貼板上的這個查詢應該獲取前 10 個帖子，並獲取與每個帖子相關的幾條數據。

因此，如果我們單擊並運行它，我們會發現一切正常。 因此，我們要繼續將其添加到我們的組件查詢屬性中。 所以我們會找到一個好的地方來做這件事，然後把它粘貼在那裡，然後做一些重新格式化。 所以它所做的就是將查詢的這個單獨部分添加到該查詢本身。 所以我們仍然需要使該查詢的結果對我們組件的其餘部分可用，因此我們將繼續添加這一行，該行僅將發布結果提取到我們可以使用的變量中。

現在，使這個主頁動態化的下一步實際上是創建一個組件來呈現這些帖子摘錄。 因此，我們將這樣做並在 components 文件夾中創建幾個文件，我會在這裡提到 - 我將繼續並在帖子摘錄文件夾中創建一個 postexcerpt.js，然後我'我實際上只是複制了作為此 Faust.js 入門項​​目一部分的現有組件的結構。 你真的可以在這裡做任何你想做的事，我只是遵循這個框架，因為它已經作為本入門的一部分為我安排好了。

因此，一旦我們擁有所有這三個文件，我們將開始向它們添加一些內容以呈現這些帖子。 因此，我們要做的第一件事就是將一些內容放入我們的帖子摘錄組件中。 所以我們只需從我們的存儲庫中復制並粘貼它，我們可以看到我們正在導入那個 module.css 文件。 我們有一個名為 post excerpt 的函數，它是我們的組件，它品嚐一個 prop 是帖子，然後我們呈現一個部分，有一個鏈接將直接轉到該帖子 URI，呈現標題。 然後在那裡，我們也有我們正在渲染的類別圖塊，然後在我們的 HTML 中使用 dangerously set 來設置帖子摘錄的 HTML 內容。

現在，一旦一切都很好並保存下來，我們將把它保存下來，但我們也會進入這裡並將這個額外的作用域樣式添加到我們的組件中，為我們的類別設置這些 span 標籤的樣式，然後我們將在 index.js 文件中做一些導入導出，將其從默認導出導出到命名導出，我們將保存所有這些內容。 然後最後一步使它可用於其他事情是在我們的組件文件夾的 index.js 文件中添加一個導出行。 現在我們已經完成了，如果我們回到主頁 frontpage.js，我們應該能夠向現有的導入語句添加一個額外的導入以使用我們的文章摘錄。

現在，我們要找到一個地方來實現它，如果我們下來查看我們的主要元素，就會看到我們在英雄下方有一些東西——我們要做的就是複製並粘貼存儲庫中的一些代碼，並使用我們的帖子摘錄覆蓋 main 中的內容。 我們將做一些重新格式化以消除周圍的一些東西，但你可以看到我們正在做的是在那個容器內部，我們將映射我們作為我們查詢的結果然後返回一個帖子摘錄組件，我們在其中傳遞帖子並給它一個鍵。

然後，如果我們繼續保存所有這些並在瀏覽器中呈現並刷新，我們應該會看到我們有一個很棒的動態主頁。 是的，這些標題中的每一個都有一個可點擊的鏈接，各個類別的圖塊也是如此。 如果我們點擊，我們可以看到，通過 Faust 中已經存在的模板的好處，我們所有的帖子內容都已經呈現，儘管我們缺少一些我們使用 ACF 創建的資源組。 因此，如果我們點擊進入第二篇文章，我們可以看到其中一篇的渲染效果和所有預製的類別鏈接一樣好——我們只是使用這些類別 URI 來借助 Faust 來呈現該類別 JS 模板.

好的，現在我們有了一個動態主頁，讓我們繼續讓那些 ACF 字段呈現在我們的 single.js 模板上。 因此，繼續清理我們的代碼編輯器，然後我們可以打開 single.js 文件並查看其中的內容。 我們知道，在頂層，我們有這個組件函數，我們正在導出它實際上採用 props，並且 component.query 屬性有一個動態 GraphQL 查詢，它正在讀取我們從種子查詢返回的一些變量。

我們最終想要做的是在我們的帖子內容底部顯示一些不同的帖子資源。 所以我回到存儲庫並向下滾動到步驟 3.1，我們在其中更新單個帖子查詢，我們將查看它，因為它開始引入我們在較早的步驟。 如果我接受該查詢並將其複制並粘貼到圖形中，我將繼續為帖子硬編碼數據庫 ID，並刪除一些我們不需要的不同內容，例如 As Preview 和其他片段.

如果我繼續運行它，我們將看到我取回了一些真正包含我所期望的數據。 內容，我找回了作者，重要的是，我找回了那些領域小組及其數據。 所以我將繼續複製該查詢並返回到 single.js。 從那裡，我真的只是用我從剪貼板中得到的內容替換查詢的那一部分。 我們可以繼續並保存它。 如果你願意，你可以重新格式化它，但這與空白無關，所以我認為在大多數情況下看起來還不錯。

因此，從那裡開始，我們將要執行與上一步相同的操作，我們已將其作為查詢的一部分。 現在，我們要確保我們讓這些變量在我們的組件內部可用。 因此，我們將把這些添加到該結構化聲明中，此外，由於我們的帖子有幾個不同的類別，我們想創建一些布爾值來幫助我們確定是否應該顯示食物資源或甜蜜的混音帶。 因為正如您在那裡看到的那樣，無論我們返回的是什麼，如果沒有找到甜美的混音帶字段，那麼返回的都是空的。 所以我想在那裡做一些條件檢查，所以我將這兩行代碼添加到我們的文件中。

這基本上是為我們創建了一些布爾變量，我們可以在下面使用這些變量來有條件地渲染模板。 在這件事上，我們正​​在查看每個類別的節點，然後基本上過濾它們以確定它們是否包含食物或音樂，然後檢查長度。 可能有很多方法可以實現這種類型的布爾變量，所以如果您有更簡潔的方法，請隨意更改它，但就我們這裡的目的而言，我認為這會很好地工作。

現在，下一步是我們實際上想要，就像在上一步中一樣，創建一些額外的組件。 因此，我將繼續在我的組件文件中創建一個食物資源組件。 所以我將創建一個文件夾，然後在其中創建一個 food resources.js 文件，與此同時，我將創建一個 index.js 文件和一個 CSS 模塊文件。 現在 SCSS 模塊文件真的很有用，因為它允許我們將樣式範圍限定到特定組件。 所以它感覺像是時髦的語法，但最終它是一個非常乾淨的結果，因為我們不必編寫一堆類和東西。

因此，我將開始將存儲庫中的組件代碼直接複製並粘貼到這些文件中。 我們可以看到我們有一個食物資源函數，它帶有兩個道具食譜名稱和食譜鏈接，然後我們用墨西哥捲餅表情符號將它們呈現在我們美好的年齡之下。 我們還將一些 SCC 文件樣式複制並粘貼到這個特定文件夾中，然後我們將確保從組件文件夾 index.js 中導出它。 就像在前面的示例中一樣，我們希望繼續將其導出到組件文件夾的 index.js 中，這樣我們就可以擁有一個非常好的導入組，就像您直接從該組件中看到的那樣這些不同文件中其他地方的文件夾。

所以一旦我們添加了它，我們就會把注意力轉向音樂資源組件，我們會做同樣的事情。 我們將繼續創建相同的文件結構。 所以音樂資源文件夾和里面的 musicresources.js 文件。 然後我們將繼續創建一個 index.js 文件來導出它，然後還有我們的 musicresources.module.scss 文件以及那些範圍樣式。

所以一旦我們得到了所有這些東西，我們就會做我們對食物資源所做的同樣的事情，只是從存儲庫中復制和粘貼一些代碼。 我們可以看到這個組件看起來幾乎一模一樣。 我們有音樂資源。 這實際上有三個道具而不是兩個，但我們在這個字段組上有三個字段，但 styles.component 約定是相同的。 我們只是做了一些稍微不同的渲染，因為我們有不同的內容。

因此，從那裡，我們還將添加我們的 SCSS 代碼，並確保從組件文件夾 index.js 中導出它，然後將它導入到我們這裡的文件夾中，我想我真的做到了——讓我們快速重命名它並只要確保我們所有的命名看起來都不錯，這樣我們的 index.js 和組件就能找到我們的音樂資源，所有這些東西都很棒。 所以現在，我們將繼續並關閉所有這些無關的選項卡，因為我們已準備好在我們的 single.js 文件中實際實現這些組件。

所以要做到這一點，我們只需將這兩個組件添加到我們現有的 import 語句中，它已經自動識別它們，我們會找到一個好的地方來做這件事。 所以我們在這裡得到了這個內容包裝器組件。 所以現在，我們正在傳遞內容，但實際上也可以選擇接受孩子。 所以我們可以傳入內容，然後也可以將一些子組件直接傳遞給內容包裝器，這樣它就會顯示在我們已經擁有的漂亮的水平空間中，並且所有內容都對齊。

所以這就是我們要做的，然後我們將復制並粘貼該代碼並重新格式化它並討論這個特定示例中發生的事情。 因此，就在該內容包裝器組件內部，我們使用這些 is food 和 is music 布爾變量來有條件地呈現相應的資源組件。 所以如果 food 是真的並且這篇文章屬於食物類別，我們將渲染它。 如果是音樂，我們也會做同樣的事情。 在那裡，您可以看到我們正在傳遞渲染它所需的所有不同道具。

如果我們返回並刷新我們的 single.js 模板頁面之一，我們可以看到我們的食物資源正在按照我們期望的方式呈現，並且如果我們返回 WP Admin 或我們的家，該鏈接將正常工作頁。 如果我們找到一個和食物類別或音樂，我們可以打開 Kinfolk Synth DIY 並查看我們的音樂資源組件是什麼樣的，所有這些看起來都很棒。 如果我們找到一個實際上屬於這兩個類別的組件，我們可以看到它實際上在底部以我們期望的方式呈現了這兩個組件。

好的。 所以現在我們已經按照我們想要的方式得到了我們的網站，讓我們繼續討論如何部署這個網站。 現在，我已經為我們創建了 GitHub 存儲庫的一部分，實際上，我已經在完成分支中創建了一個完全獨立的已部署分支。 所以運行 Git check out 已經完成，我們會為您提供的。 您也可以將該分支直接部署到 Atlas，這是 WP Engine 的無頭 WordPress 託管解決方案。

這為您提供了 WordPress 安裝和 Node.js 容器，您只需單擊 Atlas 登錄頁面上的此按鈕即可註冊免費沙箱帳戶。 帶你去一個非常快的論壇，正如你所看到的，價格為零。 您可能仍然需要存入我們僅用於防止欺詐目的的信用卡，但您可以擁有一個免費帳戶來使用其中的任何一個來測試它，以隨心所欲地學習。 因此，我將繼續並打開 WP Engine 儀表板以開始將此站點部署到 Atlas。

我實際上要做的第一件事是打開我的站點列表，然後我將打開我的生產 WordPress 站點。 所以實際上，您在這裡看到的這個 ACF 無頭站點是你們在本地使用的 zip 文件的父站點，我將在新窗口中打開 WP Admin。 所以我使用 WP export 製作了一個 zip，這實際上是我要用於我的生產部署的東西。

從那裡，我將單擊進入 Atlas 選項卡，然後單擊創建應用程序。 我看到了這個選項。 我將選擇 Pull From Repo，然後單擊 Continue。 如果我還沒有通過 GitHub 進行身份驗證，您可以在此處進行身份驗證，但由於我已經通過身份驗證，所以我可以繼續並選擇我的存儲庫。 因此，我們將繼續並選擇我們用於此項目的存儲庫，單擊“繼續”，然後我將在美國中部部署我的應用程序。

從這裡，它允許我選擇一個分支，就像我說的，我將使用 Finished。 如果您使用的是 monorepo，也有一些選項，我們不使用，我將保留選中我的 WordPress 安裝，並蒐索我的 ACF 無頭站點。 現在，在這裡，實際上，我想要從我的文件項目中復制兩個環境變量，而不是使用 .env 文件。

所以第一個是下一個公共 WordPress URL。 這些是我們在本地項目中設置的相同環境變量，我將在其中復製到我的生產 WordPress 安裝的鏈接。 然後我將添加另一個環境變量，這個變量將用於我們的 Faust 密鑰。 因此，我將繼續並從 Faust 設置菜單中復制它，然後將其彈出並將其設置為 Faust Secret Key。

完成後，我可以繼續並單擊“創建應用程序”，Atlas 將開始構建和部署我的應用程序的過程。 在 Atlas 構建過程中，它將運行 NPM install，以及您正在使用的任何框架的 NPM 構建命令。 然後，一旦構建了所有這些代碼，它就會為您將該節點容器部署到我們的網絡中。 因此，一旦所有這些都旋轉了一秒鐘，我們應該會收到一條成功消息，然後我們可以單擊為我們提供的 URL，並實際查看我們的網站。

所以我們會收到成功消息，然後我們可以繼續在另一個選項卡中打開此 URL。 在那裡我們可以看到我們的網站看起來和在本地完全一樣，它正在提取所有正確的數據、所有正確的圖像，甚至吸收了我們所有的 ACF 內容。 我們的許多帖子看起來真的很棒，而且我們在 Atlas 上的表現非常出色——我實際上在這裡使用了一些非常大的圖像，所以如果你發現速度有些慢，那肯定是我的選擇造成的。

Atlas 平台充滿了現代 JavaScript 開發人員會喜歡的功能。 遺憾的是，本演示文稿中沒有足夠的時間來詳細介紹它們。

但是 Atlas 在將無頭生態系統的前端和後端部分的重要細節整合到一個方便的儀表板中確實做得非常好，您可以在其中查看單獨的構建日誌和構建輸出，檢查部署，您使用的環境變量一個特定的構建，以及訪問您可以啟用的其他設置或功能，例如預覽環境，您可以在其中為針對 GitHub 存儲庫創建的每個 PR 創建一個額外的環境，或創建環境 webhooks 以重建特定部分當您對 WordPress 進行更改時，您的應用程序或 CDN。

所有這些都可以通過 Atlas 平台實現，它確實降低了開始使用無頭 WordPress 進行構建的門檻。

哇。 恭喜，就像我說的那樣，25 分鐘內要講的內容很多。 請在演示後繼續練習，如果您對開始使用演示資源有任何疑問，請聯繫我。 如果您有興趣了解有關 headless 的更多信息但需要空間來學習，請註冊一個免費的 Atlas Sandbox 帳戶。 除了像我們今天所做的那樣部署您自己的代碼存儲庫之外，您還可以開始使用我們的一些預製藍圖，這些藍圖是一鍵式項目堆棧，可以幫助您了解無頭項目完成後的樣子。

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.