DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurs om AEM Headless

Snabbinstallation av AEM Headless med AEM SDK setup

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gäller:
  • Experience Manager as a Cloud Service

Skapat för:

  • Nybörjare
  • Utvecklare

Med snabbinstallationen AEM Headless får du tillgång till AEM Headless med hjälp av innehåll från exempelprojektet WKND Site, och ett exempel på en React App (SPA) som förbrukar innehållet i AEM Headless GraphQL API:er. Den här guiden använder AEM as a Cloud Service SDK.

Förutsättningar prerequisites

Följande verktyg bör installeras lokalt:

  • [JDK 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2FDc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent%2Fjcr cr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14)
  • Node.js v18
  • Git

1. Installera AEM SDK aem-sdk

I den här konfigurationen används AEM as a Cloud Service SDK för att utforska AEM GraphQL API:er. I det här avsnittet finns en snabbguide till hur du installerar AEM SDK och kör det i redigeringsläge. En mer detaljerad guide för hur du konfigurerar en lokal utvecklingsmiljö finns här.

NOTE
Du kan också följa självstudiekursen med en AEM as a Cloud Service-miljö. Ytterligare information om hur du använder en molnmiljö finns i självstudiekursen.

  1. Gå till portalen för programvarudistribution > AEM as a Cloud Service och hämta den senaste versionen av AEM SDK.

    Programdistributionsportal

  2. Zippa upp hämtningen och kopiera Quickstart jar (aem-sdk-quickstart-XXX.jar) till en dedikerad mapp, dvs. ~/aem-sdk/author.

  3. Byt namn på filen jar till aem-author-p4502.jar.

    Namnet author anger att QuickStart jar startar i redigeringsläge. p4502 anger att QuickStart körs på port 4502.

  4. Om du vill installera och starta AEM-instansen öppnar du en kommandotolk i den mapp som innehåller jar-filen och kör följande kommando:

    code language-shell 
    $ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar

  5. Ange ett administratörslösenord som admin. Ett administratörslösenord accepteras, men du bör använda admin för lokal utveckling för att minska behovet av att konfigurera om.

  6. När AEM-tjänsten har installerats klart öppnas ett nytt webbläsarfönster på http://localhost:4502.

  7. Logga in med användarnamnet admin och lösenordet som valts under AEM första start (vanligtvis admin).

2. Installera exempelinnehåll install-sample-content

Exempelinnehåll från WKND-referenswebbplatsen används för att snabba upp självstudiekursen. WKND är ett fiktivt vardagsmärke som ofta används med AEM utbildning.

WKND-webbplatsen innehåller konfigurationer som krävs för att visa en GraphQL-slutpunkt. I en implementering i verkligheten följer du de dokumenterade stegen för att inkludera GraphQL-slutpunkterna i ditt kundprojekt. En CORS har också paketerats som en del av WKND-platsen. En CORS-konfiguration krävs för att ge åtkomst till ett externt program. Mer information om CORS finns nedan.

  1. Hämta det senaste kompilerade AEM-paketet för WKND-webbplatsen: aem-guides-wknd.all-x.x.zip.

    note note
    NOTE
    Se till att hämta standardversionen som är kompatibel med AEM as a Cloud Service och inte classic -versionen.

  2. Gå till Verktyg > Distribution > Paket på Start AEM -menyn.

    Navigera till paket

  3. Klicka på Överför paket och välj det WKND-paket som hämtades i det föregående steget. Klicka på Installera för att installera paketet.

  4. Gå till Assets > Filer > WKND delad > Engelska > Anteckningar på menyn AEM Start.

    Mappvy över annonser

    Det här är en mapp med alla resurser som består av de olika annonser som WKND-varumärket främjar. Detta omfattar traditionella medietyper som bilder och video och media som är specifika för AEM, t.ex. Innehållsfragment.

  5. Klicka på mappen Skiing Wyoming nedåt och klicka på Skiing Wyoming Content Fragment -kortet:

    Innehållsfragmentkort

  6. Redigeraren för innehållsfragment öppnas för Hoing Wyoming-äventyret.

    Redigera innehållsfragment

    Observera att olika fält som Title, Description och Activity definierar fragmentet.

    Innehållsfragment är ett sätt att hantera innehåll i AEM. Innehållsfragment är återanvändbart, presentationsbaserat innehåll som består av strukturerade dataelement som text, formaterad text, datum eller referenser till andra innehållsfragment. Innehållsfragment utforskas i detalj senare i snabbinställningarna.

  7. Klicka på Avbryt för att stänga fragmentet. Du kan navigera i några andra mappar och utforska det andra innehållet i Adventure.

