Publier un complément développé avec Visual Studio Code
Cet article explique comment un complément Office que vous avez créé à l’aide du générateur Yeoman et développé avec Visual Studio Code (VS Code) ou un autre éditeur.
Remarque
- Pour plus d’informations sur la publication d’un complément Office que vous avez créé à l’aide de Visual Studio, voir Publier votre complément à l’aide de Visual Studio.
- Pour plus d’informations sur la publication d’un complément Office que vous avez créé à l’aide du Kit de ressources Teams, voir Déployer une application Teams dans le cloud et Déployer votre première application Teams. Cet article concerne les applications d’onglet Teams, mais il s’applique aux compléments Office créés avec le Kit de ressources Teams.
Publication d’un complément pour accéder à d’autres utilisateurs
Un complément Office comprend une application Web et un fichier manifeste. L’application Web définit l’interface utilisateur et les fonctionnalités du complément, tandis que le manifeste spécifie l’emplacement de l’application Web et définit les paramètres et fonctionnalités du complément.
Pendant que vous développez, vous pouvez exécuter le complément sur votre serveur web local (localhost
). Lorsque vous êtes prêt à le publier pour que d’autres utilisateurs puissent y accéder, vous devez déployer l’application web et mettre à jour le manifeste pour spécifier l’URL de l’application déployée.
Lorsque votre complément fonctionne comme vous le souhaitez, vous pouvez le publier directement via Visual Studio Code à l’aide de l’extension Stockage Azure.
Utilisation de Visual Studio Code pour publier
Remarque
Ces étapes fonctionnent uniquement pour les projets créés avec le générateur Yeoman et qui utilisent le manifeste au format XML. Elles ne s’appliquent pas si vous avez créé le complément à l’aide du Kit de ressources Teams ou si vous l’avez créé avec le générateur Yeoman et qu’il utilise le manifeste unifié pour Microsoft 365.
Ouvrez votre projet à partir de son dossier racine dans Visual Studio Code (VS Code).
Sélectionnez Afficher les>extensions (Ctrl+Maj+X) pour ouvrir la vue Extensions.
Recherchez l’extension Stockage Azure et installez-la.
Une fois installée, une icône Azure est ajoutée à la barre d’activité. Sélectionnez-la pour accéder à l’extension. Si la barre d’activité est masquée, ouvrez-la en sélectionnant Afficher> labarre d’activitéd’apparence>.
Sélectionnez Se connecter à Azure pour vous connecter à votre compte Azure. Si vous n’avez pas encore de compte Azure, créez-en un en sélectionnant Créer un compte Azure. Suivez les étapes fournies pour configurer votre compte.
Une fois que vous êtes connecté, vos comptes de stockage Azure apparaissent dans l’extension. Si vous n’avez pas encore de compte de stockage, créez-en un à l’aide de l’option Créer un compte de stockage dans la palette de commandes. Nommez votre compte de stockage un nom global unique, en utilisant uniquement « a-z » et « 0-9 ». Notez que par défaut, cela crée un compte de stockage et un groupe de ressources portant le même nom. Il place automatiquement le compte de stockage dans la région USA Ouest. Cela peut être ajusté en ligne via votre compte Azure.
Cliquez avec le bouton droit sur votre compte de stockage et sélectionnez Configurer le site web statique. Vous serez invité à entrer le nom du document d’index et le nom du document 404. Remplacez le nom du document d’index par défaut
index.html
partaskpane.html
. Vous pouvez également modifier le nom du document 404, mais vous n’y êtes pas obligé.Cliquez à nouveau avec le bouton droit sur votre compte de stockage, puis sélectionnez Cette fois-ci Parcourir le site web statique. Dans la fenêtre du navigateur qui s’ouvre, copiez l’URL du site web.
Ouvrez le fichier manifeste de votre projet (
manifest.xml
) et remplacez toutes les références à votre URL localhost (parhttps://localhost:3000
exemple) par l’URL que vous avez copiée. Ce point de terminaison est l’URL de site web statique pour votre compte de stockage nouvellement créé. Enregistrez les modifications apportées à votre fichier manifeste.Ouvrez une invite de ligne de commande ou une fenêtre de terminal et accédez au répertoire racine de votre projet de complément. Exécutez la commande suivante pour préparer tous les fichiers pour le déploiement de production.
npm run build
Une fois la build terminée, le dossier dist dans le répertoire racine de votre projet de complément contient les fichiers que vous allez déployer dans les étapes suivantes.
Dans VS Code, accédez au Explorer, cliquez avec le bouton droit sur le dossier dist, puis sélectionnez Déployer sur un site web statique via stockage Azure. Lorsque vous y êtes invité, sélectionnez le compte de stockage que vous avez créé précédemment.
Une fois le déploiement terminé, cliquez avec le bouton droit sur le compte de stockage que vous avez créé précédemment et sélectionnez Parcourir le site web statique. Le site web statique s’ouvre et affiche le volet Office.
Enfin, chargez une version test du fichier manifeste et le complément se charge à partir du site web statique que vous venez de déployer.
Déployer des fonctions personnalisées pour Excel
Si votre complément a des fonctions personnalisées, il existe quelques étapes supplémentaires pour les activer sur le compte stockage Azure. Tout d’abord, activez CORS afin qu’Office puisse accéder au fichier functions.json.
Cliquez avec le bouton droit sur le compte de stockage Azure et sélectionnez Ouvrir dans le portail.
Dans le groupe Paramètres, sélectionnez Partage de ressources (CORS). Vous pouvez également utiliser la zone de recherche pour le trouver.
Créez une règle CORS avec les paramètres suivants.
Propriété Valeur Origines autorisées * Méthodes autorisées GET En-têtes autorisés * En-têtes exposés Access-Control-Allow-Origin Âge maximal 200 Sélectionnez Enregistrer.
Attention
Cette configuration CORS suppose que tous les fichiers de votre serveur sont accessibles publiquement à tous les domaines.
Ensuite, ajoutez un type MIME pour les fichiers JSON.
Créez un fichier dans le dossier /src nommé web.config.
Insérez le code XML suivant et enregistrez le fichier.
<?xml version="1.0"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer> </configuration>
Ouvrez le fichier webpack.config.js.
Ajoutez le code suivant dans la liste de
plugins
pour copier le web.config dans le bundle lors de l’exécution de la build.new CopyWebpackPlugin({ patterns: [ { from: "src/web.config", to: "src/web.config", }, ], }),
Ouvrez une invite de ligne de commande et accédez au répertoire racine de votre projet de complément. Ensuite, exécutez la commande suivante pour préparer tous les fichiers pour le déploiement.
npm run build
Une fois la génération terminée, le dossier dist dans le répertoire racine de votre projet de complément contient les fichiers que vous allez déployer.
Pour déployer, dans le Explorer VS Code, cliquez avec le bouton droit sur le dossier dist, puis sélectionnez Déployer sur un site web statique via stockage Azure. Lorsque vous y êtes invité, sélectionnez le compte de stockage que vous avez créé précédemment. Si vous avez déjà déployé le dossier dist , vous serez invité à remplacer les fichiers dans le stockage Azure avec les dernières modifications.
Déploiement de mises à jour
Lorsque vous ajoutez des fonctionnalités ou corrigez des bogues dans votre complément, vous devez déployer les mises à jour. Si votre complément est déployé par un ou plusieurs administrateurs dans leur organisation, certaines modifications de manifeste nécessitent que l’administrateur consente aux mises à jour. Les utilisateurs seront bloqués du complément jusqu’à ce que leur consentement soit accordé. Les modifications de manifeste suivantes nécessitent que l’administrateur donne à nouveau son consentement.
- Modifications apportées aux autorisations demandées. Voir Demande d’autorisations pour l’utilisation d’API dans les compléments et Présentation des autorisations de complément Outlook.
- Étendues supplémentaires ou modifiées. (Non applicable si le complément utilise le manifeste unifié pour Microsoft 365.)
- Événements Outlook supplémentaires ou modifiés.
Remarque
Chaque fois que vous apportez une modification au manifeste, vous devez augmenter le numéro de version du manifeste.
- Si le complément utilise le manifeste XML, consultez Élément Version.
- Si le complément utilise le manifeste unifié, consultez la propriété version.
Voir aussi
Commentaires
https://aka.ms/ContentUserFeedback.
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultezEnvoyer et afficher des commentaires pour