Configurazione rapida AEM Headless per AEM as a Cloud Service

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

Prerequisiti

Per eseguire questa configurazione rapida, è necessario quanto segue:

  • AEM ambiente Sandbox as a Cloud Service (preferibilmente Sviluppo)
  • Accesso a AEM as a Cloud Service e Cloud Manager
    • Amministratore AEM accesso a AEM as a Cloud Service
    • Cloud Manager - Gestione distribuzione accesso a Cloud Manager
  • È necessario installare localmente i seguenti strumenti:

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 esempio AEM progetto web che contiene contenuto (frammenti di contenuto) e un endpoint GraphQL AEM utilizzato dall'app React dell'impostazione rapida.

Schermata dei passaggi

  1. Passa a https://my.cloudmanager.adobe.com
  2. Seleziona Cloud Manager Programma che contiene l'ambiente as a Cloud Service AEM da utilizzare per questa configurazione rapida
  3. Creare un archivio Git per il progetto WKND Site
    1. Seleziona Repository nella navigazione superiore
    2. Seleziona Aggiungi archivio nella barra delle azioni superiore
    3. Assegna un nome al nuovo archivio Git: aem-headless-quick-setup-wknd
      • I nomi dell’archivio Git devono essere univoci per organizzazione Adobe,
    4. Seleziona Salva e attendere l’inizializzazione dell’archivio Git

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

Con l’archivio Git di Cloud Manager creato, clona il codice sorgente del progetto WKND Site da GitHub e invialo all’archivio Git di Cloud Manager. Ora Cloud Manager consente di accedere al progetto WKND Site e di distribuirlo nell’ambiente as a Cloud Service AEM.

Schermata dei passaggi

  1. Dalla riga di comando, duplica 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 remoto

    1. Seleziona Repository nella navigazione superiore

    2. Seleziona Accesso alle informazioni sul repository dalla barra delle azioni superiore

    3. Esegui comando 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 viene richiesto di specificare le credenziali, fornisci Nome utente e Password da Cloud Manager Informazioni archivio modale.

3. Distribuisci il sito WKND per AEM as a Cloud Service

Con il progetto WKND Site inviato all’archivio Git di Cloud Manager, non può essere distribuito AEM as a Cloud Service utilizzando le pipeline di Cloud Manager.

Tieni presente che il progetto Sito WKND fornisce contenuti di esempio che l’app React consuma rispetto AEM API GraphQL headless.

Schermata dei passaggi

  1. Allega un pipeline di distribuzione non di produzione al nuovo archivio Git
    1. Seleziona Tubi nella navigazione superiore
    2. Seleziona Aggiungi pipeline dalla barra delle azioni superiore
    3. Sulla Configurazione scheda
      1. Seleziona Pipeline di distribuzione opzione
      2. Imposta la Nome della pipeline non di produzione a Dev Deployment pipeline
      3. Seleziona Trigger distribuzione > In caso di modifiche Git
      4. Seleziona Comportamento degli errori di metrica importante > Continua immediatamente
      5. Seleziona Continua
    4. Sulla scheda Codice sorgente
      1. Seleziona Codice Stack Completo opzione
      2. Seleziona la AEM ambiente di sviluppo as a Cloud Service dal Ambienti di distribuzione idonei casella di selezione
      3. Seleziona aem-headless-quick-setup-wknd in Archivio casella di selezione
      4. Seleziona main dal Ramo Git casella di selezione
      5. Seleziona Salva
  2. Esegui il Pipeline di distribuzione di sviluppo
    1. Seleziona Panoramica nella navigazione superiore
    2. Individua la nuova creazione pipeline di distribuzione di sviluppo in Tubi sezione
    3. Seleziona la … a destra dell’entrata della 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, controlla l’avanzamento fino al completamento corretto. L’esecuzione della pipeline deve 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 WKND Site , scarica e avvia l’app di reazione WKND di esempio che consuma il contenuto del sito WKND rispetto AEM API GraphQL headless.

Schermata dei passaggi

  1. Dalla riga di comando, duplica 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. Punta alla AEM as a Cloud Service Pubblica URI host del servizio dal REACT_APP_HOST_URI proprietà.

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

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

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

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

  6. Dalla riga di comando, esegui l’app React

    $ 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 delle avventure, provenienti da AEM as a Cloud Service utilizzando AEM API GraphQL di Headless.

5. Modifica contenuto in AEM

Con l’app React WKND di esempio che si collega e consuma contenuti dalle API GraphQL AEM headless, crea contenuti nel servizio Author di AEM e osserva come l’esperienza dell’app React si aggiorna di concerto.

Schermata dei passaggi

  1. Accedi a AEM servizio Author as a Cloud Service

  2. Passa a Risorse > 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
    • Lunghezza del 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 ciclica ora aggiornata e verifica le modifiche apportate al contenuto nel frammento di contenuto.

  10. Utilizzando lo stesso approccio, nel servizio AEM Author:

    1. Annullare la pubblicazione di un frammento di contenuto avventura esistente e verificare che sia stato rimosso dall’esperienza React App
    2. Crea e pubblica un nuovo frammento di contenuto Avventura e verifica che venga visualizzato nell’esperienza App React
    SUGGERIMENTO

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

Congratulazioni!

Congratulazioni! Hai utilizzato con successo AEM Headless per alimentare un'app React!

Per capire in dettaglio come l’app React consuma contenuti da AEM as a Cloud Service, effettua il check-out tutorial AEM Headless. L’esercitazione esplora il modo in cui i frammenti di contenuto in AEM sono stati creati e come l’app React utilizza i loro contenuti come JSON.

Passaggi successivi

In questa pagina