Test de pilotage des sites de services cloud AEM Thèmes et pipelines frontaux / Blogs / Perficient

Dans le passé, le déploiement des mises à jour de l’interface utilisateur nécessitait de les regrouper avec des bundles OSGi et des composants pilotés par HTL. Bien qu’il s’agisse toujours d’un moyen utilisable pour déployer des projets dans AEM, il ne peut pas isoler l’interface utilisateur et les mises à jour de rechargement à chaud. De plus, les développeurs et concepteurs front-end doivent souvent se concentrer uniquement sur l’expérience de l’application. Ils peuvent ne pas nécessiter toutes les fonctionnalités d’un environnement AEM local ni en maintenir un.

AEM as a Cloud Service fournit les moyens d’isoler la conception de l’interface utilisateur ainsi que les pipelines de déploiement qui leur sont dédiés. Ceci est configuré à l’aide des commandes npm, un flux de travail que la plupart des développeurs frontaux connaissent, sans nécessiter d’instance AEM locale dédiée.
Les conceptions de thèmes peuvent être isolées dans un référentiel dédié, avec uniquement les fichiers pertinents présents.

Configuration des sites de services cloud AEM

Pour cet essai routier, j’ai suivi les étapes décrites dans le Parcours de création de site rapide AEM Documentation. Je vous encourage à suivre cette étape pour mettre en place votre propre projet de conception frontale et votre propre pipeline de déploiement. J’ai mis en place un conceptions de sites référentiel et pipeline frontal dans Cloud Manager et configuré le pipeline pour qu’il soit construit à partir de la branche principale de mon dépôt.

J’ai configuré un utilisateur proxy dans l’instance d’auteur de développement de notre programme de service cloud. Assurez-vous de stocker en toute sécurité les informations d’identification nécessaires dans une sorte de coffre-fort de mots de passe. Comme indiqué dans la documentation, les développeurs frontaux doivent se connecter à l’instance AEM à l’aide de ces informations d’identification lors de la mise à jour des conceptions via le proxy (plus à ce sujet ci-dessous).

Dans notre auteur de développement, j’ai également créé une application de test en utilisant le site à partir d’un modèle dans AEM Sites. Dans mon cas, j’ai choisi le modèle de site Tailwind AEM. Une fois le site créé, j’ai téléchargé les sources du thème.

Après avoir extrait le dossier du thème téléchargé et y avoir navigué, j’ai dû exécuter installation npm et puis enfin npm exécuté en direct. Cette dernière étape démarrera le proxy et ouvrira votre navigateur sur la page d’accueil de votre site, sous http://localhost:7001. Notez que c’est pas un local Instance AEM. Le proxy NodeJS diffuse le contenu d’une instance de service Cloud (auteur du développement dans mon cas) et l’expose via ce domaine localhost. Lorsque vous apportez des modifications, elles sont rendues si le proxy est en cours d’exécution. (Aucune modification réelle n’est conservée ici dans l’instance AEM, ce qui nécessite un déploiement.)

Effectuer des mises à jour de conception

Quelque chose à garder à l’esprit, seules les modifications de fichiers dactylographiés et SASS entraînent un nouveau rendu immédiat de la page dans le navigateur. Les modifications CSS nécessitent une actualisation manuelle de la page. Ceci est attendu. À titre de bonne pratique, la plupart des mises à jour de conception doivent être apportées aux fichiers prétraités de votre thème.

Avec le proxy en cours d’exécution, je me suis connecté http://localhost:7001 en utilisant le CONNEXION LOCALEMENT (TACHES D’ADMINISTRATION UNIQUEMENT) option. À ce stade, j’ai pu commencer à apporter des modifications à la conception. Il y a un nombre considérable de choses qui peuvent être mises à jour. Je voulais en essayer quelques simples et un changement complexe.

Essai 1 : J’ai mis à jour la couleur de fond du site.

Original:

Thème mis à jour :

Essai 2 : J’ai testé un changement spécifique à la conception d’un composant. jedans mon cas, la navigation composant.

Original:

Thème mis à jour :

Essai 3: J’ai même pu échanger des images utilisé sur le site, le rendu une image différente de notre service AEM Assets.

Original:

Thème mis à jour :

Ces modifications ont été enregistrées et le dossier de thème a été enregistré dans le référentiel de conceptions de mon site. J’ai ensuite poussé les mises à jour vers le dépôt distant dans Cloud Manager et déclenché le pipeline frontend pour déployer et conserver mes modifications dans notre auteur de développement. Ce dépôt pourrait également être utilisé dans un pipeline de production pour déployer les modifications dans les environnements de scène et de production.

Comment utiliser New Relic One pour surveiller les propriétés AEMaaCS

Problèmes et résolutions

Pendant les tests, j’ai rencontré quelques moments de « piège ».

Compatibilité du navigateur

Tout d’abord, je n’ai pas pu me connecter à notre auteur AEM via le proxy lorsque j’utilisais Chrome, mais j’ai pu le faire lorsque j’utilisais Firefox et Safari. Cette compatibilité est susceptible de changer avec le temps, mais il faut garder cela à l’esprit lors de sa configuration.

Compatibilité des versions de nœud

Les versions plus récentes de NodeJS (19, 20 et 21) peuvent rencontrer l’erreur suivante lors de l’installation du projet :

Ceci est dû à une incompatibilité avec le package d’interface LMDB. (une dépendance transitive du colis-intention-récrire dépendance dev dans le thème package.json) et plus récent NodVersions eJS. Pour contourner ce problème, vous devez soit utiliser une ancienne version de Node, soit exécuter la commande suivante pour vous assurer que la dernière version de l’interface LMDB est utilisée :

Cela ajoutera la dépendance dans votre package.json comme:

Une fois cela en place, le projet devrait s’installer avec succès en utilisant NodeJS 19 et versions ultérieures.

Emplacement du code de pipeline

Lorsque vos modifications ont été testées et que vous êtes prêt à déployer via le pipeline frontal, veillez à configurer le champ d’emplacement du code du pipeline pour qu’il pointe vers le dossier dans lequel vos fichiers de thème sont validés dans le référentiel source.

Par exemple, j’ai stocké les fichiers de thème de mon site dans un dossier appelé « brand-able-theme-sources » (qui est simplement le dossier que j’ai récupéré d’AEM Sites lors du téléchargement des sources de thème), j’ai placé ce dossier à la racine du projet git. , l’a validé et transféré vers le dépôt distant dans Cloud Manager. J’ai configuré l’emplacement du code du pipeline frontal comme suit :

Les sites de service cloud AEM changent la donne

La rapidité avec laquelle vous pouvez recharger à chaud les conceptions de votre site sans attendre un pipeline ou même une version maven locale change sérieusement la donne lors des tests. Limiter ce qui peut être modifié à la seule image de marque globale de votre site permet de garantir la cohérence. Cependant, vous pouvez configurer cela pour permettre un niveau de composant plus précis des changements également. je vous recommande vas-youais le Création rapide de sites Voyage et vois comment cela peut avantage les processus de développement et de conception de votre équipe front-end.

Pour plus de contenu lié à AEM as a Cloud Service, vérifier nos blogs Adobe.