Déployer votre composant WebPart côté client SharePoint sur un CDN Azure

Créez un exemple de composant WebPart et déployez ses ressources vers un CDN Azure au lieu d’utiliser le CDN Office 365 par défaut comme solution d’hébergement. Vous allez utiliser un compte de stockage Azure intégré à un CDN pour déployer vos ressources. Les outils de génération de l’infrastructure SharePoint prennent en charge le déploiement vers un compte de stockage Azure. Toutefois, vous pouvez également charger les fichiers manuellement vers votre fournisseur de CDN favori ou dans SharePoint.

Remarque

Il existe plusieurs options d’hébergement différentes pour vos composants WebPart. Ce didacticiel se concentre sur l’option CDN Azure, mais vous pouvez aussi utiliser le CDN Office 365 ou simplement héberger vos composants de la bibliothèque SharePoint de votre client. Dans le deuxième cas, vous ne pouvez pas bénéficier des améliorations des performances du CDN mais cela fonctionne également du point de vue des fonctionnalités. Tout emplacement auquel les utilisateurs finaux peuvent accéder à l’aide du protocole HTTP est techniquement approprié pour héberger les composants pour les utilisateurs finaux.

Configuration d’un compte de stockage Azure

Pour configurer un compte de stockage Azure et l’intégrer avec le CDN, suivez les instructions présentées dans l’article Intégrer un compte de stockage Azure à Azure CDN en plus des étapes détaillées dans cet article.

Remarque

Sachant que les interfaces utilisateur Azure évoluent rapidement, certaines images et étapes peuvent être obsolètes, mais le processus global est toujours valide.

Nom du compte de stockage

Il s’agit du nom que vous avez utilisé pour créer votre compte de stockage, comme décrit dans l’étape 1 : Création d’un compte de stockage

Par exemple, dans la capture d’écran suivante, spfxsamples est le nom du compte de stockage.

Cette valeur crée un nouveau point de terminaison de compte de stockage spfxsamples.blob.core.windows.net.

Remarque

Vous devez créer un nom de compte de stockage unique pour vos projets SharePoint Framework.

Nom du conteneur d’objets blob

Créez un conteneur de service BLOB. Il est disponible dans le tableau de bord de votre compte de stockage.

Sélectionnez l’option + Conteneur et créez un nouveau conteneur avec les valeurs suivantes :

• Nom : azurehosted-webpart
• Type d’accès : Conteneur

Clé d’accès au compte de stockage

Dans le tableau de bord du compte de stockage, sélectionnez Clé d’accès et copiez l’une des clés d’accès.

Point de terminaison et profil CDN

Créez un nouveau profil CDN et associez le point de terminaison CDN à ce conteneur d’objets blob.

1. Créez un profil CDN comme décrit dans Étape 2 : Activation du CDN pour le compte de stockage (faites défiler l’étape 2 vers le bas jusqu’à la section Pour créer un profil CDN).

   Par exemple, dans l’écran suivant, spfxwebparts est le nom du profil CDN.

   

2. Créez un point de terminaison CDN comme décrit dans Étape 2 : Activation du CDN pour le compte de stockage. Le point de terminaison CDN est créé avec l’URL suivante :http://spfxsamples.azureedge.net

   Par exemple, dans l’écran suivant, spfxsamples est le nom du point de terminaison, Stockage est le type d’origine, et spfxsamples.blob.core.windows.net est le compte de stockage.

   

Étant donné que vous avez associé le point de terminaison CDN à votre compte de stockage, vous pouvez également accéder au conteneur d’objets blob à l’URL suivante : http://spfxsamples.azureedge.net/azurehosted-webpart/

Notez toutefois que vous n’avez pas encore déployé les fichiers.

Création d’un projet de composant WebPart

1. Créez un répertoire de projet à l’emplacement de votre choix :

   md azurehosted-webpart
   

2. Accédez au répertoire du projet :

   cd azurehosted-webpart
   

3. Créez une solution d’infrastructure SharePoint en exécutant le générateur Yeoman SharePoint :

   yo @microsoft/sharepoint
   

4. Lorsque vous y êtes invité :

   • Acceptez la valeur par défaut azurehosted-webpart comme nom pour votre solution, puis sélectionnez Entrée.
   • Sélectionnez SharePoint Online uniquement (dernière version), puis appuyez sur Entrée.
   • Sélectionnez Utiliser le dossier actuel comme emplacement pour les fichiers.
   • Sélectionnez y pour utiliser l’option de déploiement dans l’étendue client, ce qui rend le composant WebPart disponible sur les sites dès qu’il est déployé.
   • Sélectionnez N sur la question si la solution contient des autorisations uniques.
   • Choisissez WebPart comme type de composant côté client à créer.

