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.jsonsom finns i Git och körnpm 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.jsonfiler - 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:
-
Kontrollera att
package-lock.jsonfinns i modulenui.frontendoch att den har implementerats i din databas. -
Återskapa
package-lock.jsonochnode_modulesmed 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" -
Uppdatera föråldrade beroenden som Jest, Storybook och Webpack.
-
Använd
npm auditmed produktionsflaggor och kritiska granskningsnivåflaggor för att identifiera återstående beroendeproblem. Till exempel:npm audit --production --audit-level=critical -
Genomför den återskapade
package-lock.json-filen från Linux-miljön till din databas. -
Överför ändringar till grenen som används av pipelinen för enbart FE.
-
Kör om pipelinen för enbart FE i Cloud Manager.
-
Åtgärda eventuella ESLint-/kodliknande fel som rapporteras under byggprocessen. Alla kodfel måste åtgärdas för att distributionen ska lyckas.
-
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. -
Kontrollera att byggsteget har slutförts utan beroendefel eller lintingfel.
-
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
ServerAliasför den statiska domänen. Anvisningar om hur du gör detta finns i Framtida pipeline-distribution bryter webbplatsen. -
Om pipeline misslyckas med
BUILD_NPM_AUDIT_ERRORtar 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.