使用前端管道開發 Sites

有了前端管道， 前端開發人員更具獨立性，開發過程可獲得相當的速度。 本檔案說明此程式的運作方式，以及需注意的一些事項，以便充分發揮此程式的潛力。

秘訣

如果您還不熟悉如何使用前端管道及可提供哪些好處，請查看 快速網站建立歷程 例如，如何快速部署新網站並自訂其主題，而完全不受後端開發影響的範例。

前端建置合同

類似於 完整堆疊構建環境， 前端管道有自己的環境。 只要遵守下列前端建置合約，開發人員就能在此管道中擁有一些彈性。

前端管道需要前端Node.js專案才能使用 build 指令碼指令，用於生成將由前端管道部署的生成。 亦即Cloud Manager會使用命令 npm run build 生成可部署項目 dist 檔案夾。

內容 dist 資料夾是從Cloud Manager管道最終部署至AEM as a Cloud Service的項目。

節點版本

預設情況下，前端管道使用Node 14，但12和16也可用。

您可以使用 CM_CUSTOM_VAR_NODE_VERSION 環境變數來設定所需的版本。

單一真理來源

一般的良好做法是針對已部署至AEM的項目維持單一真相來源。 Cloud Manager的目標是讓單一的真相來源變得顯而易見。 但是，由於前端管道允許解耦代碼的部分位置，因此，前端管道的正確設定是額外的責任。 請務必謹慎避免建立多個前端管道，這些管道會部署至相同環境中的相同網站。

因此，尤其是當建立了多個前端管道時，建議維護系統的命名慣例，例如：

  • 前端模組的名稱，由 name 屬性 package.json 檔案中，應包含其所套用之網站的名稱。 例如，若網站位於 /content/wknd，前端模組的名稱會類似 wknd-theme.
  • 前端模組與其他模組共用相同的Git存放庫時，其資料夾名稱應等於或包含前端模組的相同名稱。 例如，如果前端模組的名稱為 wknd-theme，封閉的資料夾名稱會類似 wknd-theme-sources.
  • Cloud Manager前端管道的名稱也應包含前端模組的名稱，並新增其部署的環境（生產或開發）。 例如，對於名為的前端模組 wknd-theme，管道的名稱可能會是 wknd-theme-prod.

這樣的公約應有效防止下列部署錯誤：

  • 將前端模組應用到錯誤站點
  • 建立應用同一站點的多個前端模組，這些模組將覆蓋彼此
  • 為同一源建立多個前端管道，這可能會導致競爭條件，但無法保證部署順序

關注分離

另一種適用於任何關注事項分離的良好做法是，對如何設計和管理分散關注事項的合同給予特別關注。 若為前端管道，將該程式碼與其餘程式碼分開的合約為網站轉譯的HTML和JSON。 如果該HTML和JSON保持穩定，前端管道就會讓前端團隊完全獨立，從而提供其最大價值。

目前沒有特定功能可與前端管道同步執行完整堆疊管道。 因此，當前端開發與全堆流水線脫鈎時，必須在將這兩個關注領域分開的合同中給予額外的關注。 該合約通常為Experience Manager所轉譯的HTML和/或JSON。 因此，不同管道的運營團隊之間必須妥善規劃對合同的更改，以便商定如何排序相應的更改。

必要時，建議您執行下列步驟，以變更會影響這兩個方面的HTML和/或JSON輸出。

  1. 後端團隊會先透過新的HTML和/或JSON輸出來設定開發環境。
    1. 透過完整堆疊管道，他們部署轉譯所需新HTML和/或JSON輸出所需的程式碼。
    2. 如果這是前端團隊先前未存取的環境，則必須執行下列步驟。
      1. URL:前端團隊必須知道該開發環境的URL。
      2. ACL:前端團隊必須獲得本機AEM使用者，且其權限類似於「貢獻者」。
      3. Git:前端團隊必須針對前端模組（特別針對該開發環境）設定個別的Git位置。
        • 通常的作法是建立 dev 分支，以便之後可輕鬆將針對開發環境所做的變更合併回 main 要部署到生產環境的分支。
      4. 管道：前端團隊必須有可部署至開發環境的前端管道。 該管道會部署通常位於 dev 分支，如前一點所述。
  2. 之後，前端團隊會讓CSS和JS程式碼可搭配舊輸出和新輸出使用。
    1. 一如既往，在地方發展：
      1. 此 npx aem-site-theme-builder proxy 在前端模組內執行的命令會啟動向AEM環境要求內容的代理伺服器，同時將前端模組的CSS和JS檔案替換為本機模組的CSS和JS檔案 dist 檔案夾。
      2. 設定 AEM_URL 變數 .env 檔案可控制本機代理伺服器從哪個AEM環境中取用內容。
      3. 變更此值 AEM_URL 因此，可在生產環境和開發環境之間切換，以調整CSS和JS，使其同時適用於兩種環境。
      4. 它必須與生成新輸出的開發環境以及生成舊輸出的生產環境一起工作。
    2. 當更新的前端模組同時適用於兩種環境，並部署至兩種環境時，前端工作即已完成。
  3. 然後，後端團隊就可以部署程式碼，透過完整堆疊管道轉譯新HTML和/或JSON輸出，以更新生產環境。
  4. 前端團隊接著可以清理其CSS和JS，並移除舊輸出僅需的項目，透過前端管道將上次更新部署至生產環境。

其他資源

  • 網站主題 — 了解如何使用AEM網站主題自訂網站的樣式和設計。
  • AEM網站主題產生器 -Adobe提供AEM網站主題產生器，作為建立新網站主題的一組指令碼。

本頁內容