5. La prochaine série d’invites vous demande des informations spécifiques sur votre composant WebPart :

   • Utilisez AzureCDN comme nom pour votre composant WebPart, puis sélectionnez Entrée.
   • Acceptez la valeur par défaut AzureCDN description comme description de votre composant WebPart, sélectionnez Entrée.
   • Acceptez la valeur par défaut Aucune infrastructure web JavaScript comme infrastructure que vous souhaitez utiliser, puis sélectionnez Entrée.

   

   À ce stade, Yeoman crée la structure des fichiers de solution et installe les dépendances requises. Cette opération peut prendre quelques minutes. Yeoman génère automatiquement les modèles du projet à inclure à votre composant WebPart personnalisé.

6. Saisissez les informations suivantes pour ouvrir le projet de composant WebPart dans Visual Studio Code :

   code .
   

Configurer la solution pour ne pas utiliser les paramètres par défaut

1. Ouvrez le fichier ./config/package-solution.json. Il s’agit de l’emplacement où nous contrôlons la mise en package de la solution.

2. Définissez la includeClientSideAssets valeur sur false afin que les ressources côté client ne soient PAS empaquetées dans le fichier .sppkg , qui est le comportement par défaut. Comme nous hébergeons des ressources à partir d’un CDN externe, nous ne voulons pas qu’elles soient incluses dans le package de solution. Votre configuration doit ressembler à ce qui suit.

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "azurehosted-webpart-client-side-solution",
       "id": "a4e95ed1-d096-4573-8a57-d0cc3b52da6a",
       "version": "1.0.0.0",
       "includeClientSideAssets": false,
       "skipFeatureDeployment": true,
       "isDomainIsolated": false
     },
     "paths": {
       "zippedPackage": "solution/azurehosted-webpart.sppkg"
     }
   }
   

   Remarque

   Le skipFeatureDeployment paramètre est ici true , car la réponse pour l’option de déploiement de l’étendue du locataire était « y » dans le flux Yeoman. Cela signifie que vous n’avez PAS besoin d’installer explicitement la solution sur le site avant que le composant WebPart soit disponible. Déployer et approuver le package de solution dans le catalogue d’applications client est suffisant pour rendre disponible le composant WebPart sur tous les sites dans le client donné.

Configuration des détails du compte de stockage Azure

1. Ouvrez le fichier ./config/deploy-azure-storage.json . Il s’agit du fichier qui contient des détails de votre compte de stockage Azure.

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
     "workingDir": "./release/assets/",
     "account": "<!-- STORAGE ACCOUNT NAME -->",
     "container": "azurehosted-webpart",
     "accessKey": "<!-- ACCESS KEY -->"
   }
   

   Importante

   L’emplacement des ressources utilisées dans les déploiements Azure CDN a changé dans SPFx v1.12.1. L’extrait de code ci-dessus reflète l’emplacement correct dans la workingDir propriété .

   Pour les projets créés avant SPFx v1.12.1, la workingDir propriété a été définie sur ./temp/deploy/. Si vous avez mis à niveau le projet vers SPFx v1.12.1+, vous devez mettre à jour cette propriété avec le paramètre ci-dessus. Pour plus d’informations, consultez SharePoint Framework notes de publication v1.12.1.

2. Remplacez , par accessKeycontainerle nom de votre compte de stockage, le conteneur BLOB et la accountclé d’accès au compte de stockage, respectivement.

   workingDir est le répertoire où se trouvent les ressources du composant WebPart.

   Dans cet exemple, avec le compte de stockage créé précédemment, ce fichier se présente comme suit :

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
     "workingDir": "./release/assets/",
     "account": "spfxsamples",
     "container": "azurehosted-webpart",
     "accessKey": "q1UsGWocj+CnlLuv9ZpriOCj46ikgBbDBCaQ0FfE8+qKVbDTVSbRGj41avlG73rynbvKizZpIKK9XpnpA=="
   }
   

3. Enregistrez le fichier.

Configurer le composant WebPart pour qu’il soit chargé à partir du CDN

Pour que le composant WebPart soit chargé à partir de votre CDN, vous devez indiquer le chemin d’accès de ce dernier.

