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

Navigieren Sie zu https://my.cloudmanager.adobe.com.

Wählen Sie das Cloud Manager-Programm aus, das die AEM as a Cloud Service-Umgebung für diese Schnelleinrichtung enthält

Erstellen Sie ein Git-Repository für das WKND-Site-Projekt.

1. Wählen Sie Repositorys im oberen Navigationsbereich aus.
2. Wählen Sie Repository hinzufügen in der oberen Aktionsleiste aus.
3. Benennen Sie das neue Git-Repository: aem-headless-quick-setup-wknd
   • Git-Repository-Namen müssen pro Adobe-Organisation eindeutig sein.
4. Wählen Sie Speichern aus und warten Sie, bis das Git-Repository initialisiert wird.

Klonen Sie in der Befehlszeile den Quell-Code des WKND-Site-Beispielprojekts von GitHub.

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

Fügen Sie das Cloud Manager-Git-Repository als Remote-Repository hinzu.

1. Wählen Sie Repositorys im oberen Navigationsbereich aus.

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

3. Führen Sie den Befehl in Remote zu Ihrem Git-Repository hinzufügen über die Befehlszeile aus.

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

Übertragen Sie den Quell-Code 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 den Benutzernamen und das Kennwort aus dem modalen Cloud Manager-Fenster Repository-Informationen ein.

Fügen Sie eine produktionsfremde Bereitstellungs-Pipeline an das neue Git-Repository an.

1. Wählen Sie Pipelines im oberen Navigationsbereich aus.

2. Wählen Sie Pipeline hinzufügen in der oberen Aktionsleiste aus.

3. Auf der Registerkarte Konfiguration

   1. Wählen Sie die Option Bereitstellungs-Pipeline aus.
   2. Legen Sie den Namen der produktionsfremden Pipeline auf Dev Deployment pipeline fest.
   3. Wählen Sie Bereitstellungsauslöser > Bei Git-Änderungen
   4. Wählen Sie Verhalten bei wichtigen Metrikfehlern > Sofort fortfahren
   5. Klicken Sie auf Weiter

4. Auf der Registerkarte Quell-Code

   1. Wählen Sie die Option Vollständiger Stack-Code
   2. Wählen Sie die AEM as a Cloud Service-Entwicklungsumgebung aus dem Auswahlfeld Mögliche Bereitstellungsumgebungen
   3. Wählen Sie aem-headless-quick-setup-wknd im Auswahlfeld Repository
   4. Wählen Sie main aus dem Auswahlfeld Git-Verzweigung
   5. Wählen Sie Speichern aus

Führen Sie die Dev-Bereitstellungs-Pipeline aus

1. Wählen Sie Übersicht in der oberen Navigationsleiste
2. Suchen Sie die neu erstellte Dev-Bereitstellungs-Pipeline im Pipelines-Abschnitt
3. Wählen Sie … rechts vom Pipeline-Eintrag
4. Wählen Sie Ausführen und bestätigen Sie es im modalen Fenster
5. Wählen Sie … rechts von der derzeit ausgeführten Pipeline
6. Wählen Sie Details anzeigen

Überwachen Sie ausgehend von den Details der Pipeline-Ausführung den Fortschritt, bis er erfolgreich abgeschlossen ist. Die Pipelineausführung sollte zwischen 30 und 40 Minuten dauern.

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

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

Öffnen Sie den Ordner ~/Code/aem-guides-wknd-graphql/react-app in Ihrer IDE.

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

Zeigen Sie auf den Host-URI des Veröffentlichungsinstanz-Service von AEM as a Cloud Service aus der Eigenschaft REACT_APP_HOST_URI.

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

So suchen Sie Ihren Host-URI des Veröffentlichungsinstanz-Service von AEM as a Cloud Service:

1. Wählen Sie in Cloud Manager Umgebungen in der oberen Navigationsleiste
2. Wählen Sie Implementierungsumgebung
3. Suchen Sie den Link zum Veröffentlichungsinstanz-Service (AEM und Dispatcher) in der Tabelle Umgebungssegmente
4. Kopieren Sie die Adresse des Links und verwenden Sie sie als URI des Veröffentlichungs-Service von AEM as a Cloud Service

Speichern Sie in der IDE die Änderungen in .env.development

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

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

Die React-App, die lokal ausgeführt wird, beginnt auf http://localhost:3000 und zeigt eine Liste von Adventures an, die über GraphQL-APIs von AEM Headless aus AEM as a Cloud Service aufgerufen werden.

Melden Sie sich beim Authoring-Service von AEM as a Cloud Service an

Navigieren Sie zu Assets > Dateien > WKND Shared > Englisch > Adventures

Öffnen Sie den Ordner Cycling Southern Utah

Wählen Sie das Inhaltsfragment Cycling Southern Utah und wählen Sie Bearbeiten in der oberen Aktionsleiste

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

• Titel: Cycling Utah's National Parks
• Trip Length: 6 Days
• Difficulty: Intermediate
• Price: 3500
• Primäres Bild: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Wählen Sie Speichern in der oberen Aktionsleiste

Wählen Sie Quick Publish aus den … in der oberen Aktionsleiste

Aktualisieren Sie die React-App, die auf http://localhost:3000 ausgeführt wird.

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

Verwenden Sie denselben Ansatz im AEM-Autoren-Service:

1. Machen Sie die Veröffentlichung eines vorhandenen Adventure-Inhaltsfragments rückgängig und überprüfen Sie, ob es aus dem React-App-Erlebnis entfernt wird
2. Erstellen und veröffentlichen Sie ein neues Adventure-Inhaltsfragment und überprüfen Sie, ob es im React-App-Erlebnis angezeigt wird