Création de pipelines Azure DevOps CI pour SPFx / Blogs / Perficient

Ce blog propose un guide complet sur la configuration de l’intégration continue (CI) dans Azure DevOps pour automatiser l’intégration du code SharePoint Framework (SPFx) en exploitant les pipelines Azure DevOps. Ce processus vise à rationaliser les flux de développement, à améliorer la qualité du code et à garantir une validation plus rapide du code avant le déploiement sans aucun traitement manuel.

L’intégration continue (CI) est le processus d’automatisation de la création et des tests du code lorsqu’un développeur valide des modifications dans le contrôle de code source. S’engager dans le contrôle de source déclenche une génération automatisée qui récupère le dernier code du contrôle de version, le construit et exécute des tests dessus (si configuré).

Condition préalable à la création d’un pipeline CI pour SPFx dans Azure DevOps

Pour configurer l’intégration continue (CI) pour SPFx dans Azure DevOps, assurez-vous que les éléments suivants sont déjà configurés :

• Un compte Azure DevOps avec l’accès requis
• Ton Projet SharePoint Framework (SPFx) doit être stocké dans un référentiel Git
• Assurez-vous que le référentiel comprend les éléments nécessaires package.json, gulpfile.jset d’autres fichiers de configuration requis pour créer et regrouper votre solution SPFx

Mise en œuvre

Pour implémenter CI, nous devons créer un nouveau Pipeline dans Azure DevOps. La création d’un pipeline comprend les étapes principales suivantes :

• Créer une définition de build
• Installer NodeJS
• Restaurer les packages npm
• Construire la solution
• Packager la solution
• Préparez les artefacts
• Publier les artefacts

Créer une définition de build

La définition de build contient la définition et la configuration de la build. Suivez les étapes ci-dessous pour créer une nouvelle définition de build.

• Connectez-vous à Visual Studio Online (Azure DevOps)
• Sélectionnez votre projet pour configurer une définition de build.
• Dans le volet de navigation de gauche, cliquez sur Pipelines > Builds.
• Cliquez sur « Nouveau pipeline » > Cliquez sur « Utiliser l’éditeur classique ».
• Sélectionnez « Azure Repos Git » > Sélectionnez un projet d’équipe > Sélectionnez un référentiel > Sélectionnez une branche pour l’implémentation de CI.

• Sous « Sélectionner un modèle », sélectionnez « Pipeline vide ».

• La définition de build a un agent par défaut. Nous pouvons ajouter plusieurs tâches à l’agent pour définir notre build.

Dans ce cas, dans la spécification de l’agent, j’ai utilisé Windows-2022, mais vous pouvez également choisir « Windows-dernier » en fonction de l’environnement dans lequel vous souhaitez exécuter votre build.

Installer NodeJS

• Sur l’agent par défaut, cliquez sur le signe +.
• Recherchez « Nœud ».
• Ajoutez le programme d’installation de l’outil Node.js.

• Assurez-vous de spécifier 10.x dans le champ Spécification de version. Si votre projet est basé sur SharePoint Framework 1.7.1 ou une version antérieure, utilisez la version 8.x.

Restaurer les packages npm

La solution SharePoint Framework utilise des packages npm tiers. Nous devons les restaurer avant de commencer le processus de construction.

• Ajoutez une tâche npm.
• Vérifiez si la commande est définie pour installer.

Construire la solution

Créez la solution SPFx pour réduire les ressources requises à télécharger sur CDN.

• Ajouter une tâche gulp.
• Définissez le chemin du fichier Gulp sur gulpfile.js.
• Définissez la tâche Gulp comme un bundle.
• Définissez les arguments de Gulp sur –ship.

Note: Assurez-vous que la tâche gulp dispose de la commande « –warnoff » et « –ship » pour éviter l’échec de la construction dans un environnement de production. Reportez-vous à la section Configuration ci-dessous pour plus de détails.

Packager la solution

L’étape suivante consiste à combiner les actifs dans un package.

• Ajouter une tâche gulp.
• Définissez le chemin du fichier Gulp sur gulpfile.js.
• Définissez la tâche Gulp comme solution de package.
• Définissez les arguments de Gulp sur –ship.

Préparez les artefacts

La version Azure DevOps ne conserve aucun fichier. Le fichier « .sppkg » créé à partir de l’étape ci-dessus doit être copié dans le répertoire intermédiaire pour être publié dans le pipeline de publication.

• Ajoutez la tâche « Copier les fichiers ».
• Définissez « Dossier source » sur $(Build.Repository.LocalPath)/sharepoint/solution.
• Définissez « Contenu » sur *.sppkg.
• Définissez le dossier cible sur $(Build.ArtifactStagingDirectory)/drop.

Publier les artefacts

Demandez à Azure DevOps de conserver les fichiers après l’exécution de la build.

• Ajoutez la tâche « Publier les artefacts de construction ».
• Définissez « Chemin de publication » sur $(Build.ArtifactStagingDirectory)/drop.
• Définissez « Nom de l’artefact » pour qu’il soit supprimé.

Configuration

Lors du regroupement et du packaging de votre solution SharePoint Framework, vous pouvez voir deux types de messages :

Lors de l’exécution d’une build DEBUG, les deux messages ne provoquent pas l’échec du processus par un stderr (ou une erreur standard). Mais dans la version PRODUCTION, vous obtiendrez le type de sortie d’erreur suivant :

Cela peut être un problème dans vos pipelines de build/release automatisés. Par exemple, lorsque vous regroupez et empaquetez automatiquement votre solution sur Azure DevOps, il n’existe aucun moyen de savoir si elle doit continuer lorsque des avertissements se produisent. La seule option dont vous disposez est de « continuer » en cas d’erreur.

Pour limiter cela, nous pouvons ajouter une commande « warnoff » dans le processus de construction, ce qui ne provoquera pas l’échec du processus de construction. Pour cela, apportez les modifications suivantes dans gulpfile.js.

// Retrieve the current build config and check if there is a `warnoff` flag set
const crntConfig = build.getConfig();
const warningLevel = crntConfig.args["warnoff"];
// Extend the SPFx build rig, and overwrite the `shouldWarningsFailBuild` property
if (warningLevel) {
    class CustomSPWebBuildRig extends build.SPWebBuildRig {
        setupSharedConfig() {
            build.log("IMPORTANT: Warnings will not fail the build.")
            build.mergeConfig({
                shouldWarningsFailBuild: false
            });
            super.setupSharedConfig();
        }
    }
    build.rig = newCustomSPWebBuildRig();
}
build.initialize(gulp)

Conclusion

La configuration d’un pipeline d’intégration continue (CI) pour SPFx dans Azure DevOps automatise le processus de création, de test et de regroupement de vos solutions SPFx chaque fois que des modifications de code se produisent. Ce pipeline réduira à terme le besoin d’intervention manuelle et garantira que le dernier code est soigneusement validé avant le déploiement.