AEM Headless-Schnelleinrichtung für AEM as a Cloud Service

Mit der AEM Headless-Schnelleinrichtung erhalten Sie praktische Informationen zu AEM Headless mithilfe von Inhalten aus dem WKND Site-Beispielprojekt und einer React App (einem SPA), die den Inhalt über AEM Headless GraphQL-APIs nutzt.

Voraussetzungen

Die folgenden Schritte sind erforderlich, um dieser schnellen Einrichtung zu folgen:

  • AEM as a Cloud Service Sandbox-Umgebung (vorzugsweise Entwicklung)
  • Zugriff auf AEM as a Cloud Service und Cloud Manager
    • AEM Administrator Zugang zu AEM as a Cloud Service
    • Cloud Manager - Deployment Manager Zugriff auf Cloud Manager
  • Die folgenden Tools müssen lokal installiert sein:

1. Cloud Manager-Git-Repository erstellen

Erstellen Sie zunächst ein Cloud Manager-Git-Repository, das zur Bereitstellung der WKND-Site verwendet wird. Die WKND-Site ist ein AEM Website-Beispielprojekt, das Inhalte (Inhaltsfragmente) und einen GraphQL-AEM-Endpunkt enthält, der von der React-App der Schnelleinrichtung verwendet wird.

Screencast von Schritten

  1. Navigieren Sie zu https://my.cloudmanager.adobe.com
  2. Cloud Manager auswählen Programm , die die AEM as a Cloud Service Umgebung für diese schnelle Einrichtung enthält
  3. Erstellen eines Git-Repositorys für das WKND Site-Projekt
    1. Auswählen Repositorys in der oberen Navigation
    2. Auswählen Repository hinzufügen in der oberen Aktionsleiste
    3. Benennen Sie das neue Git-Repository: aem-headless-quick-setup-wknd
      • Git-Repository-Namen müssen pro Adobe-Organisation eindeutig sein;
    4. Auswählen Speichern und warten, bis das Git-Repository initialisiert wird

2. Push-Beispiel für ein WKND-Site-Projekt in das Cloud Manager-Git-Repository

Nachdem das Cloud Manager-Git-Repository erstellt wurde, klonen Sie den Quellcode des WKND-Site-Projekts von GitHub und pushen Sie ihn an das Cloud Manager-Git-Repository. Jetzt kann Cloud Manager auf das WKND Site-Projekt in der AEM as a Cloud Service Umgebung zugreifen und es bereitstellen.

Screencast von Schritten

  1. Klonen Sie in der Befehlszeile den Quellcode des WKND Site-Beispielprojekts von GitHub

    $ mkdir -p ~/Code
    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd.git
    
  2. Cloud Manager-Git-Repository als Remote-Domäne hinzufügen

    1. Auswählen Repositorys in der oberen Navigation

    2. Auswählen Zugriff auf Repo Info in der oberen Aktionsleiste

    3. Befehl "Ausführen", gefunden in Remote zu Ihrem Git-Repository hinzufügen über die Befehlszeile

      $ cd aem-guides-wknd
      $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
      
  3. Pushen Sie den Quellcode des Beispielprojekts aus Ihrem lokalen Git-Repository in das Cloud Manager-Git-Repository.

    $ git push adobe main:main
    

    Wenn Sie nach Anmeldeinformationen gefragt werden, geben Sie die Benutzername und Passwort von Cloud Manager Repository-Informationen modal.

3. Stellen Sie die WKND-Site für AEM as a Cloud Service bereit.

Wenn das WKND Site-Projekt in das Cloud Manager-Git-Repository gepusht wird, kann es nicht mithilfe von Cloud Manager-Pipelines AEM as a Cloud Service bereitgestellt werden.

Beachten Sie, dass das WKND Site-Projekt Beispielinhalte bereitstellt, die die React-App über AEM Headless GraphQL-APIs nutzt.

Screencast von Schritten

  1. Anfügen eines Bereitstellungs-Pipeline für Nicht-Produktion zum neuen Git-Repository
    1. Auswählen Pipelines in der oberen Navigation
    2. Auswählen Pipeline hinzufügen in der oberen Aktionsleiste
    3. Im Konfiguration tab
      1. Auswählen Bereitstellungs-Pipeline option
      2. Legen Sie die Name der produktionsfremden Pipeline nach Dev Deployment pipeline
      3. Auswählen Bereitstellungs-Trigger > Bei Git-Änderungen
      4. Auswählen Verhalten bei wichtigen Metrikfehlern > Sofort fortfahren
      5. Klicken Sie auf Weiter
    4. Auf der Registerkarte Quell-Code
      1. Auswählen Vollständiger Stack-Code option
      2. Wählen Sie die AEM as a Cloud Service Entwicklungsumgebung von Förderfähige Bereitstellungsumgebungen Auswahlfeld
      3. Auswählen aem-headless-quick-setup-wknd im Repository Auswahlfeld
      4. Auswählen main von Git-Verzweigung Auswahlfeld
      5. Wählen Sie Speichern aus
  2. Führen Sie die Dev-Bereitstellungs-Pipeline
    1. Auswählen Übersicht in der oberen Navigation
    2. Suchen Sie die neu erstellte Pipeline zur Dev-Implementierung im Pipelines Abschnitt
    3. Wählen Sie die rechts vom Pipeline-Eintrag
    4. Auswählen Ausführen und bestätigen Sie im Modal
    5. Wählen Sie die rechts von der derzeit ausgeführten Pipeline
    6. Auswählen Details anzeigen
  3. Überwachen Sie in den Details der Pipeline-Ausführung den Fortschritt, bis er erfolgreich abgeschlossen wurde. Die Pipelineausführung sollte zwischen 30 und 40 Minuten dauern.

