Implementeren met behulp van de front-end pijplijn

In dit hoofdstuk maken en uitvoeren we een front-end pijplijn in Adobe Cloud Manager. 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 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.

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.

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, klikken Toevoegen en vervolgens selecteert u 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

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.

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

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

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.

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