DokumentationAEMAEM-TutorialsTutorials zu AEM as a Cloud Service

Lokale Entwicklungseinrichtung

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Fortgeschrittener
  • Entwickler

Erfahren Sie, wie Sie eine lokale Entwicklungsumgebung einrichten, um den Inhalt einer React-App mit dem AEM Universal Editor zu bearbeiten.

Voraussetzungen

Für dieses Tutorial sind folgende Dinge erforderlich:

  • Grundlegende HTML- und JavaScript-Kenntnisse.

  • Die folgenden Tools müssen lokal installiert sein:

  • Laden Sie Folgendes herunter und installieren Sie es:

    • AEM as a Cloud Service SDK: Enthält das Schnellstart-Jar, das zum lokalen Ausführen AEM Author und Publish für Entwicklungszwecke verwendet wird.
    • Universal Editor-Dienst: Eine lokale Kopie des Universal Editor-Dienstes, der eine Untergruppe von Funktionen aufweist und vom Software Distribution-Portal heruntergeladen werden kann.
    • local-ssl-proxy: Ein einfacher lokaler SSL-HTTP-Proxy, der ein selbstsigniertes Zertifikat für die lokale Entwicklung verwendet. Der universelle Editor AEM benötigt die HTTPS-URL der React-App, um sie im Editor zu laden.

Lokales Setup

Gehen Sie wie folgt vor, um die lokale Entwicklungsumgebung einzurichten:

AEM SDK

Um die Inhalte für die WKND Teams React-App bereitzustellen, installieren Sie die folgenden Pakete im lokalen AEM SDK.

  • WKND-Teams - Inhaltspaket: Enthält die Inhaltsfragmentmodelle, Inhaltsfragmente und persistenten GraphQL-Abfragen.

  • WKND-Teams - Konfigurationspaket: Enthält die Konfigurationen "Cross-Origin Resource Sharing"(CORS) und "Token Authentication Handler". Das CORS ermöglicht es Nicht-AEM-Webeigenschaften, browserbasierte clientseitige Aufrufe an AEM GraphQL-APIs durchzuführen, und der Token-Authentifizierungs-Handler wird verwendet, um jede Anfrage an AEM zu authentifizieren.

    WKND-Teams - Pakete

React-App

Gehen Sie wie folgt vor, um die WKND Teams React-App einzurichten:

  1. Klonen Sie die WKND Teams React App aus der Lösungsverzweigung basic-tutorial .

    code language-bash 
    $ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Navigieren Sie zum Ordner "basic-tutorial"und öffnen Sie es in Ihrem Code-Editor.

    code language-bash 
    $ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

  3. Installieren Sie die Abhängigkeiten und starten Sie die React-App.

    code language-bash 
    $ npm install
$ npm start

  4. Öffnen Sie die React-App "WKND-Teams"in Ihrem Browser unter http://localhost:3000. Es wird eine Liste der Teammitglieder und ihre Details angezeigt. Der Inhalt für die React-App wird vom lokalen AEM SDK mithilfe von GraphQL-APIs (/graphql/execute.json/my-project/all-teams) bereitgestellt, die Sie auf der Registerkarte "Netzwerk"des Browsers überprüfen können.

    WKND-Teams - React-App

Universal Editor Service

Gehen Sie wie folgt vor, um den Dienst local Universal Editor einzurichten:

  1. Laden Sie die neueste Version des Universal Editor-Dienstes vom Software Distribution-Portal herunter.

    Software Distribution - Universal Editor Service

  2. Extrahieren Sie die heruntergeladene ZIP-Datei und kopieren Sie die Datei "universal-editor-service.cjs" in ein neues Verzeichnis namens "universal-editor-service".

    code language-bash 
    $ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

  3. Erstellen Sie die Datei .env im Verzeichnis universal-editor-service und fügen Sie die folgenden Umgebungsvariablen hinzu:

    code language-bash 
    # The port on which the Universal Editor service runs