4. Laden Sie die WKND React-App herunter und führen Sie sie aus.

Laden Sie AEM as a Cloud Service Bootstrapping für den Inhalt aus dem WKND Site-Projekt herunter und starten Sie die WKND React App-Beispielanwendung, die den Inhalt der WKND-Site über AEM Headless GraphQL-APIs nutzt.

Screencast von Schritten

  1. Klonen Sie in der Befehlszeile den Quell-Code der React-App von GitHub aus.

    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Öffnen Sie den Ordner . ~/Code/aem-guides-wknd-graphql/react-app in Ihrer IDE.

  3. Öffnen Sie in der IDE die -Datei. .env.development.

  4. Auf das AEM as a Cloud Service verweisen Veröffentlichen Host-URI des Dienstes aus der REACT_APP_HOST_URI -Eigenschaft.

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

    So suchen Sie den Host-URI Ihres AEM as a Cloud Service Publish-Dienstes:

    1. Wählen Sie in Cloud Manager Umgebungen in der oberen Navigation
    2. Auswählen Entwicklung Umgebung
    3. Suchen Sie die Veröffentlichungsdienst (AEM und Dispatcher) link Umgebungssegmente table
    4. Kopieren Sie die Adresse des Links und verwenden Sie sie als URI des AEM as a Cloud Service Publish-Dienstes
  5. Speichern Sie in der IDE die Änderungen in .env.development

  6. Führen Sie in der Befehlszeile die React-App aus.

    $ cd ~/Code/aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  7. Die React-App, die lokal ausgeführt wird, beginnt auf http://localhost:3000 und zeigt eine Liste von Abenteuern an, die aus AEM as a Cloud Service mithilfe AEM Headless-GraphQL-APIs bezogen werden.

5. Bearbeiten von Inhalten in AEM

Mit der WKND-React-App, die eine Verbindung zu und Nutzung von Inhalten aus den AEM Headless-GraphQL-APIs herstellt, erstellen Sie Inhalte im AEM-Autorendienst und sehen Sie, wie das Erlebnis der React-App gemeinsam aktualisiert wird.

Screencast von Schritten

  1. Bei AEM as a Cloud Service Authoring-Dienst anmelden

  2. Navigieren Sie zu Assets > Dateien > WKND-freigegeben > Englisch > Abenteuer

  3. Öffnen Sie die Radfahren in Süd-Utah Ordner

  4. Wählen Sie die Radfahren in Süd-Utah Inhaltsfragment und wählen Sie Bearbeiten in der oberen Aktionsleiste

  5. Aktualisieren Sie einige Felder des Inhaltsfragments, z. B.:

    • Titel: Cycling Utah's National Parks
    • Reisedauer: 6 Days
    • Schwierigkeit: Intermediate
    • Preis: 3500
    • Primäres Bild: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
  6. Auswählen Speichern in der oberen Aktionsleiste

  7. Auswählen Quick Publish in der oberen Aktionsleiste

  8. React-App aktualisieren, die ausgeführt wird http://localhost:3000.

  9. Wählen Sie in der React-App das jetzt aktualisierte Cycling-Abenteuer aus und überprüfen Sie die Inhaltsänderungen, die am Inhaltsfragment vorgenommen wurden.

  10. Verwenden Sie denselben Ansatz im AEM-Autorendienst:

    1. Rückgängigmachen der Veröffentlichung eines vorhandenen Adventure-Inhaltsfragments und Überprüfen, ob es aus dem React-App-Erlebnis entfernt wurde
    2. Erstellen und veröffentlichen Sie ein neues Adventure Content Fragment und überprüfen Sie, ob es im Erlebnis "React App"angezeigt wird.
    TIPP

    Wenn Sie nicht mit dem Erstellen und Veröffentlichen neuer oder dem Rückgängigmachen der Veröffentlichung vorhandener Inhaltsfragmente vertraut sind, sehen Sie sich den obigen Screencast an.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben erfolgreich AEM Headless verwendet, um eine React App zu betreiben!

Um genau zu verstehen, wie die React-App Inhalte von AEM as a Cloud Service nutzt, besuchen Sie das AEM Headless-Tutorial. In diesem Tutorial wird untersucht, wie Inhaltsfragmente in AEM erstellt wurden und wie diese React-App ihren Inhalt als JSON nutzt.

Nächste Schritte

Auf dieser Seite