Implementeren met behulp van de front-end pijplijn

In dit hoofdstuk, creëren wij en stellen een front-end pijpleiding in de Manager van de Adobe Cloud in werking. De bestanden worden alleen samengesteld op basis van ui.frontend en zet hen aan ingebouwde CDN in as a Cloud Service AEM op. Op die manier wordt de /etc.clientlibs gebaseerde front-end levering van resources.

Doelstellingen

  • Creeer en stel een front-end pijpleiding in werking.
  • Controleren of front-end resources NIET worden geleverd vanuit /etc.clientlibs maar van een nieuwe hostnaam die begint met https://static-

Het gebruiken van de front-end pijpleiding

Vereisten

Dit is een meerdelige zelfstudie en er wordt aangenomen dat de stappen die worden beschreven in het dialoogvenster Standaard AEM project bijwerken zijn voltooid.

Zorg ervoor dat u rechten om pijpleidingen te maken en te implementeren in Cloud Manager en toegang tot een AEM as a Cloud Service omgeving.

Bestaande pijpleiding hernoemen

De naam van de bestaande pijpleiding wijzigen vanuit Distribueren naar Dev tot FullStack WKND-implementatie voor Dev door naar de Configuratie tabs Naam niet-productiepijpleiding veld. Dit moet het uitdrukkelijk maken of een pijpleiding volledig-stapel of front-end door enkel zijn naam te bekijken is.

Naam pijpleiding wijzigen

Ook in de Broncode , zorgt u ervoor dat de waarden in de velden Opslagplaats en Git Branch correct zijn en dat de vertakking de wijzigingen in uw eerstelijns pijpleidingcontract bevat.

Broncodeconfiguratiepijp

Een front-end pijplijn maken

Naar ALLEEN bouwen en de front-end middelen van ui.frontend voert u de volgende stappen uit:

  1. In de interface van Cloud Manager gaat u van de Pijpleidingen sectie, klikt u op Toevoegen selecteert u vervolgens Niet-productiepijpleiding toevoegen (of Productiepijpleiding toevoegen) gebaseerd op de AEM as a Cloud Service omgeving waarin u wilt implementeren.

  2. In de Niet-productiepijpleiding toevoegen als onderdeel van de Configuratie stappen selecteert u de Implementatiepijp optie, naam geven als FrontEnd WKND-implementatie naar Dev en klik op Doorgaan

Voor-eindpijplijnconfiguraties maken

  1. Als onderdeel van het Broncode stappen selecteert u de Code frontend en kiest u de omgeving uit In aanmerking komende implementatieomgevingen. In de Broncode de sectie zorgt ervoor dat de waarden van de het gebiedswaarden van de Opslagplaats en van de Tak van het Bewaarplaats correct zijn en de tak uw voorste-eindveranderingen van het pijpleidingscontract heeft.
    en belangrijkste voor de Codelocatie veld de waarde is /ui.frontend en ten slotte klikt u op Opslaan.

Broncode voor voorkant pijpleiding maken

Implementatiereeks

  • Voer de nieuwe naam eerst uit FullStack WKND-implementatie voor Dev pijpleiding om de KND clientlib dossiers uit de AEM bewaarplaats te verwijderen. En het belangrijkste is de AEM voor het front-end pijpleidingscontract door toe te voegen Configureren bestanden (SiteConfig, HtmlPageItemsConfig).

Niet-opgemaakte WKND-site

WAARSCHUWING

Na, FullStack WKND-implementatie voor Dev voltooiing van de pijpleiding u zult hebben ongestipt WKND-site, die mogelijk beschadigd lijkt. 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.

  • Als laatste voert u de FrontEnd WKND-implementatie naar Dev pijpleiding om slechts te bouwen ui.frontend en stel direct de front-end middelen aan CDN op.
BELANGRIJK

U merkt dat de ongestipt De WKND-site is weer normaal en dit keer FrontEnd de pijpleiding uitvoerde veel sneller dan de full-stack pijpleiding.

Stijlwijzigingen en nieuw leveringsparadigma controleren

  • Open de WKND-site op een willekeurige pagina en u kunt de tekstkleur bekijken Adobe rood en de front-end (CSS, JS) dossiers worden geleverd van CDN. De hostnaam van de resourceaanvraag begint met https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css en ook de site.js of andere statische bronnen waarnaar u verwijst in het dialoogvenster HtmlPageItemsConfig bestand.

Nieuw opgemaakte WKND-site

TIP

De $HASH_VALUE$ hier is hetzelfde als wat je ziet in de FrontEnd WKND-implementatie naar Dev pijpleiding HASH INHOUD veld. AEM wordt op de hoogte gebracht van de CDN-URL van de front-end bron. De waarde wordt opgeslagen bij /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content krachtens prefixPath eigenschap.

Hash-waardecorrelatie

Gefeliciteerd!

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 front-end gedrag van de site doorlopen, buiten de levenscyclus van het volledige AEM project.

Volgende stappen

In het volgende hoofdstuk: Overwegingen, zult u de gevolgen voor het front-end en back-end ontwikkelingsproces evalueren.

Op deze pagina