文件AEM as a Cloud Service使用手冊

啟用前端管道 enable-front-end-pipeline

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用對象：
  • Experience Manager as a Cloud Service

建立對象：

  • 管理員

瞭解如何啟用現有網站的前端管道，以使用網站主題，更快地自訂您的網站。

概觀 overview

前端管道是一種機制，可根據網站主題和網站範本，快速部署您網站的前端程式碼。

此管道僅處理前端計畫碼，這使得部署過程比完整棧疊部署更快。 它可讓前端開發人員輕鬆自訂您的網站，而不需要瞭解AEM。

根據網站範本的網站預設可以使用前端管道。 本檔案說明如何調整現有網站以利用前端管道。

TIP
如果您不熟悉前端管道以及如何使用它和網站範本來快速部署網站，請參閱快速網站建立歷程以取得簡介。

AEM可將您的網站設定為載入使用前端管道部署的主題，即使您的網站不是使用網站範本和主題建立的，方法是將其分層到現有使用者端資料庫上。

技術細節 technical-details

當您啟動網站的前端管道時，AEM會對您的網站結構做出以下變更。

  • 網站的所有頁面都包含一個額外的CSS和JS檔案，您可以透過專用的Cloud Manager前端管道部署更新來修改這些檔案。
  • 新增的CSS和JS檔案最初是空的。 不過，您可以下載「主題來源」資料夾，以設定透過管道部署CSS和JS程式碼更新所需的資料夾結構。
  • 只有開發人員可以復原變更，方法是刪除此作業在/conf/<site-name>/sling:configs下方建立的SiteConfig和HtmlPageItemsConfig節點。
NOTE
此動作不會自動將網站的現有使用者端程式庫轉換為使用前端管線。 將這些來源從使用者端程式庫資料夾移至前端管道資料夾是一項需要前端開發人員手動執行的任務。

要求 requirements

AEM可以自動調整您的現有網站以使用前端管道。 若要執行此工作流程，您的網站必須使用v2或更新版本的核心元件的頁面元件。

啟用前端管道 enabling

IMPORTANT
如果您使用 (或打算使用) 前端管道來開發網站，必須先行新增 Cloud Manager IP 允許清單。
請參閱「 Cloud Manager IP 允許清單與前端管道搭配使用」。

使用網站邊欄從Sites主控台啟用您的網站。

  1. 登入AEM並透過​ 全域導覽 > 網站 ​瀏覽您的網站。

  2. 在主控台中選取您的網站。 選取網站的根目錄，而非任何子頁面。

  3. 選取您的網站後，請開啟左側的邊欄選取器，然後選擇​ 網站。

  4. 在​ 站台 ​邊欄中，按一下​ 啟用前端管道 ​按鈕。

    啟用前端管道

  5. AEM會提示您確認已進行變更的概述。 確認並調整您的網站。

現在，您的網站已準備好使用前端管道。 若要深入瞭解前端管道和管理您的網站主題，請參閱：

前端管道和自訂網域 custom-domains

前端管道可與Cloud Manager的自訂網域功能搭配使用，但將這兩項功能搭配使用時，請注意下列需求。

靜態前端檔案 static-files

依預設，透過Front-End Pipeline部署的靜態前端資產，會從Adobe預先定義的靜態網域提供服務。

如果您需要前端資產的自訂網域，可以在發佈層上安裝自訂網域，並設定Dispatcher將特定路徑（例如/static/）路由到Adobe的靜態託管位置。 此方法需要更新您的Dispatcher規則，才能正確轉送及快取靜態資產的請求。

設定自訂網域和Dispatcher後，您可以設定AEM以從靜態網域提供前端資產。

設定 configuration

如技術詳細資料區段中所述，啟用網站的前端管道功能會在/conf/<site-name>/sling:configs下建立SiteConfig和HtmlPageItemsConfig節點。

如果您想要將Cloud Manager的自訂網域功能用於您的網站，並搭配前端管道用於狀態資產，則必須將其他屬性新增到這些節點。

  1. 設定網站SiteConfig中的customFrontendPrefix屬性。

    1. 導覽至 /conf/<site-name>/sling:configs/com.adobe.aem.wcm.site.manager.config.SiteConfig。
    2. 新增或更新屬性customFrontendPrefix = "https://your-custom-domain.com/static/"。

  2. 這會以自訂網域更新HtmlPageItemsConfig的prefixPath值。

    1. 導覽至 /conf/<site-name>/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig。

    2. 驗證prefixPath是否反映您的自訂網域，例如prefixPath = "https://your-custom-domain.com/static/<hash>/..."。

    • 您也可以視需要手動覆寫此值。

  3. 驗證您的設定。

    1. 部署後，請檢查頁面是否正確參考自訂網域中的主題成品。
    2. 開啟瀏覽器的開發人員工具，並檢查theme.css和theme.js檔案路徑，確認它們是否從正確的網域載入。

接著網站的頁面會參照該更新URL中的主題人工因素。 然後Dispatcher會將這些資源的請求路由到靜態網域。

前端開發人員的最佳作法 best-practices

如果您需要在透過前端管道部署之前在本機開發和測試前端資產，請考慮以下方法：

  • 使用網站主題產生器的Proxy模式，在本機覆寫主題成品以進行測試。
  • 從本機開發伺服器手動提供您的佈景主題檔案，並更新HtmlPageItemsConfig中的prefixPath以符合本機伺服器位址。
  • 請確保在測試期間已停用瀏覽器快取以檢視即時更新。

如需本機前端開發的詳細資訊，請參閱網站主題產生器檔案。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab