AEM Headless snabbinstallation av AEM as a Cloud Service

Navigera till https://my.cloudmanager.adobe.com

Välj den Program för Cloud Manager som innehåller den AEM as a Cloud Service-miljö som ska användas för den här snabbinstallationen

Skapa en Git-databas för WKND-webbplatsprojektet

1. Välj Databaser i den övre navigeringen
2. Välj Lägg till databas i det övre åtgärdsfältet
3. Namnge den nya Git-databasen: aem-headless-quick-setup-wknd
   • Git-databasnamn måste vara unika för varje Adobe-organisation,
4. Välj Spara och vänta tills Git-databasen initieras

Klona WKND-webbplatsprojektets källkod från GitHub från kommandoraden

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

Lägg till Cloud Manager Git-databasen som en fjärrserver

1. Välj Databaser i den övre navigeringen

2. Välj Åtkomst till replikinformation i det övre åtgärdsfältet

3. Kommandot Kör hittades i Lägg till en fjärranslutning till Git-databasen från kommandoraden

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

Överför exempelprojektets källkod från din lokala Git-databas till Cloud Manager Git-databasen

$ git push adobe main:main

Ange användarnamn och lösenord från Cloud Manager databasinformation när du uppmanas att ange autentiseringsuppgifter.

Bifoga en icke-produktionsdistributionspipeline till den nya Git-databasen

1. Välj Förgreningar i den övre navigeringen

2. Välj Lägg till pipeline i det övre åtgärdsfältet

3. På fliken Konfiguration

   1. Välj alternativet Distributionspipeline
   2. Ange icke-produktionsförloppsnamnet till Dev Deployment pipeline
   3. Välj Distributionsutlösare > Vid Git-ändringar
   4. Välj Beteende vid viktiga mätfel > Fortsätt omedelbart
   5. Välj Fortsätt

4. På fliken Source Code

   1. Välj alternativet Fullständig stackkod
   2. Välj AEM as a Cloud Service-utvecklingsmiljö i rutan Berättigade distributionsmiljöer
   3. Välj aem-headless-quick-setup-wknd i valrutan Databas
   4. Välj main i Git-grenen
   5. Välj Spara

Kör Dev Deployment Pipeline

1. Markera Översikt i den övre navigeringen
2. Leta reda på den nyskapade Dev Deployment-pipelinen i avsnittet Pipelines
3. Välj … till höger om pipeline-posten
4. Välj Kör och bekräfta i den modala
5. Välj … till höger om den pipeline som nu körs
6. Välj Visa information

Övervaka förloppet tills det har slutförts utifrån information om pipelinekörningen. Körning av pipeline bör ta mellan 30 och 40 minuter.

Från kommandoraden klonar du React Apps källkod från GitHub.

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

Öppna mappen ~/Code/aem-guides-wknd-graphql/react-app i din IDE.

Öppna filen .env.development i IDE.

Peka på AEM as a Cloud Service Publish-tjänstens värd-URI från egenskapen REACT_APP_HOST_URI.

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

Så här hittar du AEM as a Cloud Service Publish-tjänstens värd-URI:

1. I Cloud Manager väljer du Miljö i den översta navigeringen
2. Välj Utvecklingsmiljö
3. Leta reda på tabellen Publiceringstjänst (AEM & Dispatcher) link Miljösegment
4. Kopiera länkens adress och använd den som URI för AEM as a Cloud Service Publish-tjänsten

I IDE sparar du ändringarna i .env.development

Kör React App från kommandoraden

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

React-appen, som körs lokalt, börjar http://localhost:3000 och visar en lista över äventyren som kommer från AEM as a Cloud Service med AEM Headless GraphQL API:er.

Logga in på tjänsten AEM as a Cloud Service Author

Navigera till Assets > Filer > WKND Delad > Engelska > Tillägg

Öppna mappen Cycling Southern Utah

Markera innehållsavsnittet Cycling Southern Utah och välj Redigera i det övre åtgärdsfältet

Uppdatera vissa fält i innehållsfragmentet, till exempel:

• Titel: Cycling Utah's National Parks
• Reselängd: 6 Days
• Svårighet: Intermediate
• Pris: 3500
• Primär bild: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Välj Spara i det övre åtgärdsfältet

Välj Snabbpublicering i det övre åtgärdsfältets …

Uppdatera React App som körs http://localhost:3000.

I React App (Reagera app) markerar du det nu uppdaterade Cycling-äventyret och verifierar innehållsändringarna i Content Fragment.

På samma sätt som i tjänsten AEM Author:

1. Avpublicera ett befintligt Adventure-innehållsfragment och verifiera att det har tagits bort från upplevelsen React App
2. Skapa och publicera ett nytt Adventure Content Fragment och verifiera att det visas i React App Experience