DocumentationAEMTutoriels AEMTutoriels WKND d’AEM Sites

Déployer à l’aide du pipeline front-end

Last update: Wed May 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermediate
  • Developer
  • Admin

Dans ce chapitre, nous allons créer et exécuter un pipeline front-end dans Adobe Cloud Manager. Cette opération crée uniquement les fichiers à partir du module ui.frontend et les déploie sur le réseau CDN intégré dans AEM as a Cloud Service. Cette opération s’éloigne ainsi de la diffusion front-end des ressources basée sur /etc.clientlibs.

Objectifs objectives

  • Créer et exécuter un pipeline front-end.
  • Vérifier que les ressources front-end ne sont PAS diffusées à partir de /etc.clientlibs mais à partir d’un nouveau nom d’hôte commençant par https://static-.

Utiliser le pipeline front-end

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

Prérequis prerequisites

Ce tutoriel en plusieurs parties suppose que les étapes décrites dans la section Mettre à jour le projet AEM standard ont été terminées.

Vérifiez que vous avez les autorisations de création et de déploiement de pipelines dans Cloud Manager et l’accès à un environnement AEM as a Cloud Service.

Renommer le pipeline existant

Renommez le pipeline existant en remplaçant Déployer vers l’environnement de développement par Déployer WKND FullStack vers l’environnement de développement en accédant au champ Nom du pipeline hors production de l’onglet Configuration. Vous indiquez ainsi clairement si un pipeline est full-stack ou front-end en examinant simplement son nom.

Renommage du pipeline.

Toujours dans l’onglet Code source, assurez-vous que les valeurs des champs Référentiel et Branche Git sont correctes et que la branche comporte vos modifications du contrat de pipeline front-end.

Pipeline de configuration du code source.

Créer un pipeline front-end

Afin de créer et déployer les ressources front-end UNIQUEMENT à partir du module ui.frontend, effectuez les étapes suivantes :

  1. Dans l’interface utilisateur de Cloud Manager, dans la section Pipelines, cliquez sur le bouton Ajouter, puis sélectionnez Ajouter un pipeline hors production (ou Ajouter un pipeline de production) en fonction de l’environnement AEM as a Cloud Service sur lequel vous souhaitez effectuer le déploiement.

  2. Dans la boîte de dialogue Ajouter un pipeline hors production, dans le cadre des étapes de configuration, sélectionnez l’option Pipeline de déploiement, donnez-lui le nom Déployer WKND FrontEnd vers l’environnement de développement, puis cliquez sur Continuer.

Création des configurations de pipeline front-end.

  1. Dans le cadre des étapes du code source, sélectionnez l’option Code front-end et sélectionnez l’environnement à partir d’Environnements de déploiement éligibles. Dans la section Code source, assurez-vous que les valeurs des champs Référentiel et Branche Git sont correctes et que la branche comporte vos modifications du contrat de pipeline front-end.
    Vérifiez surtout que la valeur du champ Emplacement du code est /ui.frontend. Enfin, cliquez sur Enregistrer.

Création du code source du pipeline front-end.

Séquence de déploiement

  • Exécutez d’abord le pipeline Déployer WKND FullStack vers l’environnement de développement dont vous avez changé le nom, afin de supprimer les fichiers clientlib WKND du référentiel AEM. Et surtout, préparez AEM pour le contrat de pipeline front-end en ajoutant les fichiers de Configuration Sling (SiteConfig, HtmlPageItemsConfig).

Site WKND sans style.

WARNING
Après avoir terminé le pipeline Déployer WKND FullStack vers l’environnement de développement, vous obtenez un site WKND sans style, dont la présentation peut sembler incorrecte. Planifiez une coupure ou un déploiement pendant les heures creuses. Cette interruption unique à prévoir permettra de changer le pipeline full-stack en pipeline front-end.
  • Enfin, exécutez le pipeline Déployer WKND FrontEnd vers l’environnement de développement, afin de ne créer que le module ui.frontend et de déployer les ressources front-end directement sur le réseau CDN.
IMPORTANT
Notez que le site WKND sans style est revenu à la normale. Cette fois, l’exécution du pipeline front-end est beaucoup plus rapide que celle du pipeline full-stack.

Vérifier les changements de style et le nouveau paradigme de diffusion

  • Ouvrez n’importe quelle page du site WKND. La couleur du texte est rouge Adobe et les fichiers de ressources front-end (CSS, JS) sont diffusés à partir du réseau CDN. Le nom d’hôte de la requête de ressource commence par https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css, de même que le site.js ou toute autre ressource statique référencée dans le fichier HtmlPageItemsConfig.

Site WKND avec le nouveau style.

TIP
La $HASH_VALUE$ est ici identique à ce que vous voyez dans le pipeline Déployer WKND FrontEnd vers l’environnement de développement, dans le champ HACHAGE DU CONTENU. AEM est informé de l’URL de réseau CDN de la ressource front-end et la valeur est stockée dans /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content, sous la propriété prefixPath.

Corrélation des valeurs de hachage.

Félicitations. congratulations

Félicitations, vous avez créé, exécuté et vérifié le pipeline front-end qui crée et déploie uniquement le module « ui.frontend » du projet Sites WKND. Désormais, votre équipe front-end peut rapidement itérer sur la conception du site et son comportement front-end, en dehors du cycle de vie complet du projet AEM.

Étapes suivantes next-steps

Le chapitre suivant, Considérations, examine l’impact sur le processus de développement front-end et back-end.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9