Héberger votre composant WebPart côté client à partir du CDN Microsoft 365 (Hello World 3e partie)Host your client-side web part from Microsoft 365 CDN (Hello World part 4)

Le réseau de distribution de contenu (CDN) de Microsoft 365 vous offre une solution simple pour héberger vos biens directement auprès de votre propre client Microsoft 365.Microsoft 365 Content Delivery Network (CDN) provides you an easy solution to host your assets directly from your own Microsoft 365 tenant. Il vous permet également d’héberger des ressources statiques utilisées dans SharePoint Online.It can be used for hosting any static assets that are used in SharePoint Online.

Notes

Il existe plusieurs options d’hébergement différentes pour vos composants WebPart.There are multiple different hosting options for your web part assets. Ce didacticiel se concentre sur l’option CDN de Microsoft 365, mais vous pouvez également utiliser le CDN Azure ou simplement héberger vos ressources à partir de la bibliothèque SharePoint de votre client.This tutorial concentrates on showing the Microsoft 365 CDN option, but you could also use the Azure CDN or simply host your assets from SharePoint library from your tenant. 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.In the latter case, you would not benefit from the CDN performance improvements, but that would also work from the functionality perspective. Tout emplacement auquel les utilisateurs finals peuvent accéder à l’aide du protocole HTTP(S) est techniquement approprié pour héberger les ressources des utilisateurs finals.Any location that end users can access using HTTP(S) would be technically suitable for hosting the assets for end users.

Important

Cet article utilise l' includeClientSideAssets attribut, qui a été introduit dans SharePoint Framework (SPFx) v 1.4.This article uses the includeClientSideAssets attribute, which was introduced in the SharePoint Framework (SPFx) v1.4. Cette version n’est pas prise en charge avec SharePoint 2016 Feature Pack 2. > si vous utilisez une configuration locale, vous devez décider de l’emplacement d’hébergement CDN séparément.This version is not supported with SharePoint 2016 Feature Pack 2.> If you're using an on-premises setup, you need to decide the CDN hosting location separately. Vous pouvez également simplement héberger les fichiers JavaScript d’une bibliothèque centralisée dans l’installation SharePoint locale à laquelle vos utilisateurs ont accès.You can also simply host the JavaScript files from a centralized library in your on-premises SharePoint to which your users have access. Découvrez des considérations supplémentaires dans les instructions spécifiques sur SharePoint 2016.Please see additional considerations in the SharePoint 2016 specific guidance.

Assurez-vous que vous avez effectué les tâches suivantes avant de commencer :Make sure that you've completed the following tasks before you begin:

Vous pouvez également suivre cette procédure en regardant la vidéo suivante sur la chaîne YouTube SharePoint PnP :You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:

Activer le CDN dans votre client Microsoft 365Enable CDN in your Microsoft 365 tenant

Pour plus d’informations sur l’activation et la configuration du CDN Microsoft 365 dans votre client SharePoint Online, consultez la rubrique activer le CDN microsoft 365.For information on enabling and configuring the Microsoft 365 CDN in your SharePoint Online tenant, see Enable the Microsoft 365 CDN.

Finaliser la solution pour le déploiementFinalize solution for deployment

  1. Passez sur la console et assurez-vous que vous êtes toujours dans le répertoire de projet que vous avez utilisé pour configurer votre projet de composant WebPart.Switch to the console and make sure you're still in the project directory that you used to set up your web part project.

  2. Mettez fin à la tâche Gulp serve possible en sélectionnant CTRL + C, et vérifiez que vous êtes dans le répertoire de votre projet :End the possible gulp serve task by selecting CTRL+C, and ensure that you're in your project directory:

    cd helloworld-webpart
    

Vérifier les paramètres de la solutionReview solution settings

  1. Ouvrez le projet de composant WebPart HelloWorldWebPart dans Visual Studio Code ou votre IDE préféré.Open the HelloWorldWebPart web part project in Visual Studio Code or your preferred IDE.

  2. Ouvrez package-solution.json dans le dossier config.Open package-solution.json from the config folder.

    Le fichier package-solution.json définit les métadonnées de package, comme illustré dans le code suivant :The package-solution.json file defines the package metadata as shown in the following code:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
      "solution": {
        "name": "helloword-webpart-client-side-solution",
        "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
        "version": "1.0.0.0",
        "includeClientSideAssets": true,
        "isDomainIsolated": false
      },
      "paths": {
        "zippedPackage": "solution/helloword-webpart.sppkg"
      }
    }
    

La valeur par défaut de l' includeClientSideAssets est, ce qui true signifie que les ressources statiques sont empaquetées automatiquement dans les fichiers ** * . sppkg** et que vous n’avez pas besoin d’héberger séparément vos biens à partir d’un système externe.The default value for the includeClientSideAssets is true, which means that static assets are packaged automatically in the *.sppkg files, and you don't need to separately host your assets from an external system.

Ne pas modifier ce paramètre pour cet exercice, afin que les ressources soient hébergées automatiquement lorsque la solution est déployée à votre client.Do not change this setting for this exercise, so that assets are automatically hosted when solution is deployed to your tenant.

Si le CDN Microsoft 365 est activé, il est utilisé automatiquement avec les paramètres par défaut.If Microsoft 365 CDN is enabled, it's used automatically with default settings. Si le CDN Microsoft 365 n’est pas activé, les biens sont pris en charge à partir de la collection de sites du catalogue d’applications.If Microsoft 365 CDN isn't enabled, assets are served from the app catalog site collection. Cela signifie que si vous quittez le includeClientSideAssets paramètre true , vos ressources de solution sont automatiquement hébergées dans le client.This means that if you leave the includeClientSideAssets setting true, your solution assets are automatically hosted in the tenant.

