Configuration rapide AEM sans affichage pour AEM as a Cloud Service

La configuration rapide AEM sans affichage vous permet d’utiliser AEM sans affichage à l’aide du contenu de l’exemple de projet de site WKND, ainsi qu’un exemple d’application React (a SPA) qui consomme le contenu via les API GraphQL sans affichage .

Prérequis

Les éléments suivants sont nécessaires pour suivre cette configuration rapide :

  • AEM environnement Sandbox as a Cloud Service (de préférence Développement)
  • Accès à AEM as a Cloud Service et Cloud Manager
    • Administrateur AEM accès à AEM as a Cloud Service
    • Cloud Manager - Gestionnaire de déploiement accès à Cloud Manager
  • Les outils suivants doivent être installés localement :

1. Création d’un référentiel Git Cloud Manager

Créez tout d’abord un référentiel Git Cloud Manager utilisé pour déployer le site WKND. Le site WKND est un exemple de projet AEM site web qui contient du contenu (des fragments de contenu) et un point d’entrée AEM GraphQL utilisé par l’application React de la configuration rapide.

Arrêt sur image des étapes

  1. Accédez à https://my.cloudmanager.adobe.com
  2. Sélectionnez Cloud Manager . Programme contenant l’environnement as a Cloud Service AEM à utiliser pour cette configuration rapide
  3. Création d’un référentiel Git pour le projet de site WKND
    1. Sélectionner Référentiels dans la navigation supérieure ;
    2. Sélectionner 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 par organisation d’Adobe,
    4. Sélectionner Enregistrer, et attendez que le référentiel Git soit initialisé.

2. Transférez l’exemple de projet de site WKND vers le référentiel Git de Cloud Manager.

Une fois le référentiel Git de Cloud Manager créé, clonez le code source du projet WKND Site à partir de GitHub et envoyez-le au référentiel Git de Cloud Manager. Cloud Manager permet désormais d’accéder au projet WKND Site et de le déployer dans l’environnement as a Cloud Service AEM.

Arrêt sur image des étapes

  1. À 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
    
  2. Ajout du référentiel Git de Cloud Manager en tant que référentiel distant

    1. Sélectionner Référentiels dans la navigation supérieure ;

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

    3. Exécuter la commande trouvée dans Ajout d’un élément distant à votre référentiel Git à partir de la ligne de commande

      $ cd aem-guides-wknd
      $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
      
  3. 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
    

    Lorsque vous y êtes invité, saisissez la variable Nom d’utilisateur et Mot de passe de Cloud Manager Informations sur le référentiel modale.

3. Déployez le site WKND pour AEM as a Cloud Service

Une fois le projet de site WKND transmis au référentiel Git de Cloud Manager, il ne peut pas être déployé sur AEM as a Cloud Service à l’aide des pipelines de Cloud Manager.

Gardez à l’esprit que le projet de site WKND fournit un exemple de contenu que l’application React consomme sur AEM API GraphQL sans affichage.

Arrêt sur image des étapes

  1. Joindre une Pipeline de déploiement hors production vers le nouveau référentiel Git
    1. Sélectionner Pipelines dans la navigation supérieure ;
    2. Sélectionner Ajouter un pipeline à partir de la barre d’actions supérieure
    3. Sur le Configuration tab
      1. Sélectionner Pipeline de déploiement option
      2. Définissez la variable Nom du pipeline hors production to Dev Deployment pipeline
      3. Sélectionner Déclencheur de déploiement > Lors des modifications Git
      4. Sélectionner Comportement Échecs de mesure importants > Continuer immédiatement
      5. Sélectionnez Continuer
    4. Sur le Code source tab
      1. Sélectionner Code de pile complet option
      2. Sélectionnez la AEM environnement de développement as a Cloud Service de la Environnements de déploiement éligibles zone de sélection
      3. Sélectionner aem-headless-quick-setup-wknd dans le Référentiel zone de sélection
      4. Sélectionner main de la Branche Git zone de sélection
      5. Sélectionnez Enregistrer
  2. Exécutez la variable Pipeline de déploiement de développement
    1. Sélectionner Présentation dans la navigation supérieure ;
    2. Localisez le Pipeline de déploiement de développement dans le Pipelines section
    3. Sélectionnez la à droite de l’entrée de pipeline
    4. Sélectionner Exécuter et confirmer dans le modal.
    5. Sélectionnez la à droite du pipeline en cours d’exécution
    6. Sélectionner Afficher les détails
  3. Dans les détails de l’exécution du pipeline, surveillez la progression jusqu’à ce qu’elle soit terminée. L’exécution du pipeline doit prendre entre 30 et 40 minutes.

