文件AEMAEM 教學課程AEM Sites WKND 教學課程

使用前端管道進行部署

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined
  • undefined

在本章中，我們會在AdobeCloud Manager中建立和執行前端管道。 它只會從ui.frontend模組建置檔案，並將其部署至AEM as a Cloud Service中的內建CDN。 因此將遠離以/etc.clientlibs為基礎的前端資源傳遞。

目標 objectives

  • 建立和執行前端管道。
  • 確認前端資源不是從/etc.clientlibs傳遞，而是從以https://static-開頭的新主機名稱傳遞

使用前端管道

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

先決條件 prerequisites

此教學課程包含多個部分，並假設更新標準AEM專案中概述的步驟已完成。

確保您有許可權可在Cloud Manager中建立和部署管道，以及對AEM as a Cloud Service環境的存取權。

重新命名現有管道

將現有管道從​ 部署到Dev ​重新命名為​ FullStack WKND部署到Dev，方法是前往​ 設定 ​索引標籤的​ 非生產管道名稱 ​欄位。 這是為了明確表示管道是完整棧疊還是前端，只需檢視其名稱。

重新命名管道

同樣在​ Source程式碼 ​索引標籤中，確定存放庫和Git分支欄位值正確，且分支有您前端管道合約變更。

Source程式碼設定管道

建立前端管道

若要​ 僅 ​從ui.frontend模組建置及部署前端資源，請執行下列步驟：

  1. 在Cloud Manager UI中，從​ 管道 ​區段中，按一下​ 新增 ​按鈕，然後根據您想要部署到的AEM as a Cloud Service環境選取​ 新增非生產管道 （或​ 新增生產管道）。

  2. 在​ 新增非生產管道 ​對話方塊中，作為​ 組態 ​步驟的一部分，選取​ 部署管道 ​選項，將其命名為​ 前端WKND部署至開發，然後按一下​ 繼續

建立前端管道設定

  1. 在​ Source程式碼 ​步驟中，請選取​ 前端程式碼 ​選項，然後從​ 合格的部署環境 ​中挑選環境。 在​ Source程式碼__區段中，確定存放庫和Git分支欄位值正確，且分支有您前端管道合約變更。
    以及__最重要的     代碼位置 ​欄位的值為/ui.frontend，最後按一下​ 儲存。

建立前端管道Source程式碼

部署順序

  • 首先執行新重新命名的​ FullStack WKND Deploy to Dev ​管道，以從AEM存放庫中移除WKND clientlib檔案。 而且最重要的是透過新增​ Sling設定 ​檔案(SiteConfig， HtmlPageItemsConfig)為前端管道合約準備AEM。

未設定樣式的WKND網站

WARNING
之後，FullStack WKND Deploy to Dev ​管道完成時，您將會有​__未設定樣式的__ WKND網站，該網站可能會損毀。 請針對意外停機或部署進行規劃，這是您必須在從使用單一全棧疊管道切換到前端管道的初始切換期間規劃的一次性中斷。
  • 最後，執行​ FrontEnd WKND Deploy to Dev ​管道以僅建置ui.frontend模組，並將前端資源直接部署至CDN。
IMPORTANT
您注意到​__未設定樣式的__ WKND網站已恢復正常，而此時​__FrontEnd__​管道執行速度比完整棧疊管道快很多。

驗證樣式變更和新傳遞正規化

  • 開啟WKND網站的任何頁面，您會看到文字顏色為​ Adobe紅色，而前端資源(CSS、JS)檔案是從CDN傳遞。 資源要求主機名稱以https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css開頭，同樣以HtmlPageItemsConfig檔案中參考的site.js或任何其他靜態資源開頭。

新樣式的WKND網站

TIP
這裡的$HASH_VALUE$與您在​__FrontEnd WKND Deploy to Dev__​管道的​__內容雜湊__​欄位中看到的相同。 AEM會收到前端資源的CDN URL通知，此值儲存在​__prefixPath__​屬性下的/conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content。

雜湊值相互關聯

恭喜！ congratulations

恭喜，您已建立、執行及驗證只建置和部署WKND Sites專案的「ui.frontend」模組的前端管道。 現在，您的前端團隊可以在完整AEM專案生命週期之外，快速重複網站的設計和前端行為。

後續步驟 next-steps

在下一章考量事項中，您將檢閱對前端和後端開發程式的影響。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9