Distribuera via pipeline i frontend-läget
I det här kapitlet skapar och driver vi en rörledning i Adobe Cloud Manager. Den skapar bara filer från modulen ui.frontend och distribuerar dem till det inbyggda CDN-numret i AEM as a Cloud Service. På så sätt flyttas bort från den /etc.clientlibs-baserade leveransen av frontendresurser.
Mål objectives
- Skapa och kör en frontendpipeline.
- Verifiera att serverresurser INTE levereras från
/etc.clientlibsutan från ett nytt värdnamn som börjar medhttps://static-
Använda den främre rörledningen
Förutsättningar prerequisites
Det här är en självstudiekurs i flera delar och det antas att de steg som beskrivs i Uppdatera AEMhar slutförts.
Kontrollera att du har behörighet att skapa och distribuera pipelines i Cloud Manager och åtkomst till en AEM as a Cloud Service-miljö.
Byt namn på befintlig pipeline
Byt namn på den befintliga pipelinen från Distribuera till Dev till FullStack WKND-distribuera till Dev genom att gå till fältet Konfiguration på fliken Icke-produktionsförlopp. Detta för att tydligt ange om en pipeline är en hel hög eller en front-end genom att bara titta på dess namn.
Se även till att fälten Databas och Git Branch är korrekta på fliken Source-kod och att grenen har sina front end-pipeline-kontrakt ändrade.
Skapa en pipeline för säljprojektet
Utför följande steg för att ENDAST skapa och distribuera frontendresurserna från modulen ui.frontend:
-
I Cloud Manager-användargränssnittet klickar du på Lägg till i avsnittet Pipeliner och väljer sedan Lägg till icke-Production Pipeline (eller Lägg till produktionspipeline) baserat på den AEM as a Cloud Service-miljö som du vill distribuera till.
-
I dialogrutan Lägg till icke-produktionsförlopp, som en del av konfigurationen , väljer du alternativet Distributionsförlopp, ger den namnet FrontEnd WKND-distribution till Dev och klickar på Fortsätt
- Som en del av Source Code -stegen väljer du alternativet Front End Code och väljer miljö från Berättigade distributionsmiljöer. I avsnittet Source-kod kontrollerar du att fälten Databas och Git Branch har korrekta värden och att grenen har ditt avtal för pipeline för frontend-leverans har ändrats.
Och viktigast för fältet Kodplats är värdet/ui.frontendoch slutligen klickar du på Spara.
Distributionssekvens
- Kör först den nyligen namnändrade FullStack WKND-distributionen till AVD-pipelinen för att ta bort WKND-klientfilerna från AEM. Och viktigast av allt är att förbereda AEM för det rörliga slutavtalet genom att lägga till Sling config-filer (
SiteConfig,HtmlPageItemsConfig).
- Kör slutligen FrontEnd WKND Deploy to Dev för att endast bygga
ui.frontend-modulen och distribuera frontendresurserna direkt till CDN.
Verifiera formatändringar och nya leveranssätt
- Öppna WKND-platsens alla sidor och du kan se textfärgen Adobe Red och frontend-resursfilerna (CSS, JS) levereras från CDN. Värdnamnet för resursbegäran börjar med
https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.cssoch jämför site.js eller andra statiska resurser som du refererade till i filenHtmlPageItemsConfig.
$HASH_VALUE$ här är samma som det du ser i FrontEnd WKND-distributionen till Developer-pipelinets CONTENT HASH-fält. AEM meddelas om frontend-resursens CDN-URL och värdet lagras på /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content under egenskapen prefixPath.
Grattis! congratulations
Gratulerar, du skapade, körde och verifierade frontpipeline som bara bygger och distribuerar ui.front-modulen i WKND Sites-projektet. Nu kan teamet snabbt iterera på webbplatsens design och gränssnitt, utanför hela AEM.
Nästa steg next-steps
I nästa kapitel, Saker att tänka på, ska du granska effekten på utvecklingsprocessen fram och tillbaka.