Implementeren met behulp van de front-end pijplijn
In dit hoofdstuk, creëren en leiden wij een front-end pijpleiding in Adobe Cloud Manager. De toepassing bouwt alleen de bestanden van de module ui.frontend
en implementeert deze naar de ingebouwde CDN in AEM as a Cloud Service. Op die manier kunt u zich verplaatsen van de op /etc.clientlibs
gebaseerde front-end resources levering.
Doelstellingen objectives
- Creeer en stel een front-end pijpleiding in werking.
- Controleren of front-end bronnen NIET worden geleverd vanuit
/etc.clientlibs
maar vanuit een nieuwe hostnaam die begint methttps://static-
Het gebruiken van de front-end pijpleiding
Vereisten prerequisites
Dit is een meerdelig leerprogramma en het wordt verondersteld dat de stappen in de Standaard AEM van de Update Projectworden geschetst zijn voltooid.
Verzeker u voorrechten hebt om, pijpleidingen in Cloud Managerte creëren en op te stellen en toegang tot een milieu van AEM as a Cloud Service.
Bestaande pijpleiding hernoemen
Wijzig de bestaande pijpleiding van opstellen aan Dev aan FullStack WKND opstellen aan Dev door naar het van de Configuratie lusje niet-Productie van de Pijpleiding van de Configuratie gebied te gaan. Dit moet het uitdrukkelijk maken of een pijpleiding volledig-stapel of front-end door enkel zijn naam te bekijken is.
Ook in het lusje van de Code van Source, zorg ervoor dat de het gebiedswaarden van de Tak van de Bewaarplaats en van de Plaats correct zijn en de tak uw front-end pijpleidingscontractveranderingen heeft.
Een front-end pijplijn maken
SLECHTS bouwt en stelt de front-end middelen van de ui.frontend
module op, voert de volgende stappen uit:
-
In Cloud Manager UI, van de sectie 0} Pijpleidingen {, klik toevoegen knoop, dan uitgezocht voeg niet-Productiepijpleiding toe (of voeg de Pijpleiding van de Productie toe) die op het milieu van AEM as a Cloud Service wordt gebaseerd u wilt opstellen aan.
-
In voeg de dialoog van de Pijpleiding van de Niet-Productie toe, als deel van de 3} stappen van de Configuratie, selecteer de Optie van de Pijpleiding van de Plaatsing , noem het als Op te stellen FrontEnd WKND , en klik gaat verder
- Als deel van de stappen van de Code van 0} Source, selecteer de Voorste optie van de Code van het Eind , en kies het milieu van In aanmerking komende Milieu's van de Plaatsing . In de sectie van de Code van Source zorgt ervoor dat de het gebiedswaarden van de Tak van de Bewaarplaats en van het Git correct zijn en de tak uw voorste veranderingen van het pijpleidingscontract heeft.
En het belangrijkst voor het gebied van de Plaats van de Code is de waarde/ui.frontend
en tenslotte, klik sparen.
Implementatiereeks
- Eerst in werking stelt nieuw anders genoemd FullStack WKND opstelt om pijpleiding te ontwikkelen om de KND clientlib dossiers uit de AEM bewaarplaats te verwijderen. En het belangrijkst bereidt de AEM voor het front-end pijpleidingscontract voor door het Sling config dossiers (
SiteConfig
,HtmlPageItemsConfig
) toe te voegen.
- Tot slot stel FrontEnd WKND in werking stelt om pijpleiding te ontwikkelen om slechts
ui.frontend
module te bouwen en de front-end middelen direct aan CDN op te stellen.
Stijlwijzigingen en nieuw leveringsparadigma controleren
- Open de Plaats WKND om het even welke pagina en u kunt de tekstkleur zien gebruiken Rode Adobe en de front-end middelen (CSS, JS) dossiers worden geleverd van CDN. De hostnaam van de bronaanvraag begint met
https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css
en op dezelfde manier met site.js of andere statische bronnen waarnaar u verwijst in hetHtmlPageItemsConfig
-bestand.
$HASH_VALUE$
hier is het zelfde als wat u in FrontEnd WKND ziet opstellen aan Dev 3} HASH van de INHOUD van de pijpleiding {gebied. AEM wordt op de hoogte gebracht van CDN URL van het front-end middel, wordt de waarde opgeslagen bij /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content
onder prefixPath bezit.
Gefeliciteerd! congratulations
Gefeliciteerd, creeerde u, in werking stelde, en verifieerde de voorste-Eind pijpleiding die slechts bouwt en de module "ui.frontend"van het project van Plaatsen WKND opstelt. Nu kan uw front-end team snel het ontwerp en het gedrag van de site doorlopen, buiten de levenscyclus van het volledige AEM project.
Volgende stappen next-steps
In het volgende hoofdstuk, Overwegingen, zult u het effect op het front-end en back-end ontwikkelingsproces herzien.