EXPRESS_PORT=8000
# Disable SSL verification
NODE_TLS_REJECT_UNAUTHORIZED=0

  4. Starten Sie den lokalen Universal Editor-Dienst.

    code language-bash 
    $ cd universal-editor-service
$ node universal-editor-service.cjs

Der obige Befehl startet den Universal Editor-Dienst am Port 8000 und Sie sollten die folgende Ausgabe sehen:

Either no private key or certificate was set. Starting as HTTP server
Universal Editor Service listening on port 8000 as HTTP Server

Lokaler SSL-HTTP-Proxy

Der universelle Editor AEM erfordert, dass die React-App über HTTPS bereitgestellt wird. Richten wir einen lokalen SSL-HTTP-Proxy ein, der ein selbstsigniertes Zertifikat für die lokale Entwicklung verwendet.

Gehen Sie wie folgt vor, um den lokalen SSL-HTTP-Proxy einzurichten und den AEM SDK- und Universal Editor-Dienst über HTTPS bereitzustellen:

  1. Installieren Sie das Paket local-ssl-proxy global.

    code language-bash 
    $ npm install -g local-ssl-proxy

  2. Starten Sie zwei Instanzen des lokalen SSL-HTTP-Proxys für die folgenden Dienste:

    • AEM SDK lokaler SSL-HTTP-Proxy auf Port 8443.
    • Lokaler SSL-HTTP-Proxy des Universal Editor-Dienstes am Port 8001.
    code language-bash 
    # AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

React-App für die Verwendung von HTTPS aktualisieren

Gehen Sie wie folgt vor, um HTTPS für die WKND Teams React-App zu aktivieren:

  1. Halten Sie die React-Taste an, indem Sie im Terminal auf Ctrl + C drücken.

  2. Aktualisieren Sie die Datei package.json , um die Umgebungsvariable HTTPS=true in das Skript start aufzunehmen.

    code language-json 
    "scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

  3. Aktualisieren Sie die REACT_APP_HOST_URI in der Datei .env.development , um das HTTPS-Protokoll und den lokalen SSL-HTTP-Proxy-Port des AEM SDK zu verwenden.

    code language-bash 
    REACT_APP_HOST_URI=https://localhost:8443
...

  4. Aktualisieren Sie die ../src/proxy/setupProxy.auth.basic.js -Datei, um entspannte SSL-Einstellungen mit der secure: false -Option zu verwenden.

    code language-javascript 
    ...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

  5. Starten Sie die React-App.

    code language-bash 
    $ npm start

Überprüfen des Setups

Nachdem wir die lokale Entwicklungsumgebung mit den oben genannten Schritten eingerichtet haben, überprüfen wir die Einrichtung.

Lokale Überprüfung

Stellen Sie sicher, dass die folgenden Dienste lokal über HTTPS ausgeführt werden. Möglicherweise müssen Sie die Sicherheitswarnung im Browser für das selbstsignierte Zertifikat akzeptieren:

  1. WKND Teams React App auf https://localhost:3000
  2. AEM SDK auf https://localhost:8443
  3. Universal Editor-Dienst auf https://localhost:8001

WKND-Teams React-App im universellen Editor laden

Laden wir die React-App "WKND-Teams"in den Universal Editor, um die Einrichtung zu überprüfen:

  1. Öffnen Sie den Universal Editor https://experience.adobe.com/#/aem/editor in Ihrem Browser. Melden Sie sich bei entsprechender Aufforderung mit Ihrem Adobe ID an.

  2. Geben Sie die URL der React-App-WKND-Teams im Eingabefeld Site-URL des universellen Editors ein und klicken Sie auf Open.

    Universal Editor - Site-URL

  3. Die WKND-Teams-React-App wird im universellen Editor geladen, Sie können den Inhalt jedoch noch nicht bearbeiten. Sie müssen die React-App instrumentieren, um die Inhaltsbearbeitung mit dem universellen Editor zu aktivieren.

    Universal Editor - WKND Teams React App

Nächster Schritt

Erfahren Sie, wie Sie die React-App instrumentieren, um den Inhalt zu bearbeiten.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69