Configurazione rapida AEM Headless per AEM as a Cloud Service

Passa a https://my.cloudmanager.adobe.com

Seleziona il programma Cloud Manager contenente l'ambiente AEM as a Cloud Service da utilizzare per questa installazione rapida

Creare un archivio Git per il progetto del sito WKND

1. Seleziona Archivi nella navigazione superiore
2. Seleziona Aggiungi archivio nella barra delle azioni superiore
3. Denomina il nuovo archivio Git: aem-headless-quick-setup-wknd
   • I nomi degli archivi Git devono essere univoci per ogni organizzazione di Adobe,
4. Seleziona Salva e attendi l'inizializzazione dell'archivio Git

Dalla riga di comando, clona il codice sorgente del progetto WKND Site di esempio da GitHub

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

Aggiungere l’archivio Git di Cloud Manager come archivio remoto

1. Seleziona Archivi nella navigazione superiore

2. Seleziona Accedi a dati archivio dalla barra delle azioni superiore

3. Comando Execute trovato in Aggiungi un remoto all'archivio Git dalla riga di comando

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

Invia il codice sorgente del progetto di esempio dall’archivio Git locale all’archivio Git di Cloud Manager

$ git push adobe main:main

Quando vengono richieste le credenziali, fornisci il Nome utente e la Password dal modale Informazioni archivio di Cloud Manager.

Allega una pipeline di distribuzione non di produzione al nuovo archivio Git

1. Seleziona Pipeline nella navigazione superiore

2. Seleziona Aggiungi pipeline dalla barra delle azioni superiore

3. Nella scheda Configurazione

   1. Seleziona opzione Pipeline di distribuzione
   2. Imposta Nome pipeline non di produzione su Dev Deployment pipeline
   3. Seleziona Trigger distribuzione > In caso di modifiche Git
   4. Seleziona Comportamento in caso di errori di metriche importanti > Continua immediatamente
   5. Seleziona Continua

4. Nella scheda Codice Source

   1. Seleziona opzione Codice full stack
   2. Seleziona l'ambiente di sviluppo AEM as a Cloud Service dalla casella di selezione Ambienti di distribuzione idonei
   3. Seleziona aem-headless-quick-setup-wknd nella casella di selezione Archivio
   4. Seleziona main dalla casella di selezione Ramo Git
   5. Seleziona Salva

Esegui la pipeline di distribuzione Dev

1. Seleziona Panoramica nella navigazione superiore
2. Individua la pipeline di distribuzione Dev appena creata nella sezione Pipeline
3. Seleziona … a destra della voce della pipeline
4. Seleziona Esegui e conferma nel modale
5. Seleziona … a destra della pipeline attualmente in esecuzione
6. Seleziona Visualizza dettagli

Dai dettagli dell’esecuzione della pipeline, monitora l’avanzamento fino al suo completamento corretto. L’esecuzione della pipeline dovrebbe richiedere tra 30 e 40 minuti.

Dalla riga di comando, clona il codice sorgente dell’app React da GitHub.

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

Aprire la cartella ~/Code/aem-guides-wknd-graphql/react-app nell'IDE.

Nell'IDE aprire il file .env.development.

Scegliere l'URI host del servizio AEM as a Cloud Service Publish dalla proprietà REACT_APP_HOST_URI.

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

Per trovare l’URI host del servizio AEM as a Cloud Service Publish:

1. In Cloud Manager, seleziona Ambienti nella navigazione superiore
2. Seleziona ambiente Sviluppo
3. Individua la tabella Servizio Publish (AEM e Dispatcher) collegamento Segmenti di ambiente
4. Copia l’indirizzo del collegamento e utilizzalo come URI del servizio AEM as a Cloud Service Publish

Nell'IDE, salvare le modifiche apportate a .env.development

Dalla riga di comando, esegui React App

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

L'app React, eseguita localmente, inizia il http://localhost:3000 e visualizza un elenco di avventure, provenienti da AEM as a Cloud Service con le API GraphQL di AEM Headless.

Accedi al servizio AEM as a Cloud Service Author

Passa a Assets > File > WKND condiviso > Inglese > Avventure

Apri la cartella Ciclismo nello Utah meridionale

Seleziona il frammento di contenuto Ciclismo nello Utah meridionale e seleziona Modifica dalla barra delle azioni superiore

Aggiorna alcuni campi del frammento di contenuto, ad esempio:

• Titolo: Cycling Utah's National Parks
• Durata viaggio: 6 Days
• Difficoltà: Intermediate
• Prezzo: 3500
• Immagine principale: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Seleziona Salva nella barra delle azioni superiore

Seleziona Publish rapido dal della barra delle azioni superiore…

Aggiorna l'app React in esecuzione su http://localhost:3000.

Nell’app React, seleziona l’avventura Ciclismo ora aggiornata e verifica le modifiche al contenuto apportate al frammento di contenuto.

Con lo stesso approccio, nel servizio di authoring dell’AEM:

1. Annulla la pubblicazione di un frammento di contenuto Adventure esistente e verifica che sia stato rimosso dall’esperienza di app di React
2. Crea e pubblica un nuovo frammento di contenuto Avventura e verificane la visualizzazione nell’esperienza di React App