Problemen met frontend-pijplijnfouten in AEM as a Cloud Service oplossen

Wanneer het omzetten van een full-stack pijpleiding in een front-end (FE) slechts pijpleiding in AEM as a Cloud Service, bouwstijlmislukkingen zou kunnen voorkomen toe te schrijven aan platform-specifieke gebiedsdelen en strikte het verbinden vereisten. Het genereren van package-lock.json op Windows of macOS kan leiden tot incompatibiliteiten met de op Linux gebaseerde Cloud Manager. Bovendien dwingen de pijpleidingen FE code-stijl controles af niet aanwezig in volledig-stapel Maven bouwt.

Nota's

  • Wanneer Cloud Manager een front-end pijpleiding in werking stelt voert het niet npm installatie eerst uit, neemt het eenvoudig package-lock.json dat in Git is en npm audit --production --audit-level=critical loopt. Nochtans installeert een full-stack pijpleiding de versies van Node/NPM die wij door frontend-maven-plugin verzoeken, het npm installeert, zodat zien wij de kwestie niet in volledige stapelpijpleiding.

Beschrijving description

Omgeving

  • Product: AEM as a Cloud Service - Sites
  • Pijpleiding: alleen-voorkant (FE) pijpleiding via Cloud Manager
  • Node versie: 14.19.1
  • npm versie: 6.14.x
  • Besturingssysteem voor lokale builds: Windows (lokaal), Linux (Cloud Manager-container)
  • Vereiste toestemmingen: De rol van de Manager van de Plaatsing in Cloud Manager

Probleem/symptomen

  • De pijpleiding ontbreekt tijdens npm installeert met fouten zoals * fsevents niet toegankelijk van chokida r *
  • Fouten met betrekking tot ontbrekende of niet-overeenkomende package-lock.json bestanden
  • De lokale bouwstijlen slagen op Vensters of Mac, maar ontbreken in de pijpleiding van Cloud Manager
  • Honderden fouten ESLint/code-stijl veroorzaken FE-slechts pijpleidingsmislukkingen, terwijl de volledig-stapel pijpleidingen deze controles door gebrek afdwingen

Resolutie resolution

Probeer de volgende stappen om het probleem op te lossen:

  1. Controleer of package-lock.json aanwezig is in de module ui.frontend en of deze is toegewezen aan uw opslagplaats.

  2. Regenereer package-lock.json en node_modules met een Linux-omgeving (gebruik Windows-subsysteem voor Linux of Docker). Om platform-specifieke gebiedsdeelkwesties voor FE-enige pijpleidingen te reproduceren en op te lossen, gebruik de volgende bevelen in een terminal van 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"
    

     
    Of voer in een container van Linux uit:
     

    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. Verouderde afhankelijkheden bijwerken, waaronder Jest, Storybook en Webpack.

  4. Gebruik npm audit met vlaggen op productie- en kritiek controleniveau om resterende afhankelijkheidsproblemen te identificeren. Bijvoorbeeld: npm audit --production --audit-level=critical

  5. Leg het opnieuw gegenereerde package-lock.json -bestand vanuit de Linux-omgeving vast in uw opslagplaats.

  6. Duw veranderingen in de tak die door de FE-enige pijpleiding wordt gebruikt.

  7. Voer de FE-enige pijpleiding in Cloud Manager opnieuw uit.

  8. Verbeter om het even welke die fouten ESLint/code-stijl tijdens het bouwstijlproces worden gemeld; alle lintfouten moeten voor succesvolle plaatsing worden opgelost.

  9. Indien dit alleen voor validatiedoeleinden nodig is, verwijdert u tijdelijk de koppeling uit het constructiescript in package.json . Dit wordt echter niet aanbevolen voor gebruik bij de productie.

  10. Verifieer dat de bouwstijlstap met succes zonder gebiedsdeelfouten of het verbinden fouten voltooit.

  11. Als de implementatie slaagt maar de stijlen en scripts van uw site niet worden geladen, controleert u de Dispatcher-instellingen en de CDN-configuratie. Zorg ervoor dat de ingeschakelde host de juiste ServerAlias voor het statische domein bevat. Voor stappen, verwijs naar ​ de pijpleidingsonderbrekingen van de Voorkant van de 0} website ​.

  12. Als de pijplijn met BUILD_NPM_AUDIT_ERROR ontbreekt, verwijder om het even welke conflicterende knopen SiteConfig of HtmlPageItemsConfig. Voor stappen, verwijs naar ​ hoe te om BUILD_NPM_AUDIT_ERROR in AEM as a Cloud Service front-end pijpleiding ​ op te lossen.

Nota's

  • De FE-enige pijpleiding dwingt striktere code-stijl controles dan volledig-stapel Maven bouwt; alle lintfouten moeten vóór plaatsing worden opgelost.

  • U kunt het proces voor het corrigeren van fouten in JavaScript- en CSS-koppelingen automatiseren door het volgende script aan uw package.json toe te voegen:

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

Op deze manier kunt u npm run lint:fix uitvoeren om automatisch veel problemen met koppelingen te verhelpen voordat u wijzigingen aanbrengt.

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