Snelle installatie van AEM headless voor AEM as a Cloud Service

Navigeer aan https://my.cloudmanager.adobe.com

Selecteer het Cloud Manager Programma dat het milieu van AEM as a Cloud Service aan gebruik voor deze snelle opstelling bevat

Een Git-opslagplaats maken voor het WKND-siteproject

1. Selecteer Bewaarplaatsen in de hoogste navigatie
2. Selecteer toevoegt Bewaarplaats in de hoogste actiebar
3. Geef de nieuwe Git-opslagplaats een naam: aem-headless-quick-setup-wknd
   • Namen van Git-opslagplaats moeten uniek zijn per Adobe-organisatie.
4. Selecteer sparen, en wacht op de bewaarplaats van het Git om te initialiseren

Van de bevellijn, kloon de broncode van het project van de steekproefWKND van de Plaats van GitHub

$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git

De Cloud Manager Git-opslagplaats toevoegen als een externe

1. Selecteer Bewaarplaatsen in de hoogste navigatie

2. Selecteer Info van de Reactie van de Toegang van de hoogste actiebar

3. Uitvoeren bevel dat in wordt gevonden voegt ver aan uw bewaarplaats van het Git van bevel-lijn toe

   code language-shell
   $ cd aem-guides-wknd $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/

Zet de broncode van het voorbeeldproject van uw lokale Git-opslagplaats naar de Cloud Manager Git-opslagplaats

$ git push adobe main:main

Wanneer ertoe aangezet voor geloofsbrieven, verstrek het Gebruikersnaam en Wachtwoord van de Informatie van de Bewaarplaats van Cloud Manager ____ modaal.

Verbind a niet-productie plaatsingspijpleiding aan de nieuwe bewaarplaats van het Git

1. Selecteer Pijpleidingen in de hoogste navigatie

2. Selecteer toevoegen Pijpleiding van de hoogste actiebar

3. Op het lusje van de Configuratie

   1. Selecteer optie van de Pijl van de Plaatsing 0}
   2. Plaats de Naam van de niet-Productie Pijpleiding aan Dev Deployment pipeline
   3. Selecteer Trigger van de Plaatsing > op de Veranderingen van de it
   4. Selecteer Belangrijk Metrisch Gedrag van Mislukt > ga onmiddellijk
   5. Selecteer verdergaan

4. Op het Source Code lusje

   1. Selecteer de Volledige optie van de Code van de Stapel 0}
   2. Selecteer het de ontwikkelomgeving van AEM as a Cloud Service van de In aanmerking komende Milieu's van de Plaatsing uitgezochte doos
   3. Selecteer aem-headless-quick-setup-wknd in de 2} uitgezochte doos van de Bewaarplaats {
   4. Selecteer main van de Tak van het Git uitgezochte doos
   5. Selecteer sparen

Stel de Dev Pipeline van de Plaatsing in werking

1. Selecteer Overzicht in de hoogste navigatie
2. Bepaal de plaats van de pas gecreëerde Dev pijpleiding van de Plaatsing in de Pijpleidingen sectie
3. Selecteer … rechts van de pijpleidingsingang
4. Selecteer Looppas, en bevestig in modaal
5. Selecteer … rechts van de nu lopende pijpleiding
6. Selecteer details van de Mening

Van de details van de pijpleidingsuitvoering, controleer vooruitgang tot het met succes voltooide. De uitvoering van de pijpleiding moet tussen 30 en 40 minuten duren.

Van de bevellijn, kloon de React broncode van App van GitHub.

$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

Open de map ~/Code/aem-guides-wknd-graphql/react-app in uw IDE.

Open het bestand .env.development in de IDE.

Punt aan AEM as a Cloud Service Publish de gastheer URI van de dienst van de dienst van het REACT_APP_HOST_URI bezit.

REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...

Ga als volgt te werk om de host-URI van uw AEM as a Cloud Service Publish-service te vinden:

1. In Cloud Manager, uitgezochte Milieu's in de hoogste navigatie
2. Selecteer het milieu van de Ontwikkeling
3. Bepaal de plaats van de Dienst van Publish (AEM & Dispatcher) verbinding de lijst van de Segmenten van het Milieu
4. Kopieer het adres van de koppeling en gebruik deze als URI van de AEM as a Cloud Service Publish-service

In winde, sparen de veranderingen in .env.development

Voer de React App vanaf de opdrachtregel uit

$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

React App, die plaatselijk loopt, begint op http://localhost:3000en toont een lijst van avonturen, die uit AEM as a Cloud Service gebruikend AEM Hoofdloze GraphQL APIs worden voortgebracht.

Aanmelden bij AEM as a Cloud Service Author-service

Navigeer aan Assets > Dossiers > Gedeelde WKND > Engels > avonturen

Open de Omslag van 0} Cycli Zuidelijke Utah {

Selecteer het Cyclische Zuidelijke Fragment van de Inhoud, en selecteer uitgeven van de hoogste actiebar

Werk enkele velden van het inhoudsfragment bij, bijvoorbeeld:

• Titel: Cycling Utah's National Parks
• Lengte van strook: 6 Days
• Probleem: Intermediate
• Prijs: 3500
• Primaire afbeelding: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Selecteer sparen in de hoogste actiebar

Selecteer Snelle Publish van de hoogste actiebar …

Vernieuw React App die op http://localhost:3000loopt.

Selecteer in React App het nu bijgewerkte cyclusavontuur, en verifieer de inhoudsveranderingen die aan het Inhoudsfragment worden aangebracht.

Dezelfde aanpak gebruiken in AEM Auteursservice:

1. Publiceer een bestaand fragment van de Inhoud van het Avontuur, en verifieer het wordt verwijderd uit React App ervaring
2. Maak en publiceer een nieuw Adventure Content Fragment en controleer of dit wordt weergegeven in de React App-ervaring