Configurazione rapida AEM Headless per AEM as a Cloud Service

La configurazione rapida AEM Headless ti consente di utilizzare AEM Headless utilizzando il contenuto del progetto di esempio del sito WKND e un esempio di app React (SPA) che consuma il contenuto rispetto alle API AEM Headless GraphQL.

Prerequisiti

Per eseguire questa configurazione rapida sono necessari i seguenti elementi:

• Ambiente sandbox as a Cloud Service per AEM (preferibilmente sviluppo)
• Accesso a AEM as a Cloud Service e Cloud Manager
  • Amministratore AEM accesso a AEM as a Cloud Service
  • Cloud Manager - Responsabile dell’implementazione accesso a Cloud Manager
• I seguenti strumenti devono essere installati localmente:
  • Node.js v18
  • Git
  • Un IDE (ad esempio, Codice Microsoft® Visual Studio)

1. Creare un archivio Git di Cloud Manager

Innanzitutto, crea un archivio Git di Cloud Manager utilizzato per distribuire il sito WKND. Il sito WKND è un progetto di esempio per un sito web AEM che contiene contenuti (frammenti di contenuto) e un endpoint AEM GraphQL utilizzato dall’app React della configurazione rapida.

Schermata dei passaggi

1. Accedi a https://my.cloudmanager.adobe.com
2. Seleziona Cloud Manager Programma che contiene l’ambiente as a Cloud Service per l’AEM da utilizzare per questa configurazione rapida
3. 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

2. Invia il progetto di esempio del sito WKND all’archivio Git di Cloud Manager

Una volta creato l’archivio Git di Cloud Manager, clona il codice sorgente del progetto del sito WKND da GitHub e invialo all’archivio Git di Cloud Manager. Ora Cloud Manager per accedere e distribuire il progetto del sito WKND nell’ambiente as a Cloud Service dell’AEM.

Schermata dei passaggi

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

2. 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 Aggiungere un remoto all’archivio Git dalla riga di comando

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

3. 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 Nome utente e Password da Cloud Manager Informazioni archivio modale.

3. Distribuire il sito WKND in AEM as a Cloud Service

Quando il progetto del sito WKND viene inviato all’archivio Git di Cloud Manager, non può essere distribuito all’AEM as a Cloud Service tramite le pipeline di Cloud Manager.

Nota: il progetto del sito WKND fornisce contenuti di esempio che l’app React utilizza rispetto alle API GraphQL headless dell’AEM.

Schermata dei passaggi

1. Allega un Pipeline di implementazione non di produzione nel nuovo archivio Git
   1. Seleziona Pipeline nella navigazione superiore
   2. Seleziona Aggiungi pipeline dalla barra delle azioni superiore
   3. Il giorno Configurazione scheda
      1. Seleziona Pipeline di implementazione opzione
      2. Imposta il Nome pipeline non di produzione a 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. Sulla scheda Codice sorgente
      1. Seleziona Codice full stack opzione
      2. Seleziona la Ambiente di sviluppo as a Cloud Service AEM dal Ambienti di implementazione idonei casella di selezione
      3. Seleziona aem-headless-quick-setup-wknd nel Archivio casella di selezione
      4. Seleziona main dal Ramo Git casella di selezione
      5. Seleziona Salva
2. Esegui il Pipeline di implementazione per sviluppo
   1. Seleziona Panoramica nella navigazione superiore
   2. Individua la nuova Pipeline di implementazione per sviluppo nel Pipeline sezione
   3. Seleziona la … a destra della voce pipeline
   4. Seleziona Esegui, e conferma nel modale
   5. Seleziona la … a destra della pipeline attualmente in esecuzione
   6. Seleziona Visualizza dettagli
3. 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.

4. Scaricare ed eseguire l’app WKND React

Con AEM as a Cloud Service avviato con il contenuto del progetto del sito WKND, scarica e avvia l’app di reazione WKND di esempio che utilizza il contenuto del sito WKND sulle API GraphQL headless dell’AEM.

Schermata dei passaggi

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

2. Apri la cartella ~/Code/aem-guides-wknd-graphql/react-app nell’IDE.

3. Nell’IDE, apri il file .env.development.

4. Indicare l’AEM as a Cloud Service Pubblica URI host del servizio da REACT_APP_HOST_URI proprietà.

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

   Per trovare l'URI host del servizio di pubblicazione as a Cloud Service dell'AEM:

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

5. Nell’IDE, salva le modifiche apportate a .env.development

6. Dalla riga di comando, esegui React App

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

7. L’app React, in esecuzione localmente, inizia il http://localhost:3000 e visualizza un elenco di avventure, derivate dall’AEM as a Cloud Service utilizzando le API GraphQL dell’AEM Headless.

5. Modificare i contenuti in AEM

Con l’app di esempio WKND React che si connette e utilizza i contenuti delle API GraphQL headless dell’AEM, crea contenuti nel servizio di authoring dell’AEM e scopri come l’esperienza dell’app React si aggiorna insieme.

Schermata dei passaggi

1. Accedi al servizio di authoring as a Cloud Service per AEM

2. Accedi a Assets > File > WKND Condiviso > Inglese > Avventure

3. Apri Ciclismo nello Utah meridionale Cartella

4. Seleziona la Ciclismo nello Utah meridionale Frammento di contenuto e seleziona Modifica dalla barra delle azioni superiore

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

6. Seleziona Salva nella barra delle azioni superiore

7. Seleziona Pubblicazione rapida dalla barra delle azioni superiore …

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

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

10. 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
    SUGGERIMENTO

    Se non hai familiarità con la creazione e la pubblicazione di nuovi frammenti di contenuto o con l’annullamento della pubblicazione di frammenti di contenuto esistenti, guarda la schermata precedente.

Congratulazioni.

Congratulazioni. Hai utilizzato correttamente AEM Headless per alimentare un’app React.

Per comprendere in dettaglio come l’app React utilizza contenuti provenienti da AEM as a Cloud Service, vedi tutorial AEM headless. Il tutorial esplora come vengono creati i frammenti di contenuto in AEM e come questa app React utilizza i contenuti come JSON.

Passaggi successivi

• Avvia l’esercitazione su AEM headless