4. Téléchargez et exécutez l’application WKND React

Une fois AEM bootstrap as a Cloud Service avec le contenu du projet de site WKND, téléchargez et démarrez l’exemple d’application WKND React qui consomme le contenu du site WKND via les API GraphQL sans affichage.

Arrêt sur image des étapes

  1. À 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
    
  2. Ouvrir le dossier ~/Code/aem-guides-wknd-graphql/react-app dans votre IDE.

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

  4. Pointez sur l’AEM as a Cloud Service Publier URI d’hôte du service à partir de la propriété REACT_APP_HOST_URI .

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

    Pour trouver l’URI d’hôte de votre service de publication as a Cloud Service AEM :

    1. Dans Cloud Manager, sélectionnez Environnements dans la navigation supérieure ;
    2. Sélectionner Développement environnement
    3. Recherchez la variable Service de publication (AEM et Dispatcher) link Segments d’environnement table
    4. Copiez l’adresse du lien et utilisez-la comme URI du service de publication as a Cloud Service AEM
  5. Dans l’IDE, enregistrez les modifications dans .env.development

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

    $ cd ~/Code/aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  7. L’application React, s’exécutant localement, démarre le http://localhost:3000 et affiche une liste des aventures, issues d’AEM as a Cloud Service à l’aide des API GraphQL d’AEM sans affichage.

5. Modifier le contenu dans AEM

Avec l’exemple d’application WKND React se connectant au contenu des API GraphQL AEM et l’utilisant, créez du contenu dans le service Auteur AEM et voyez comment l’expérience de React est mise à jour de concert.

Arrêt sur image des étapes

  1. Connectez-vous au service Auteur as a Cloud Service AEM

  2. Accédez à Ressources > Fichiers > WKND Partagé > Anglais > Aventures

  3. Ouvrez le Vélo dans l'Utah du Sud Dossier

  4. Sélectionnez la Vélo dans l'Utah du Sud Fragment de contenu, puis sélectionnez Modifier à partir de la barre d’actions supérieure

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

    • Titre: Cycling Utah's National Parks
    • Durée du voyage : 6 Days
    • Difficulté : Intermediate
    • Prix: 3500
    • Image Principal : /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
  6. Sélectionner Enregistrer dans la barre d’actions supérieure

  7. Sélectionner Publication rapide dans la barre d’actions supérieure

  8. Actualisation de l’application React en cours d’exécution sur http://localhost:3000.

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

  10. En utilisant la même approche, dans le service AEM Author :

    1. Annuler la publication d’un fragment de contenu d’aventure existant et vérifier qu’il est supprimé de l’expérience React App.
    2. Créez et publiez un fragment de contenu Adventure, puis vérifiez qu’il apparaît dans l’expérience React App.
    CONSEIL

    Si vous ne connaissez pas la création et la publication de fragments de contenu ou l’annulation de leur publication, regardez la capture d’écran ci-dessus.

Félicitations !

Félicitations ! Vous avez réussi à utiliser AEM sans affichage pour alimenter une application React !

Pour comprendre en détail comment l’application React consomme du contenu d’AEM as a Cloud Service, extrayez le Tutoriel AEM sans affichage. Le tutoriel explique comment les fragments de contenu d’AEM ont été créés et comment cette application React utilise leur contenu au format JSON.

Étapes suivantes

Sur cette page