使用前端管道進行部署
在本章中，我們在 Adobe Cloud Manager 中建立並執行前端管道。此管道只會建置 ui.frontend 模組中的檔案並部署至 AEM as a Cloud Service 中內建的內容傳遞網路。因此，便不再使用以 /etc.clientlibs 為基礎的前端資源傳遞。
目標 objectives
- 建立並執行前端管道。
- 請驗證前端資源不是從
/etc.clientlibs而是以https://static-開頭的全新主機名稱傳遞出來
使用前端管道
先決條件 prerequisites
這是包含多個部分的教學課程，並假設您已經完成「更新標準 AEM 專案」所述的步驟。
請確認您擁有在 Cloud Manager 中建立和部署管道以及存取 AEM as a Cloud Service 環境的權限。
重新命名現有管道
請至「設定」索引標籤的「非生產管道名稱」欄位，將現有管道從「部署至開發」重新命名為「全堆疊 WKND 部署至開發」。這樣只需查看名稱，便可以明確知道是全堆疊或是前端管道。
此外，在「原始碼」索引標籤中，確認「存放庫」和「Git 分支」欄位的值皆正確，而且分支已套用您的前端管道合約變更。
建立前端管道
若要 只是 建置和部署 ui.frontend 模組中的前端資源，請執行以下步驟：
-
在 Cloud Manager UI 中，在「管道」區段按一下「新增」按鈕，然後根據您要部署的 AEM as a Cloud Service 環境，選取「新增非生產管道」（或「新增生產管道」）。
-
在「新增非生產管道」對話框中，作為「設定」步驟的一部分，請選取「部署管道」選項，將其命名為「前端 WKND 部署至開發」，然後按一下「繼續」
- 作為「原始碼」步驟的一部分，選取「前端程式碼」選項，並從「合格的部署環境」中選擇環境。在「原始碼」區段，請確認「存放庫」和「Git 分支」欄位的值皆正確，而且分支已套用您的前端管道合約變更。
而__最重要的是__，「程式碼位置」欄位的值是「/ui.frontend」，然後最後按一下「儲存」。
部署順序
- 首先執行重新命名的「全堆疊 WKND 部署至開發」管道，把 AEM 存放庫中的 WKND clientlib 檔案移除。最重要的是，新增 Sling 設定 檔 (
SiteConfig、HtmlPageItemsConfig)，為前端管道合約準備 AEM。
- 最後，執行「前端 WKND 部署至開發」管道，以便僅建置
ui.frontend模組並將前端資源直接部署到內容傳遞網路。
驗證樣式變更和新的傳遞典範
- 開啟 WKND 網站的任一頁面，都可以看到文字顏色是 Adobe 紅色，而且前端資源 (CSS、JS) 檔案皆從內容傳遞網路傳遞過來。資源請求主機名稱，以及 site.js 或是您在
HtmlPageItemsConfig檔案中參考的任何其他靜態資源，都是一樣以https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css開頭。
$HASH_VALUE$ 與您在「前端 WKND 部署至開發」管道的「CONTENT HASH」欄位所看到的相同。AEM 收到前端資源內容傳遞網路 URL 的通知，該值儲存在 /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content，位於「prefixPath」屬性之下。
恭喜！ congratulations
恭喜，您已經建立、執行並確認只會建置和部署 WKND 網站專案的「ui.frontend」模組的前端管道。現在，您的前端團隊可以在完整的 AEM 專案生命週期以外，快速地進行網站設計和前端行為的疊代。
後續步驟 next-steps
在下一章「考量事項」中，您將檢閱對於前端和後端開發流程的影響。