Felsöka frontendsfel i AEM as a Cloud Service

När du konverterar en pipeline i full hög till en frontendpipeline (FE) i AEM as a Cloud Service, kan fel uppstå på grund av plattformsspecifika beroenden och strikta lintingkrav. Generering av package-lock.json i Windows eller macOS kan orsaka inkompatibilitet med Linux-baserade Cloud Manager. Dessutom tillämpar FE-pipelines kodliknande kontroller som inte finns i Maven-byggen med full stack.

Anteckningar

  • När Cloud Manager kör en frontpipeline körs inte npm-installationen först, utan bara package-lock.json som finns i Git och kör npm audit --production --audit-level=critical. Men en pipeline i full hög installerar de Node/NPM-versioner som vi begär via pluginen front-maven-plugin, den kör npm-installation, så vi ser inte problemet i en fullständig stackpipeline.

Beskrivning description

Miljö

  • Produkt: AEM as a Cloud Service - Sites
  • Pipeline: Frontend-pipeline (FE) via Cloud Manager
  • Nodversion: 14.19.1
  • npm-version: 6.14.x
  • Operativsystem för lokala byggen: Windows (lokal), Linux (Cloud Manager-behållare)
  • Nödvändiga behörigheter: Distributionshanterarrollen i Cloud Manager

Problem/symtom

  • Pipeline misslyckas under npm-installation med fel som * fsevents som inte är tillgängliga från chokida r*
  • Fel relaterade till saknade eller felmatchade package-lock.json filer
  • Lokala byggen fungerar på Windows eller Mac, men misslyckas i Cloud Manager pipeline
  • Hundratals ESLint-/kodliknande fel orsakar pipelinefel som bara är för FE, medan rörledningar i full stack inte framtvingar dessa kontroller som standard

Upplösning resolution

Lös problemet genom att följa stegen nedan:

  1. Kontrollera att package-lock.json finns i modulen ui.frontend och att den har implementerats i din databas.

  2. Återskapa package-lock.json och node_modules med en Linux-miljö (använd Windows-undersystem för Linux eller Docker). Använd följande kommandon i en WSL-terminal för att reproducera och lösa plattformsspecifika beroendeproblem för pipelines som bara är för FE:  

    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"
    

     
    Eller kör i en Linux-behållare:
     

    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. Uppdatera föråldrade beroenden som Jest, Storybook och Webpack.

  4. Använd npm audit med produktionsflaggor och kritiska granskningsnivåflaggor för att identifiera återstående beroendeproblem. Till exempel: npm audit --production --audit-level=critical

  5. Genomför den återskapade package-lock.json-filen från Linux-miljön till din databas.

  6. Överför ändringar till grenen som används av pipelinen för enbart FE.

  7. Kör om pipelinen för enbart FE i Cloud Manager.

  8. Åtgärda eventuella ESLint-/kodliknande fel som rapporteras under byggprocessen. Alla kodfel måste åtgärdas för att distributionen ska lyckas.

  9. Om det bara är nödvändigt för valideringsändamål tar du tillfälligt bort linting från byggskriptet i package.json. Detta rekommenderas dock inte för produktion.

  10. Kontrollera att byggsteget har slutförts utan beroendefel eller lintingfel.

  11. Om distributionen lyckas men stilarna och skripten på platsen inte läses in, kontrollerar du Dispatcher-inställningarna och CDN-konfigurationen. Kontrollera att den aktiverade värden innehåller rätt ServerAlias för den statiska domänen. Anvisningar om hur du gör detta finns i Framtida pipeline-distribution bryter webbplatsen.

  12. Om pipeline misslyckas med BUILD_NPM_AUDIT_ERROR tar du bort alla SiteConfig- eller HtmlPageItemsConfig-noder som står i konflikt. Anvisningar finns i Så här löser du BUILD_NPM_AUDIT_ERROR i AEM as a Cloud Service frontendpipeline.

Anteckningar

  • Den FE-baserade pipeline tillämpar striktare kodliknande kontroller än Maven-byggen med full stack. Alla kodfel måste åtgärdas före distributionen.

  • Du kan automatisera processen att åtgärda JavaScript- och CSS-lintingfel genom att lägga till följande skript i din package.json:

    code language-none
    "scripts": {
      "lint:fix": "npm run lint:js:fix && npm run lint:css:fix"
    }
    

På så sätt kan du köra npm run lint:fix för att automatiskt korrigera många lintingproblem innan du trycker på ändringar.

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