利用前端管道開發站點

通過前端管道， 前端開發者具有更大的獨立性，開發過程可以獲得相當的速度。 本文檔介紹此過程的工作方式以及需要注意的一些注意事項，以便充分利用此過程的潛力。

真理的單一來源

一般的好做法是為所部署的內容保留單一的真相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供網站主題生成器作為一組用於建立新網站主題的指令碼。