NOTE
Om du använder en Cloud Service-miljö kan du läsa i dokumentationen om hur du distribuerar en kodbas som WKND Reference-webbplatsen till en Cloud Service-miljö.

3. Ladda ned och kör appen WKND React sample-app

Ett av målen med den här självstudiekursen är att visa hur du använder AEM-innehåll från ett externt program med GraphQL API:er. I den här självstudiekursen används ett exempel på React App (Reagera-app). React-appen är avsiktligt enkel att fokusera på integrationen med AEM GraphQL API:er.

  1. Öppna en ny kommandotolk och klona exempelappen React från GitHub:

    code language-shell 
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql/react-app

  2. Öppna appen React i aem-guides-wknd-graphql/react-app i den utvecklingsmiljö du vill använda.

  3. Öppna filen .env.development vid /.env.development i IDE. Kontrollera att raden REACT_APP_AUTHORIZATION inte är kommenterad och att filen deklarerar följande variabler:

    code language-plain 
    REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
# Use Authorization when connecting to an AEM Author environment
REACT_APP_AUTHORIZATION=admin:admin

    Se till att REACT_APP_HOST_URI pekar på din lokala AEM SDK. Den här snabbstarten ansluter appen React till AEM Author. Författartjänster kräver autentisering, så appen använder admin-användaren för att upprätta anslutningen. Att ansluta en app till AEM Author är vanligt under utvecklingen eftersom det gör det enkelt att snabbt upprepa innehållet utan att behöva publicera ändringar.

    note note
    NOTE
    I ett produktionsscenario ansluter appen till en AEM Publish -miljö. Detta beskrivs mer ingående i avsnittet Produktionsdistribution.

  4. Installera och starta React-appen:

    code language-shell 
    $ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

  5. Appen öppnas automatiskt i ett nytt webbläsarfönster på http://localhost:3000.

    Reagera startprogram

    En lista över äventyret från AEM visas.

  6. Klicka på en av äventyrsbilderna för att visa äventyrsdetaljer. AEM uppmanas att returnera detaljerna för ett äventyr.

    Vyn Adventure Details (Information)

  7. Använd webbläsarens utvecklingsverktyg för att inspektera nätverkets-begäranden. Visa XHR-begäranden och observera flera GET-begäranden till /graphql/execute.json/.... Detta sökvägsprefix anropar AEM beständiga frågeslutpunkt och väljer den beständiga fråga som ska köras med namnet och de kodade parametrarna efter prefixet.

    GraphQL Endpoint XHR-begäran

4. Redigera innehåll i AEM

När React-appen är igång uppdaterar du innehållet i AEM och ser att ändringen återspeglas i appen.

  1. Gå till AEM http://localhost:4502.

  2. Navigera till Assets > Filer > WKND delad > Engelska > Anteckningar > Bali Surf Camp.

    Bali Surf Camp-mappen

  3. Klicka på innehållsfragmentet Bali Surf Camp för att öppna innehållsfragmentredigeraren.

  4. Ändra titeln och beskrivningen för äventyret.

    Ändra innehållsfragment

  5. Klicka på Spara för att spara ändringarna.

  6. Uppdatera React-appen på http://localhost:3000 för att se dina ändringar:

    Bali Surf Camp Adventure har uppdaterats

5. Utforska GraphiQL graphiql

  1. Öppna GraphiQL genom att gå till Verktyg > Allmänt > GraphQL Query Editor

  2. Välj befintliga beständiga frågor till vänster och kör dem för att se resultatet.

    note note
    NOTE
    Verktyget GraphiQL och GraphQL API har utforskats i detalj senare i självstudiekursen.

Grattis! congratulations

Gratulerar, du har nu ett externt program som använder AEM-innehåll med GraphQL. Du kan granska koden i React-appen och fortsätta experimentera med att ändra befintliga innehållsfragment.

Nästa steg

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4