有了前端管道, 前端開發人員更具獨立性,開發過程可獲得相當的速度。 本檔案說明此程式的運作方式,以及需注意的一些事項,以便充分發揮此程式的潛力。
如果您還不熟悉如何使用前端管道及可提供哪些好處,請查看 快速網站建立歷程 例如,如何快速部署新網站並自訂其主題,而完全不受後端開發影響的範例。
類似於 完整堆疊構建環境, 前端管道有自己的環境。 只要遵守下列前端建置合約,開發人員就能在此管道中擁有一些彈性。
前端管道需要前端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
.wknd-theme
,封閉的資料夾名稱會類似 wknd-theme-sources
.wknd-theme
,管道的名稱可能會是 wknd-theme-prod
.這樣的公約應有效防止下列部署錯誤:
另一種適用於任何關注事項分離的良好做法是,對如何設計和管理分散關注事項的合同給予特別關注。 若為前端管道,將該程式碼與其餘程式碼分開的合約為網站轉譯的HTML和JSON。 如果該HTML和JSON保持穩定,前端管道就會讓前端團隊完全獨立,從而提供其最大價值。
目前沒有特定功能可與前端管道同步執行完整堆疊管道。 因此,當前端開發與全堆流水線脫鈎時,必須在將這兩個關注領域分開的合同中給予額外的關注。 該合約通常為Experience Manager所轉譯的HTML和/或JSON。 因此,不同管道的運營團隊之間必須妥善規劃對合同的更改,以便商定如何排序相應的更改。
必要時,建議您執行下列步驟,以變更會影響這兩個方面的HTML和/或JSON輸出。
dev
分支,以便之後可輕鬆將針對開發環境所做的變更合併回 main
要部署到生產環境的分支。dev
分支,如前一點所述。npx aem-site-theme-builder proxy
在前端模組內執行的命令會啟動向AEM環境要求內容的代理伺服器,同時將前端模組的CSS和JS檔案替換為本機模組的CSS和JS檔案 dist
檔案夾。AEM_URL
變數 .env
檔案可控制本機代理伺服器從哪個AEM環境中取用內容。AEM_URL
因此,可在生產環境和開發環境之間切換,以調整CSS和JS,使其同時適用於兩種環境。