Configurer le pipeline

Créez un pipeline frontal pour gérer la personnalisation du thème de votre site.

Un peu d’histoire…

Dans le document précédent du parcours de création rapide de site AEM, Créer un site à partir d’un modèle, vous avez appris à utiliser un modèle de site pour créer rapidement un site AEM qui peut être davantage personnalisé à l’aide d’outils frontaux. Vous devriez maintenant :

• Découvrir comment obtenir des modèles de site AEM.
• Apprendre à créer un nouveau site à l’aide d’un modèle.
• Découvrir comment télécharger le modèle de votre nouveau site pour le fournir au développeur front-end.

Cet article s’appuie sur ces principes de base afin que vous puissiez configurer un pipeline frontal, que le développeur front-end utilisera ultérieurement dans le parcours pour déployer les personnalisations frontales.

Objectif

Ce document vous aide à comprendre les pipelines frontaux et comment en créer un pour gérer le déploiement du thème personnalisé de votre site. Après avoir lu ce document, vous devriez :

• Comprendre ce qu’est un pipeline front-end.
• Savoir comment configurer un pipeline front-end dans Cloud Manager.

Rôle responsable

Cette partie du parcours s’applique à l’administrateur de Cloud Manager.

Conditions requises

• Vous devez avoir accès à Cloud Manager.
• Vous devez être membre du rôle Responsable de déploiement dans Cloud Manager.
• Un référentiel git pour l’environnement AEM doit être configuré dans Cloud Manager.
  • C'est généralement déjà le cas pour tout projet principal. Toutefois, si ce n’est pas le cas, reportez-vous à la documentation des référentiels Cloud Manager disponible dans la section Ressources supplémentaires.

Qu’est-ce qu’un pipeline frontal

Le développement frontal implique la personnalisation de ressources JavaScript, CSS et statiques qui définissent le style de votre site AEM. Le développeur front-end travaille dans son propre environnements local pour effectuer ces personnalisations. Une fois qu’elles sont prêtes, les modifications sont validées dans le référentiel git d’AEM. Mais elles ne sont engagées que dans le code source. Elles ne sont pas encore en ligne.

Le pipeline frontal prend ces personnalisations validées et les déploie dans un environnement AEM, généralement des environnements de production ou de non-production.

Ainsi, le développement frontal peut fonctionner séparément et parallèlement à tout développement d’arrière-plan complet sur AEM, qui possède ses propres pipelines de déploiement.

Accès à Cloud Manager

1. Connectez-vous à Adobe Cloud Manager à l’adresse my.cloudmanager.adobe.com.

2. Cloud Manager répertorie les différents programmes disponibles. Appuyez ou cliquez sur celui que vous souhaitez gérer. Si vous commencez avec AEM as a Cloud Service, il est probable qu’un seul programme soit disponible.

   

Vous voyez maintenant un aperçu de votre programme. Votre page sera différente, mais similaire à cet exemple.

Notez le nom du programme auquel vous avez accédé ou copiez l’URL. Vous devrez fournir cette information au développeur front-end ultérieurement.

Création d’un pipeline frontal

Maintenant que vous avez accédé à Cloud Manager, vous pouvez créer un pipeline pour le déploiement frontal.

1. Dans la section Pipelines de la page Cloud Manager, appuyez ou cliquez sur le bouton Ajouter.

   

2. Dans le menu pop-up qui s’affiche sous le bouton Ajouter, sélectionnez Ajouter un pipeline hors production aux fins du présent parcours.

3. Dans l’onglet Configuration de la boîte de dialogue Ajouter un pipeline hors production qui s’ouvre :

   • Sélectionnez Pipeline de déploiement.
   • Attribuez un nom au pipeline dans le champ Nom du pipeline de non-production.

   

4. Cliquez ou appuyez sur Continuer.

5. Dans l’onglet Code source :

   • Sélectionnez Code frontal comme type de code à déployer.
   • Sélectionnez l’environnement approprié sous Environnements de déploiement éligibles.
   • Sélectionnez le Référentiel adéquat.
   • Définissez la Branche Git à laquelle le pipeline doit être associé.
   • Définissez l’Emplacement du code si le développement front-end se trouve sous un chemin d’accès particulier dans le référentiel sélectionné. La valeur par défaut est la racine du référentiel, mais le développement front-end et back-end se font souvent sous différents chemins d’accès.

   

6. Cliquez ou appuyez sur Enregistrer.

Le nouveau pipeline est créé et visible dans la section Pipelines de la fenêtre Cloud Manager. Lorsque vous cliquez ou appuyez sur les points de suspension après le nom du pipeline, les options s’affichent pour modifier ou afficher les détails, si nécessaire.

Prochaines étapes

Maintenant que vous avez terminé cette partie du parcours de création rapide de site AEM vous devriez :

• Comprendre ce qu’est un pipeline front-end.
• Savoir comment configurer un pipeline front-end dans Cloud Manager.

Tirez parti de ces connaissances et poursuivez votre parcours de création rapide de site AEM en consultant le document Accorder l’accès au développeur front-end pour intégrer les développeurs front-end dans Cloud Manager afin qu’ils aient accès à votre référentiel Git et à votre pipeline de sites AEM.

Ressources supplémentaires

Bien qu’il soit recommandé de passer à la partie suivante du parcours de création rapide de site en examinant le document Personnaliser le thème du site, vous trouverez ci-après quelques ressources facultatives supplémentaires pour approfondir un certain nombre de concepts mentionnés dans ce document, mais non obligatoires pour poursuivre le parcours.

• Documentation de Cloud Manager : si vous souhaitez obtenir plus de détails sur les fonctionnalités de Cloud Manager, vous pouvez consulter directement la documentation technique détaillée.
• Référentiels Cloud Manager : si vous avez besoin d’informations supplémentaires sur la configuration et la gestion des référentiels Git pour votre projet AEMaaCS, reportez-vous à ce document.
• Configurer le pipeline CI/CD - Cloud Services : pour plus d’informations sur la configuration des pipelines de pile pleine et front-end, consultez ce document.

Ressources Business.Adobe.com