Préparation des ressources de composant WebPart à déployerPrepare web part assets to deploy

  1. Exécutez la tâche suivante pour regrouper votre solution.Execute the following task to bundle your solution. Cette opération exécute un build de version de votre projet à l’aide d’une étiquette dynamique comme l’URL hôte pour vos ressources.This executes a release build of your project by using a dynamic label as the host URL for your assets. Cette URL est automatiquement mise à jour en fonction des paramètres de votre CDN client.This URL is automatically updated based on your tenant CDN settings.

    gulp bundle --ship
    
  2. Exécutez la tâche suivante pour créer un package pour votre solution.Execute the following task to package your solution. Cela crée un package helloworld-webpart.sppkg mis à jour dans le dossier sharepoint/solution.This creates an updated helloworld-webpart.sppkg package on the sharepoint/solution folder.

    gulp package-solution --ship
    

    Notes

    Si vous êtes intéressé par les packages qui se trouvent dans le fichier ** * . sppkg** , vous pouvez consulter le contenu du dossier SharePoint/solution/Debug .If you're interested in what actually got packaged inside of the *.sppkg file, you can look in the content of the sharepoint/solution/debug folder.

  3. Chargez le nouveau package de solution côté client dans le catalogue d’applications de votre client ou utilisez simplement le glisser-déplacer.Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.

  4. Étant donné que vous avez déjà déployé le package, vous êtes invité à indiquer si vous souhaitez remplacer le package existant.Because you already deployed the package, you're prompted as to whether to replace the existing package. Sélectionnez Remplacer.Select Replace It.

    Remplacement de la solution existante

  5. La liste des domaines dans l’invite indique SharePoint Online.Notice how the domain list in the prompt says SharePoint Online. Cela est dû au fait que le contenu est pris en charge à partir du CDN Microsoft 365 ou du catalogue d’applications, selon les paramètres du client.This is because the content is either served from the Microsoft 365 CDN or from the app catalog, depending on the tenant settings. Sélectionnez Déployer.Select Deploy.

    Fenêtre d’installation contextuelle du catalogue d’applications pour la solution SPFx

  6. Ouvrez le site où vous avez précédemment installé HelloWorld-WebPart-Client-Side-solution ou installez la solution sur un nouveau site.Open the site where you previously installed the helloworld-webpart-client-side-solution or installed the solution to a new site.

  7. Une fois la solution installée, sélectionnez Ajouter une page dans le menu en forme d’engrenage et sélectionnez HelloWorld dans le sélecteur de composants WebPart de page moderne afin d’ajouter votre composant WebPart personnalisé à la page.After the solution has been installed, select Add a page from the gear menu, and select HelloWorld from the modern page web part picker to add your custom web part to page.

    Composant WebPart HelloWorld visible dans le sélecteur de composants WebPart pour une page moderne

  8. Notez la façon dont le composant WebPart est rendu même si vous n’exécutez pas le serveur Web local.Notice how the web part is rendered even though you're not running the local web server.

    Composant WebPart HelloWorld restitué sur une page moderne qui se trouve en mode édition

  9. Enregistrez les modifications sur la page comportant le composant WebPart.Save changes on the page with the web part.

  10. Ouvrez les outils de développement de votre navigateur et ouvrez l’onglet sources .Open your browser's development tools and open the Sources tab.

  11. Développez publiccdn.sharepointonline.com sous la source et observez comment le fichier hello-world-web-part est chargé à partir de l’URL de CDN public qui pointe de manière dynamique vers une bibliothèque située sous la collection de sites du catalogue d’applications.Extend publiccdn.sharepointonline.com under the source and notice how the hello-world-web-part file is loaded from the Public CDN URL pointing dynamically to a library located under the app catalog site collection.

    Fichier groupé du composant WebPart HelloWorld provenant de l’URL du CDN public sous l’onglet Sources des outils de développement de Chrome

Notes

Si le CDN est désactivé dans votre client et si le paramètre includeClientSideAssets est défini sur true dans le fichier package-solution.json, l’URL de chargement des ressources est mise à jour de manière dynamique et pointe directement vers le dossier ClientSideAssets situé dans la collection de sites du catalogue d’applications.If you would not have CDN enabled in your tenant, and the includeClientSideAssets setting would be truein the package-solution.json, the loading URL for the assets would be dynamically updated and pointing directly to the ClientSideAssets folder located in the app catalog site collection. Dans cet exemple, l’URL serait https://sppnp.microsoft.com/sites/apps/ClientSideAssets/ .In this example case, the URL would be https://sppnp.microsoft.com/sites/apps/ClientSideAssets/. Cette modification est automatique en fonction des paramètres de votre client et elle ne requiert pas de modifications dans le pack de solution réelle.This change is automatic depending on your tenant settings and it does not require any changes in the actual solution package.

Vous avez maintenant déployé votre composant WebPart personnalisé sur SharePoint Online et il est hébergé automatiquement à partir du CDN Microsoft 365.Now you've deployed your custom web part to SharePoint Online and it's being hosted automatically from the Microsoft 365 CDN.

Étapes suivantesNext steps

Vous pouvez charger jQuery et jQuery UI, et créer un composant WebPart d’accordéon jQuery.You can load jQuery and jQuery UI and build a jQuery Accordion web part. Pour continuer, consultez la rubrique Ajout d’un accordéon jQueryUI à votre composant WebPart côté client.To continue, see Add jQueryUI Accordion to your client-side web part.