DocumentatieAEMTutorials voor AEMAEM Sites WKND-tutorials

Implementeren met behulp van de front-end pijplijn

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • tussenpersoon
  • Ontwikkelaar
  • Beheerder

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 met https://static-

Het gebruiken van de front-end pijpleiding

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

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.

noem Pijpleiding anders

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.

de Pijpleiding van de Configuratie van de Code van Source

Een front-end pijplijn maken

SLECHTS bouwt en stelt de front-end middelen van de ui.frontend module op, voert de volgende stappen uit:

  1. 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.

  2. 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

creeer Voorste-Eind de Configuraties van de Pijpleiding

  1. 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.

creeer Voorste-Eind de Code van Source van de Pijpleiding

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.

Unstyled WKND Plaats

WARNING
Na, zal het FullStack WKND opstellen om pijpleidingsvoltooiing te ontwikkelen u een niet gestileerde Plaats hebben WKND, die gebroken kan lijken. Gelieve te plannen voor een stroomonderbreking of op te stellen tijdens oneven uren, is dit een eenmalig onderbreking u voor tijdens de aanvankelijke schakelaar van het gebruiken van één enkele full-stack pijpleiding aan de front-end pijpleiding moet plannen.
  • 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.
IMPORTANT
U merkt dat de ongestileerde plaats WKND terug naar normaal is en deze tijd 3} pijpleiding FrontEnd {was veel sneller dan de volledig-stapelpijpleiding.

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 het HtmlPageItemsConfig -bestand.

Nieuw gestileerde WKND Plaats

TIP
$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.

Correlatie van de Waarde van de knoeiboel

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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9