Een lokale ontwikkelomgeving instellen
Een lokale ontwikkelomgeving is essentieel voor het snel ontwikkelen van websites die door Edge Delivery Services worden geleverd. De omgeving gebruikt lokaal ontwikkelde code terwijl inhoud van Edge Delivery Services wordt opgehaald, zodat ontwikkelaars direct wijzigingen in de code kunnen bekijken. Een dergelijke installatie ondersteunt snelle, iteratieve ontwikkeling en tests.
De ontwikkelingstools en -processen voor een Edge Delivery Services-websiteproject zijn ontworpen om vertrouwd te zijn met webontwikkelaars en een snelle en efficiënte ontwikkelervaring te bieden.
Ontwikkelingstopologie
Deze video biedt een overzicht van de ontwikkelingstopologie voor een Edge Delivery Services-websiteproject dat kan worden bewerkt met Universal Editor.
Zie extra details van de ontwikkelingstopologie
-
bewaarplaats GitHub:
- Doel: Gastheren de code van de website (CSS en JavaScript).
- Structuur: De belangrijkste tak bevat productie-klaar code, terwijl andere takken werkende code houden.
- Functionaliteit: De code van om het even welke tak kan tegen de productie lopen of voorproef milieu's zonder de levende website te beïnvloeden.
-
de dienst van de Auteur van AEM:
- Doel: dient als canonieke inhoudsbewaarplaats waar de website inhoud wordt uitgegeven en wordt geleid.
- Functionaliteit: De inhoud wordt gelezen en geschreven door de Universele Redacteur. Bewerkte inhoud wordt gepubliceerd aan Edge Delivery Services in productie of voorproef milieu's.
-
Universele Redacteur:
- Doel: Verstrekt een interface van WYSIWYG voor het uitgeven van website inhoud.
- Functionaliteit: Leest van en schrijft aan de dienst van de Auteur van AEM. Kan worden gevormd om code van om het even welke tak in de bewaarplaats GitHub te gebruiken om veranderingen te testen en te bevestigen.
-
Edge Delivery Services:
-
het milieu van de Productie:
- Doel: Levert de levende website inhoud en de code aan eind - gebruikers.
- Functionaliteit: Dient inhoud die van de dienst van de Auteur van AEM wordt gepubliceerd gebruikend code van de belangrijkste tak van de bewaarplaats GitHub.
-
Milieu van de Voorproef:
- Doel: Verstrekt een het opvoeren milieu om inhoud en code vóór plaatsing te testen en te voorproef.
- Functionaliteit: Dient inhoud die van de dienst van de Auteur van AEM wordt gepubliceerd gebruikend code van om het even welke tak van de bewaarplaats GitHub, toelatend grondig het testen zonder de levende website te beïnvloeden.
-
-
Lokale ontwikkelaarmilieu:
-
Doel: Staat ontwikkelaars toe om code (CSS en JavaScript) plaatselijk te schrijven en te testen.
-
Structuur:
- Een lokale kloon van de bewaarplaats GitHub voor op tak-gebaseerde ontwikkeling.
- AEM CLI, die als ontwikkelingsserver dienst doet, past lokale codeveranderingen op het milieu van de Voorproef voor een heet-herladenervaring toe.
-
Werkschema: De ontwikkelaars schrijven code plaatselijk, begaan veranderingen in een werkende tak, duw de tak aan GitHub, bevestigen het in de Universele Redacteur (gebruikend de gespecificeerde tak), en voegen het in de belangrijkste tak samen wanneer klaar voor productieplaatsing.
-
Vereisten
Installeer het volgende op uw computer voordat u de ontwikkeling start:
- Git
- Node.js & npm
- Code van Microsoft Visual Studio(of gelijkaardige coderedacteur)
Clone the GitHub repository
Kloon de bewaarplaats GitHub die in het nieuwe hoofdstuk van het codeprojectwordt gecreeerd dat het de codeproject van AEM Edge Delivery Services aan uw lokale ontwikkelomgeving bevat.
$ cd ~/Code
$ git clone git@github.com:<YOUR_ORG>/aem-wknd-eds-ue.git
Er wordt een nieuwe map aem-wknd-eds-ue gemaakt in de map Code , die als hoofdmap van het project fungeert. Hoewel het project kan worden gekloond aan om het even welke plaats op de computer, gebruikt dit leerprogramma ~/Code als wortelfolder.
Projectafhankelijkheden installeren
Navigeer naar de projectmap en installeer de vereiste afhankelijkheden met npm install . Hoewel Edge Delivery Services-projecten geen gebruik maken van traditionele Node.js-constructiesystemen zoals Webpack of Vite, vereisen ze nog steeds verschillende afhankelijkheden voor lokale ontwikkeling.
# ~/Code/aem-wknd-eds-ue
$ npm install
AEM CLI installeren
De AEM CLI is een opdrachtregelprogramma Node.js dat is ontworpen om de ontwikkeling van AEM-websites in Edge Delivery Services te stroomlijnen en een lokale ontwikkelingsserver te bieden voor snelle ontwikkeling en het testen van uw website.
Voer de volgende handelingen uit om de AEM CLI te installeren:
# ~/Code/aem-wknd-eds-ue
$ npm install @adobe/aem-cli
De AEM CLI kan ook globaal worden geïnstalleerd met npm install --global @adobe/aem-cli.
De lokale AEM-ontwikkelingsserver starten
Met de opdracht aem up wordt de lokale ontwikkelingsserver gestart en wordt automatisch een browservenster naar de URL van de server geopend. Deze server fungeert als een reverse-proxy voor de Edge Delivery Services-omgeving, zodat inhoud van die server wordt aangeboden terwijl uw lokale codebasis voor ontwikkeling wordt gebruikt.
$ cd ~/Code/aem-wknd-eds-ue
$ aem up
___ ________ ___ __ __
/ | / ____/ |/ / _____(_)___ ___ __ __/ /___ _/ /_____ _____
/ /| | / __/ / /|_/ / / ___/ / __ `__ \/ / / / / __ `/ __/ __ \/ ___/
/ ___ |/ /___/ / / / (__ ) / / / / / / /_/ / / /_/ / /_/ /_/ / /
/_/ |_/_____/_/ /_/ /____/_/_/ /_/ /_/\__,_/_/\__,_/\__/\____/_/
info: Starting AEM dev server version x.x.x
info: Local AEM dev server up and running: http://localhost:3000/
info: Enabled reverse proxy to https://main--aem-wknd-eds-ue--<YOUR_ORG>.aem.page
De AEM CLI opent de website in uw browser op http://localhost:3000/. De veranderingen in het project worden automatisch heet-opnieuw geladen in Webbrowser, terwijl de inhoudsveranderingen het publiceren aan het voorproefmilieuvereisen en Webbrowser verfrissen.
Als de website met een 404 pagina opent, is het waarschijnlijk fstab.yaml of paths.jsonbijgewerkt in nieuw codeprojectverkeerd gevormd, of de veranderingen zijn niet begaan aan aan de main tak.
