DocumentazioneAEMTutorial su AEMTutorial su AEM as a Cloud Service

Configurazione dello sviluppo locale

Last update: Fri Jul 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Intermedio
  • Sviluppatore

Scopri come impostare un ambiente di sviluppo locale per modificare i contenuti di un’app React utilizzando AEM Universal Editor.

Prerequisiti

Per seguire questo tutorial sono necessari i seguenti elementi:

  • Competenze di base in HTML e JavaScript.

  • È necessario installare localmente i seguenti strumenti:

  • Scarica e installa quanto segue:

    • AEM as a Cloud Service SDK: contiene il file JAR Quickstart utilizzato per eseguire AEM Author e Publish localmente a scopo di sviluppo.
    • Servizio Editor universale: copia locale del servizio Editor universale, con un sottoinsieme di funzionalità e scaricabile dal portale di distribuzione software.
    • local-ssl-proxy: un semplice proxy HTTP SSL locale che utilizza un certificato autofirmato per lo sviluppo locale. AEM Universal Editor richiede l’URL HTTPS dell’app React per caricarlo nell’editor.

Configurazione locale

Per configurare l’ambiente di sviluppo locale, segui i passaggi seguenti:

AEM SDK

Per fornire i contenuti per l’app WKND Teams React, installa i seguenti pacchetti nel SDK AEM locale.

  • Team WKND - Pacchetto di contenuti: contiene i modelli per frammenti di contenuto, frammenti di contenuto e query GraphQL persistenti.

  • Team WKND - Pacchetto di configurazione: contiene le configurazioni CORS (Cross-Origin Resource Sharing) e del gestore di autenticazione token. CORS facilita l’esecuzione di chiamate lato client non AEM alle API GraphQL di AEM basate su browser e il gestore di autenticazione token viene utilizzato per autenticare ogni richiesta in AEM.

    Team WKND - Pacchetti

React app

Per configurare l’app WKND Teams React, effettua le seguenti operazioni:

  1. Clona l'app di reazione WKND Teams dal ramo della soluzione basic-tutorial.

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

  2. Passare alla directory basic-tutorial e aprirla nell'editor di codice.

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

  3. Installa le dipendenze e avvia l’app React.

    code language-bash 
    $ npm install
$ npm start

  4. Apri l'app WKND Teams React nel browser in http://localhost:3000. Viene visualizzato un elenco dei membri del team e dei relativi dettagli. Il contenuto dell'app React è fornito dal SDK AEM locale tramite le API GraphQL (/graphql/execute.json/my-project/all-teams), che puoi verificare utilizzando la scheda di rete del browser.

    Team WKND - App di reazione

Servizio editor universale

Per configurare il servizio local Universal Editor, effettuare le seguenti operazioni:

  1. Scaricare la versione più recente del servizio Universal Editor dal portale di distribuzione software.

    Distribuzione software - Servizio Editor universale

  2. Estrarre il file zip scaricato e copiare il file universal-editor-service.cjs in una nuova directory denominata 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. Creare il file .env nella directory universal-editor-service e aggiungere le seguenti variabili di ambiente:

    code language-bash 
    # The port on which the Universal Editor service runs
UES_PORT=8000
# Disable SSL verification
UES_TLS_REJECT_UNAUTHORIZED=false

  4. Avviare il servizio Universal Editor locale.

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

Il comando precedente avvia il servizio Universal Editor sulla porta 8000. Dovrebbe essere visualizzato il seguente output:

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

Proxy HTTP SSL locale

AEM Universal Editor richiede che l’app React sia gestita tramite HTTPS. Configuriamo un proxy HTTP SSL locale che utilizza un certificato autofirmato per lo sviluppo locale.

Segui i passaggi seguenti per configurare il proxy HTTP SSL locale e distribuire il servizio AEM SDK e Universal Editor tramite HTTPS:

  1. Installa il pacchetto local-ssl-proxy a livello globale.

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

  2. Avvia due istanze del proxy HTTP SSL locale per i servizi seguenti:

    • Proxy HTTP SSL locale di AEM SDK sulla porta 8443.
    • Proxy HTTP SSL locale del servizio Universal Editor sulla porta 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

Aggiornare l’app React per utilizzare HTTPS

Per abilitare HTTPS per l’app WKND Teams React, effettua le seguenti operazioni:

  1. Arrestare React premendo Ctrl + C nel terminale.

  2. Aggiornare il file package.json per includere la variabile di ambiente HTTPS=true nello script start.

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

  3. Aggiornare REACT_APP_HOST_URI nel file .env.development per utilizzare il protocollo HTTPS e la porta proxy HTTP SSL locale di AEM SDK.

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

  4. Aggiornare il file ../src/proxy/setupProxy.auth.basic.js per utilizzare le impostazioni SSL flessibili utilizzando l'opzione secure: false.

    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. Avvia l’app React.

    code language-bash 
    $ npm start

Verificare la configurazione

Dopo aver configurato l’ambiente di sviluppo locale seguendo i passaggi precedenti, verifichiamo la configurazione.

Verifica locale

Assicurati che i seguenti servizi siano in esecuzione localmente su HTTPS. Potrebbe essere necessario accettare l’avviso di sicurezza nel browser per il certificato autofirmato:

  1. App di reazione team WKND su https://localhost:3000
  2. AEM SDK su https://localhost:8443
  3. Servizio Editor universale su https://localhost:8001

Caricare l’app WKND Teams React nell’editor universale

Carichiamo l’app WKND Teams React nell’editor universale per verificare la configurazione:

  1. Apri Universal Editor https://experience.adobe.com/#/aem/editor nel browser. Se richiesto, effettua l’accesso con il tuo Adobe ID.

  2. Immettere l'URL dell'app React WKND Teams nel campo di input URL sito dell'editor universale e fare clic su Open.

    Editor universale - URL sito

  3. L'app WKND Teams React viene caricata nell'editor universale ma non è ancora possibile modificare il contenuto. È necessario dotare l’app React di strumenti che consentano di modificare i contenuti mediante l’editor universale.

    Editor universale - App di reazione team WKND

Passaggio successivo

Scopri come dotare l'app React per modificare il contenuto.

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