1. Basculez vers Visual Studio Code et ouvrez le fichier ./config/write-manifests.json .

2. Entrez votre chemin de base CDN pour la cdnBasePath propriété .

   {
     "cdnBasePath": "<!-- PATH TO CDN -->"
   }
   

   Dans cet exemple, avec le profil de CDN créé précédemment, ce fichier se présente comme suit :

   {
     "cdnBasePath": "https://spfxsamples.azureedge.net/azurehosted-webpart/"
   }
   

   Remarque

   Le chemin de base du CDN est le point de terminaison CDN où se trouve le conteneur d’objets blob.

3. Enregistrez le fichier.

Préparer les ressources de composant WebPart à déployer

Avant de télécharger les ressources dans le CDN, vous devez les générer.

1. Basculez vers la console et exécutez la tâche gulp suivante :

   gulp bundle --ship
   

   Elle génère les ressources réduites à télécharger vers le fournisseur de CDN. - -ship indique l’outil de génération à générer pour la distribution. Vous devez également remarquer que la sortie de l’outil de génération indique que la cible de build est SHIP.

   Build target: SHIP
   [21:23:01] Using gulpfile ~/apps/azurehosted-webpart/gulpfile.js
   [21:23:01] Starting gulp
   [21:23:01] Starting 'default'...
   

   Les ressources minifiées se trouvent sous le répertoire temp\deploy .

Déploiement des ressources vers le stockage Azure

1. Passez à la console du répertoire de projet azurehosted-webpart.

2. Entrez la tâche Gulp de déploiement des ressources sur votre compte de stockage :

   gulp deploy-azure-storage
   

   Cette action déploie le fichier groupé du composant WebPart, ainsi que d’autres ressources, comme des fichiers CSS et JavaScript, vers le CDN.

Déploiement du package mis à jour

Inclusion de la solution dans un package

Sachant que vous avez modifié le fichier groupé du composant WebPart, vous devez redéployer le package dans le catalogue d’applications. Vous avez utilisé --ship pour générer des ressources réduites pour la distribution.

1. Passez à la console du répertoire de projet azurehosted-webpart.

2. Entrez la tâche gulp pour empaqueter la solution côté client, cette fois avec l’indicateur --ship défini. Cela force la tâche à utiliser le chemin d’accès de base du CDN configuré à l’étape précédente :

   gulp package-solution --ship
   

   Cette opération crée le package mis à jour de la solution côté client dans le dossier sharepoint\solution.

Chargement dans votre catalogue d’applications

1. Téléchargez le package de solution côté client dans le catalogue d’applications ou utilisez simplement un glisser-déplacer. L’URL pointe vers l’URL Azure CDN configurée lors des étapes précédentes.

2. Cliquez sur la case à cocher pour indiquer que la solution peut être déployée automatiquement sur tous les sites de l’organisation.

   

3. Sélectionnez Déployer.

   Le catalogue d’applications contient maintenant le package de solution côté client dans lequel le fichier groupé du composant WebPart est chargé à partir du CDN.

Tester le composant WebPart HelloWorld

1. Accédez à un site SharePoint de votre client et sélectionnez Ajouter une page dans le menu d’engrenage.

2. Modifiez la page, puis sélectionnez le composant WebPart AzureCDN à partir du sélecteur de composants WebPart pour confirmer que votre déploiement a réussi.

   

3. Notez que vous n’exécutez pas gulp serve. Par conséquent, rien n’est servi à partir de localhost. Le contenu est extrait à partir du CDN Azure. Vous pouvez également vérifier cela en sélectionnant F12 dans votre navigateur et en confirmant que vous pouvez voir le CDN Azure comme l’une des sources pour les ressources de la page.

   

Déploiement vers d’autres CDN

Pour déployer les ressources vers votre fournisseur de CDN favori, vous pouvez copier les fichiers à partir du dossier tmp\deploy. Pour générer des ressources pour la distribution, exécutez la commande Gulp suivante, comme nous l’avons fait auparavant avec le paramètre --ship :

gulp bundle --ship

Tant que vous mettez à jour le cdnBasePath en conséquence, vos fichiers sont correctement chargés.

Remarque

Si vous trouvez un problème dans la documentation ou dans SharePoint Framework, signalez-le aux ingénieurs SharePoint en utilisant la liste des problèmes dans le référentiel sp-dev-docs ou en ajoutant un commentaire à cet article. Nous vous remercions par avance pour vos commentaires.

Voir aussi

• Créer votre premier composant WebPart côté client SharePoint