疑難排解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

請嘗試下列步驟來解決問題:

  1. 確定package-lock.json存在於ui.frontend模組中並已認可到您的存放庫。

  2. 使用Linux環境重新產生package-lock.jsonnode_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"
    

     

  3. 更新過時的相依性,包括Jest、Storybook和Webpack。

  4. 使用具有生產及重要稽核等級旗標的npm audit來識別剩餘的相依性問題。 例如︰npm audit --production --audit-level=critical

  5. 從Linux環境認可重新產生的package-lock.json檔案至您的存放庫。

  6. 將變更推送至僅限FE的管道所使用的分支。

  7. 在Cloud Manager中重新執行僅限FE的管道。

  8. 解決建置流程中報告的任何ESLint/程式碼樣式錯誤;必須解決所有lint錯誤才能成功部署。

  9. 若僅為了驗證目的而需要,請在package.json中暫時移除組建指令碼中的Linting。 不過,不建議將此用於生產環境。

  10. 驗證建置步驟是否成功完成,且沒有相依性或Linting錯誤。

  11. 如果部署成功,但您的網站樣式和指令碼未載入,請檢查Dispatcher設定和CDN設定。 請確定您已啟用的vhost包含靜態網域的正確ServerAlias。 如需相關步驟,請參閱前端管道部署中斷網站

  12. 如果管道失敗並出現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問題。

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f