Configuration rapide d’AEM Headless pour AEM as a Cloud Service

Accédez à https://my.cloudmanager.adobe.com.

Sélectionnez le Programme de Cloud Manager contenant l’environnement AEM as a Cloud Service à utiliser pour cette configuration rapide.

Créez un référentiel Git pour le projet WKND Site.

1. Sélectionnez Référentiels dans le menu de navigation supérieur.
2. Sélectionnez Ajouter un référentiel dans la barre d’actions supérieure.
3. Nommez le nouveau référentiel Git : aem-headless-quick-setup-wknd.
   • Les noms de référentiel Git doivent être uniques pour chaque organisation d’Adobe.
4. Sélectionnez Enregistrer, et attendez que le référentiel Git soit initialisé.

À partir de la ligne de commande, clonez l’exemple de code source du projet WKND Site à partir de GitHub.

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

Ajoutez le référentiel Git de Cloud Manager en tant que référentiel distant.

1. Sélectionnez Référentiels dans le menu de navigation supérieur.

2. Sélectionnez Accéder aux informations sur le référentiel à partir de la barre d’actions supérieure.

3. Exécutez la commande trouvée dans Ajouter un élément distant à votre référentiel Git à partir de la ligne de commande.

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

Envoyez l’exemple de code source du projet de votre référentiel Git local vers le référentiel Git de Cloud Manager.

$ git push adobe main:main

Lorsqu’on vous invite à fournir des informations d’identification, indiquez le Nom d’utilisateur et le Mot de passe de la boîte de dialogue modale Informations sur le référentiel de Cloud Manager.

Joindre un Pipeline de déploiement hors production au nouveau référentiel Git

1. Sélectionnez Pipelines dans le menu de navigation supérieur.

2. Sélectionnez Ajouter un pipeline à partir de la barre d’actions supérieure.

3. Dans l’onglet Configuration  :

   1. Sélectionnez l’option Pipeline de déploiement.
   2. Définissez le Nom du pipeline hors production sur Dev Deployment pipeline.
   3. Sélectionnez Déclencheur de déploiement > Lors des modifications Git.
   4. Sélectionnez Comportement en cas d’échecs de mesures importants > Continuer immédiatement.
   5. Sélectionnez Continuer.

4. Dans l’onglet Code source  :

   1. Sélectionnez l’option Code de pile pleine.
   2. Sélectionnez l’environnement de développement AEM as a Cloud Service dans la zone de sélection Environnements de déploiement éligibles.
   3. Sélectionnez aem-headless-quick-setup-wknd dans la zone de sélection Référentiel.
   4. Sélectionnez main dans la zone de sélection Branche Git.
   5. Sélectionnez Enregistrer.

Exécuter le Pipeline de déploiement de développement

1. Sélectionnez Overview dans la barre de navigation supérieure.
2. Localisez le Pipeline de déploiement de développement que vous venez de créer dans la section Pipelines.
3. Sélectionnez les points de suspension … à droite de l’entrée du pipeline.
4. Sélectionnez Exécuter et confirmez l’action dans la boîte de dialogue modale.
5. Sélectionnez les points de suspension … à droite du pipeline maintenant en cours d’exécution.
6. Sélectionnez Afficher les détails.

Dans la fenêtre des détails de l’exécution du pipeline, surveillez la progression de l’exécution du pipeline jusqu’à ce qu’elle soit terminée. L’exécution du pipeline dure généralement entre 30 et 40 minutes.

À partir de la ligne de commande, clonez le code source de l’application React à partir de GitHub.

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

Ouvrez le dossier ~/Code/aem-guides-wknd-graphql/react-app dans votre IDE.

Dans l’IDE, ouvrez le fichier .env.development.

Recherchez l’URI hôte du service de publication AEM as a Cloud Service dans la propriété REACT_APP_HOST_URI.

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

Pour trouver l’URI hôte de votre service de publication AEM as a Cloud Service, procédez comme suit :

1. Dans Cloud Manager, sélectionnez Environnements dans la barre de navigation supérieure.
2. Sélectionnez l’environnement de Développement.
3. Recherchez le lien Service de publication (AEM et Dispatcher) dans le tableau Segments d’environnement.
4. Copiez l’adresse du lien et utilisez-la comme URI du service de publication AEM as a Cloud Service.

Dans l’IDE, enregistrez les modifications apportées à .env.development.

À partir de la ligne de commande, exécutez l’application React.

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

L’application React, qui s’exécute localement, démarre à l’adresse http://localhost:3000 et affiche une liste d’Adventures provenant d’AEM as a Cloud Service, à l’aide des API GraphQL d’AEM Headless.

Connectez-vous au service de création AEM as a Cloud Service.

Accédez à Ressources > Fichiers > WKND Shared > Français > Adventures.

Ouvrez le dossier Cycling Southern Utah.

Sélectionnez le fragment de contenu Cycling Southern Utah, puis cliquez sur Modifier dans la barre d’actions supérieure.

Mettez à jour certains champs du fragment de contenu, par exemple :

• Titre : Cycling Utah's National Parks.
• Trip Length : 6 Days
• Difficulty : Intermediate
• Price : 3500.
• Image principale : /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Cliquez sur Enregistrer dans la barre d’actions supérieure.

Sélectionnez Publication rapide dans les points de suspension … de la barre d’actions supérieure.

Actualisez l’application React en cours d’exécution à l’adresse http://localhost:3000.

Dans l’application React, sélectionnez l’Adventure Cycling mise à jour, puis vérifiez les modifications apportées au contenu du fragment de contenu.

En utilisant la même approche, dans le service de création AEM, effectuez les opérations suivantes :

1. Annulez la publication d’un fragment de contenu d’Adventure existant et vérifiez qu’il n’apparaît plus dans l’application React.
2. Créez et publiez un fragment de contenu d’Adventure, puis vérifiez qu’il apparaît bien dans l’application React.