疑難排解AEM as a Cloud Service中的前端管道故障
在AEM as a Cloud Service中將完整棧疊管道轉換為僅前端(FE)管道時,由於平台特定的相依性和嚴格的篩選要求,可能會發生建置失敗。 在Windows或macOS上產生package-lock.json可能會導致與Linux型Cloud Manager不相容。 此外,FE管道會強制實施全棧疊Maven組建中不存在的程式碼樣式檢查。
附註
- 當Cloud Manager執行前端管道時,它不會先執行npm安裝,而只是取用Git中的
package-lock.json並執行npm audit --production --audit-level=critical。 不過,完整棧疊管道會安裝我們透過frontend-maven-plugin請求的節點/NPM版本,其會執行npm安裝,因此我們在完整棧疊管道中看不到問題。
說明 description
環境
- 產品: AEM as a Cloud Service — 網站
- 管道:透過Cloud Manager的僅前端(FE)管道
- 節點版本: 14.19.1
- npm版本: 6.14.x
- 本機組建的作業系統:Windows (本機)、Linux (Cloud Manager容器)
- 必要許可權: Cloud Manager中的部署管理員角色
問題/症狀
- 在npm安裝期間,管道失敗,並出現錯誤,例如* 無法從chokida r*存取fsevents
- 與遺失或不相符
package-lock.json個檔案相關的錯誤 - 本機組建在Windows或Mac上成功,但在Cloud Manager管道中失敗
- 數百個ESLint/程式碼樣式錯誤會導致僅限FE的管道失敗,而完整棧疊管道預設不會強制執行這些檢查
解決方法 resolution
請嘗試下列步驟來解決問題:
-
確定
package-lock.json存在於ui.frontend模組中並已認可到您的存放庫。 -
使用Linux環境重新產生
package-lock.json和node_modules(使用Windows Subsystem for Linux或Docker)。 若要針對僅限FE的配管重現並解決平台特定的相依性問題,請在WSL終端機中使用下列指令:code language-none cd /path/to/your/project rm -rf package-lock.json node_modules npm install git add package-lock.json git commit -m "Regenerate package-lock.json on Linux"
或在Linux容器中執行:code language-none docker run --rm -v $(pwd):/app -w /app node:16-alpine \ sh -c "rm -rf node_modules package-lock.json && npm install" -
更新過時的相依性,包括Jest、Storybook和Webpack。
-
使用具有生產及重要稽核等級旗標的
npm audit來識別剩餘的相依性問題。 例如︰npm audit --production --audit-level=critical -
從Linux環境認可重新產生的
package-lock.json檔案至您的存放庫。 -
將變更推送至僅限FE的管道所使用的分支。
-
在Cloud Manager中重新執行僅限FE的管道。
-
解決建置流程中報告的任何ESLint/程式碼樣式錯誤;必須解決所有lint錯誤才能成功部署。
-
若僅為了驗證目的而需要,請在
package.json中暫時移除組建指令碼中的Linting。 不過,不建議將此用於生產環境。 -
驗證建置步驟是否成功完成,且沒有相依性或Linting錯誤。
-
如果部署成功,但您的網站樣式和指令碼未載入,請檢查Dispatcher設定和CDN設定。 請確定您已啟用的vhost包含靜態網域的正確
ServerAlias。 如需相關步驟,請參閱前端管道部署中斷網站。 -
如果管道失敗並出現
BUILD_NPM_AUDIT_ERROR,請移除任何衝突的SiteConfig或HtmlPageItemsConfig節點。 如需相關步驟,請參閱如何解決AEM as a Cloud Service前端管道中的BUILD_NPM_AUDIT_ERROR。
附註
-
僅限FE的管道會強制進行比全棧疊Maven組建更嚴格的程式碼樣式檢查;所有Lint錯誤都必須在部署之前解決。
-
您可以新增下列指令碼至
package.json,自動化修正JavaScript和CSS Linting錯誤的程式:code language-none "scripts": { "lint:fix": "npm run lint:js:fix && npm run lint:css:fix" }
這可讓您在推送變更之前,執行npm run lint:fix以自動修正許多Linting問題。