Charger une image dans un objet blob Stockage Azure avec JavaScript

Article
12/06/2023

Utilisez une application web statique pour charger un fichier dans un objet blob Stockage Azure à l’aide d’un package npm @azure/storage-blob Stockage Azure avec un jeton SAP Stockage Azure.

Prérequis

Abonnement Azure ; si vous ne disposez pas d’un abonnement Azure, vous pouvez vous inscrire pour un compte Azure gratuit.
Compte GitHub à fork et envoyer (push) vers un dépôt.

Architecture de l'application

Cette architecture d’application comprend deux ressources Azure :

Azure Static Web Apps pour l’application cliente générée statiquement. La ressource fournit également l’API Azure Functions managée. Managé signifie que la ressource Static Web Apps gère la ressource d’API pour sa propre utilisation.
Stockage Azure pour le stockage d’objets blob.

Diagram showing how a customer interacts from their computer to use the website to upload a file to Azure Storage directly.

Étape	Description
1	Le client se connecte au site web généré statiquement. Le site web est hébergé dans Azure Static Web Apps.
2	Le client utilise ce site web pour sélectionner un fichier à charger. Pour ce tutoriel, l’infrastructure frontale est Vite React et le fichier chargé est un fichier image.
3	Le site web appelle l’API `sas` Azure Functions pour obtenir un jeton SAP en fonction du nom de fichier exact à charger. L’API serverless utilise le sdk Stockage Blob Azure pour créer le jeton SAP. L’API retourne l’URL complète à utiliser pour charger le fichier, qui inclut le jeton SAP comme chaîne de requête. `https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN`
4	Le site web frontal utilise l’URL du jeton SAP pour charger le fichier directement dans Stockage Blob Azure.

Environnements locaux et de build

Ce tutoriel utilise les environnements suivants :

Développement local avec GitHub Codespaces ou Visual Studio Code.
Générez et déployez avec GitHub Actions.

1. Exemple de référentiel d’applications fork avec GitHub

Ce tutoriel utilise des actions GitHub pour déployer l’exemple d’application sur Azure. Vous avez besoin d’un compte GitHub et d’une duplication de l’exemple de référentiel d’applications pour effectuer ce déploiement.

Dans un navigateur web, utilisez le lien suivant pour commencer la duplication pour votre propre compte du dépôt d’exemples : Azure-Samples/azure-typescript-e2e-apps.
Effectuez les étapes de duplication de l’exemple avec la branche principale uniquement.

2. Configurer l’environnement de développement

Un environnement de conteneur de développement est disponible avec toutes les dépendances requises pour effectuer chaque exercice de ce projet. Vous pouvez exécuter le conteneur de développement dans GitHub Codespaces ou localement à l’aide de Visual Studio Code.

GitHub Codespaces
Visual Studio Code

GitHub Codespaces exécute un conteneur de développement géré par GitHub avec Visual Studio Code pour le web comme interface utilisateur. Pour l’environnement de développement le plus simple, nous utilisons GitHub Codespaces pour que vous disposiez des outils et des dépendances du développeur appropriés préinstallés pour exécuter ce module de formation.

Important

Tous les comptes GitHub peuvent utiliser codespaces pendant jusqu’à 60 heures gratuites chaque mois avec 2 instances principales. Pour plus d’informations, consultez Le stockage mensuel inclus et les heures de cœur GitHub Codespaces.

Dans un navigateur web, sur votre fourche GitHub de l’exemple de référentiel, démarrez le processus de création d’un espace de code GitHub sur la main branche de votre fourche en sélectionnant le bouton CODE .
Sous l’onglet Espaces de code, sélectionnez les points de suspension. ...
Sélectionnez + Nouveau avec les options permettant de sélectionner un conteneur de développement Codespaces spécifique.
Sélectionnez les options suivantes, puis sélectionnez Créer un espace de code.
- Branche: main
- Configuration du conteneur de développement : Tutorial: Upload file to storage with SAS Token
- Région : accepter la valeur par défaut
- Type d’ordinateur : accepter la valeur par défaut
Attendez que le codespace démarre. Ce processus de démarrage peut prendre quelques minutes.
Ouvrez un nouveau terminal dans le codespace.

Conseil

Vous pouvez utiliser le menu principal pour accéder à l’option de menu Terminal, puis sélectionner l’option Nouveau terminal.
Vérifiez les versions des outils que vous utilisez dans ce tutoriel.
```
node --version
npm --version
func --version
```
Ce tutoriel nécessite les versions suivantes de chaque outil, qui sont préinstallées dans votre environnement :

Outil Version

Node.js ≥ 18

npm ≥ 9.5

Azure Functions Core Tools ≥ 4.5098
Fermez le terminal.
Les étapes restantes de ce didacticiel se déroulent dans le contexte de ce conteneur de développement.

Outil	Version
Node.js	≥ 18
npm	≥ 9.5
Azure Functions Core Tools	≥ 4.5098

L’extension Dev Containers pour Visual Studio Code nécessite l’installation de Docker sur votre ordinateur local. L’extension héberge le conteneur de développement localement à l’aide de l’hôte Docker avec les outils de développement et les dépendances appropriés préinstallés pour suivre ce module de formation.

Ouvrez Visual Studio Code dans le contexte d’un répertoire vide.
Vérifiez que l’extension Dev Containers est installée dans Visual Studio Code.
Ouvrez un nouveau terminal dans l’éditeur.

Conseil

Vous pouvez utiliser le menu principal pour accéder à l’option de menu Terminal, puis sélectionner l’option Nouveau terminal.
Clonez votre fourche dans le répertoire actif. Remplacez YOUR-ACCOUNT la commande suivante par le nom de votre compte.
```
git clone https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps
```
Ouvrez la palette de commandes, recherchez les commandes Conteneurs de développement, puis sélectionnez Conteneurs de développement : rouvrir dans conteneur.

Conseil

Visual Studio Code peut vous inviter automatiquement à rouvrir le dossier existant dans un conteneur de développement. D’un point de vue fonctionnel, cela revient à utiliser la palette de commandes pour rouvrir l’espace de travail actuel dans un conteneur.
Vérifiez les versions des outils que vous utilisez dans ce tutoriel.
```
node --version
npm --version
func --version
```
Ce tutoriel nécessite les versions suivantes de chaque outil, qui sont préinstallées dans votre environnement :

Outil Version

Node.js ≥ 18

npm ≥ 9.5

Azure Functions Core Tools ≥ 4.5098
Fermez le terminal.
Les étapes restantes de ce didacticiel se déroulent dans le contexte de ce conteneur de développement.

Outil	Version
Node.js	≥ 18
npm	≥ 9.5
Azure Functions Core Tools	≥ 4.5098

3. Installer des dépendances

L’exemple d’application de ce didacticiel se trouve dans le azure-upload-file-to-storage dossier. Vous n’aurez pas besoin d’utiliser d’autres dossiers dans le projet.

Dans Visual Studio Code, ouvrez un terminal et accédez au dossier du projet.
```
cd azure-upload-file-to-storage
```
Fractionnez le terminal pour que vous ayez deux terminaux, un pour l’application cliente et un pour l’application API.
Dans l’un des terminaux, exécutez la commande suivante pour installer les dépendances de l’application API et exécuter l’application.
```
cd api && npm install
```
Dans l’autre terminal, exécutez la commande pour installer l’application cliente.
```
cd app && npm install
```

4. Créer une ressource de stockage avec l’extension Visual Studio

Créez la ressource Stockage à utiliser avec l’exemple d’application. Le stockage est utilisé pour les éléments suivants :

Déclencheurs dans l’application Azure Functions
Stockage Blob (fichier)

Accédez à l’extension Stockage Azure.
Connectez-vous à Azure si nécessaire.
Cliquez avec le bouton droit sur l’abonnement, puis sélectionnez Create Resource....
Sélectionnez Créer Stockage compte dans la liste.

Suivez les invites en utilisant le tableau suivant pour comprendre comment créer votre ressource de stockage.

Propriété	Valeur
Entrez un nom global unique pour la nouvelle application web.	Entrez une valeur unique telle que `fileuploadstor`, pour votre nom de ressource Stockage. Ce nom unique est le nom de votre ressource utilisé dans la section suivante. Utilisez seulement des caractères et des chiffres, avec une longueur maximale de 24. Vous utiliserez ce nom de compte ultérieurement.
Sélectionnez un emplacement pour les nouvelles ressources.	Utilisez l’emplacement recommandé.

Quand le processus de création de l’application est terminé, une notification s’affiche avec des informations sur la nouvelle ressource.

5. Configurer Stockage CORS

Étant donné que le navigateur est utilisé pour charger le fichier, le compte Stockage Azure doit configurer CORS pour autoriser les requêtes inter-origines.

Accédez à l’extension Stockage Azure. Cliquez avec le bouton droit sur votre ressource de stockage, puis sélectionnez Ouvrir dans le portail.
Dans la section Portail Azure compte de stockage Paramètres, sélectionnez Partage de ressources (CORS).
Utilisez les propriétés suivantes pour définir CORS pour ce didacticiel.
- Origines autorisées : *
- Méthodes autorisées : toutes les mises à jour correctives
- En-têtes autorisés : *
- En-têtes exposés : *
- Âge maximal : 86400
Ces paramètres sont utilisés pour ce didacticiel pour simplifier les étapes et ne sont pas destinés à indiquer les meilleures pratiques ou la sécurité. En savoir plus sur CORS pour Stockage Azure.
Sélectionnez Enregistrer.

6. Accorder un accès anonyme au stockage

Le chargement de fichiers est sécurisé à partir du client lorsque vous créez un jeton SAS limité et limité à l’autorisation. Toutefois, une fois le fichier chargé, dans ce scénario de didacticiel, vous souhaitez que tout le monde le voit. Pour ce faire, vous devez modifier l’autorisation de stockage pour qu’elle soit accessible publiquement.

Même si le compte est accessible publiquement, chaque conteneur et chaque objet blob peuvent avoir un accès privé. Une méthode plus sécurisée, mais trop complexe pour ce didacticiel consiste à charger sur un compte de stockage avec le jeton SAP, puis à déplacer l’objet blob vers un autre compte de stockage avec un accès public.

Pour activer l’accès public dans le Portail Azure, sélectionnez la page Vue d’ensemble de votre compte de stockage, dans la section Propriétés, sélectionnez Accès anonyme Blob, puis Désactivé.
Dans la page Configuration, activez Autoriser l’accès anonyme blob.

7. Créer un conteneur de chargement

Toujours dans le compte de stockage Portail Azure, dans la section Stockage des données, sélectionnez Conteneurs.
Sélectionnez + Conteneur pour créer votre upload conteneur avec les paramètres suivants :
- Nom : upload
- Niveau d’accès public : Blob
Sélectionnez Créer.

8. Accordez-vous l’accès aux données Blob

Pendant que vous avez créé la ressource, vous n’êtes pas autorisé à afficher le contenu du conteneur. Cela est réservé pour des rôles IAM spécifiques. Ajoutez votre compte pour que vous puissiez afficher les objets blob dans les conteneurs.

Toujours dans le compte de stockage Portail Azure, sélectionnez Contrôle d’accès (IAM).
Sélectionnez Ajouter des attributions de rôle.
Recherchez et sélectionnez Stockage Contributeur aux données blob. Cliquez sur Suivant.
Sélectionnez + Sélectionner les membres.
Recherchez et sélectionnez votre compte.
Sélectionnez Vérifier + attribuer.
Sélectionnez Conteneurs , puis le conteneur de chargement . Vous devez être en mesure de voir qu’il n’y a pas d’objets blob dans le conteneur sans erreurs d’autorisation.

9. Obtenir Stockage informations d’identification de ressource

Les informations d’identification des ressources Stockage sont utilisées dans l’application API Azure Functions pour se connecter à la ressource Stockage.

Toujours dans le Portail Azure, dans la section Sécurité + mise en réseau, sélectionnez Clés d’accès.
N’oubliez pas que les fichiers d’API sont trouvés à l’adresse ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api.
Dans le dossier d’API, renommez le fichier en local.settings.json.samplelocal.settings.json. Le fichier est ignoré par Git afin qu’il ne soit pas case activée dans le contrôle de code source.

Mettez à jour les paramètres pour local.settings.json utiliser le tableau suivant.

Propriété	Valeur	Description
Azure_Stockage_AccountName	Stockage Azure nom du compte, par exemple : `fileuploadstor`.	Utilisé dans le code source pour se connecter à Stockage ressource.
Azure_Stockage_AccountKey	Clé du compte de Stockage Azure	Utilisé dans le code source pour se connecter à Stockage ressource.
AzureWebJobsStorage	Stockage Azure compte chaîne de connexion	Utilisez le runtime Azure Functions pour stocker l’état et les journaux.

Il peut sembler que vous avez entré les mêmes informations d’identification de compte deux fois, une fois en tant que clé et une fois en tant que chaîne de connexion. Vous l’avez fait, mais spécifiquement pour ce tutoriel simple. En règle générale, les applications Azure Functions doivent avoir une ressource Stockage distincte qui n’est pas réutilisée à une autre fin. Lorsque vous créez la ressource De fonction Azure plus loin dans le tutoriel, vous n’aurez pas besoin de définir la valeur AzureWebJobs Stockage pour la ressource cloud. Vous devez uniquement définir les valeurs Azure_Stockage_AccountName et Azure_Stockage_AccountKey utilisées dans le code source.

10. Exécuter l’application API

Exécutez l’application Functions pour vous assurer qu’elle fonctionne correctement avant de la déployer sur Azure.

Dans le terminal de l’application API, exécutez la commande suivante pour démarrer l’application API.
```
npm run start
```
Attendez que l’application Azure Functions soit démarrée. Vous recevrez un avis indiquant que le port de l’application Azure Functions, 7071 est désormais disponible. Vous devez également voir les API répertoriées dans le terminal pour l’application API.
```
Functions:

        list: [POST,GET] http://localhost:7071/api/list

        sas: [POST,GET] http://localhost:7071/api/sas

        status: [GET] http://localhost:7071/api/status
```
Sélectionnez l’onglet Ports dans le volet inférieur, cliquez avec le bouton droit sur le port 7071 , puis sélectionnez Visibilité des ports, puis sélectionnez Public.

Si vous n’exposez pas cette application en tant que public, vous obtenez une erreur lorsque vous utilisez l’API à partir de l’application cliente.
Pour tester que l’API fonctionne et se connecte au stockage, sous l’onglet Ports dans le volet inférieur, sélectionnez l’icône globe dans la zone d’adresse locale pour le port 7071. Cela ouvre un navigateur web à l’application functions.
Ajoutez l’itinéraire d’API à la barre d’adresses URL : /api/sas?container=upload&file=test.png. Il est ok que le fichier ne se trouve pas encore dans le conteneur. L’API crée le jeton SAP en fonction de l’emplacement dans lequel vous souhaitez qu’il soit chargé.

La réponse JSON doit ressembler à ce qui suit :

{
    "url":"https://YOUR-STORAGE-RESOURCE.blob.core.windows.net/upload/test.png?sv=2023-01-03&spr=https&st=2023-07-26T22%3A15%3A59Z&se=2023-07-26T22%3A25%3A59Z&sr=b&sp=w&sig=j3Yc..."
}

Copiez la base de l’URL de l’API dans la barre d’adresses du navigateur (et non l’URL du jeton SAP dans l’objet JSON) à utiliser à l’étape suivante. L’URL de base est tout avant /api/sas.

11. Configurer et exécuter l’application cliente

Renommez le fichier ./azure-upload-file-to-storage/app/.env.sample en .env.
Ouvrez le .env fichier et collez l’URL de base de la section précédente comme valeur du VITE_API_SERVERfichier .

Un exemple d’environnement Codespaces peut ressembler à quelque chose VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev
Dans l’autre terminal fractionné, démarrez l’application cliente avec la commande suivante :
```
npm run dev
```

Attendez que le terminal retourne l’avis suivant que l’application est disponible sur le port 5173.

  VITE v4.4.4  ready in 410 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Sélectionnez l’onglet Ports dans le volet inférieur, puis cliquez avec le bouton droit sur le port 5173 , puis sélectionnez l’icône globe.
Vous devez voir l’application web simple.
Interagissez avec l’application web :
- Sélectionnez un fichier image (*.jpg ou *.png) à partir de votre ordinateur local à charger.
- Sélectionnez le bouton Obtenir une SAP pour demander un jeton SAP à partir de l’application API. La réponse affiche l’URL complète à utiliser pour charger le fichier dans Stockage.
- Sélectionnez le bouton Charger pour envoyer directement le fichier image à Stockage.
L’application cliente et l’application API ont réussi à collaborer dans un environnement de développement conteneurisé.

12. Valider les modifications du code

Dans Visual Studio Code, ouvrez l’onglet Contrôle de code source.
Sélectionnez l’icône + pour mettre en scène toutes les modifications. Ces modifications doivent inclure uniquement de nouveaux fichiers package-lock.json pour les dossiers et api les app dossiers de ce didacticiel.

13. Déployer une application web statique sur Azure

L’application Azure Functions utilise une fonctionnalité en préversion, elle doit être déployée dans usa Ouest 2 pour fonctionner correctement.

Dans Visual Studio Code, sélectionnez l’Explorateur Azure.
Dans l’Explorateur Azure, cliquez avec le bouton droit sur le nom de l’abonnement, puis sélectionnez Create Resource....
Sélectionnez Créer une application web statique dans la liste.

Suivez les invites à l’aide du tableau suivant pour comprendre comment créer votre ressource Static Web App.

Propriété	Valeur
Entrez un nom global unique pour la nouvelle application web.	Entrez une valeur unique telle que `fileuploadstor`, pour votre nom de ressource Stockage. Ce nom unique est le nom de votre ressource utilisé dans la section suivante. Utilisez seulement des caractères et des chiffres, avec une longueur maximale de 24. Vous utiliserez ce nom de compte ultérieurement.
Sélectionnez un emplacement pour les nouvelles ressources.	Utilisez l’emplacement recommandé.

Suivez les invites pour fournir les informations suivantes :

Prompt	Entrez
Sélectionnez un groupe de ressources pour les nouvelles ressources.	Utilisez le groupe de ressources que vous avez créé pour votre ressource de stockage.
Entrez le nom de la nouvelle application web statique.	Acceptez le nom par défaut.
Sélectionner une référence SKU	Sélectionnez la référence SKU gratuite pour ce tutoriel. Si vous disposez déjà d’une ressource Static Web App gratuite dans votre abonnement, sélectionnez le niveau tarifaire suivant.
Choisissez la présélection de build pour configurer la structure de projet par défaut.	Sélectionnez Personnalisé.
Sélectionnez l’emplacement de votre code d’application	`azure-upload-file-to-storage/app`
Sélectionner l’emplacement de votre code Azure Functions	`azure-upload-file-to-storage/api`
Entrez le chemin d’accès de votre sortie de build...	`dist` C’est le chemin allant de votre application aux fichiers (générés) statiques.
Sélectionnez un emplacement pour les nouvelles ressources.	Sélectionnez une région proche de chez vous.

Une fois le processus terminé, une fenêtre contextuelle de notification s’affiche. Sélectionnez Afficher/modifier le workflow.
Votre fourche distante a un nouveau fichier de flux de travail pour le déploiement sur Static Web Apps. Extrayez ce fichier dans votre environnement avec la commande suivante dans le terminal :
```
git pull origin main
```
Ouvrez le fichier de flux de travail situé à l’adresse /.github/workflows/.

Vérifiez que la section du flux de travail spécifique à l’application web statique de ce didacticiel doit ressembler à ceci :

###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/azure-upload-file-to-storage/app" # App source code path
api_location: "/azure-upload-file-to-storage/api" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######

Accédez à votre fourche GitHub de l’exemple, https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions pour vérifier l’action de génération et de déploiement, nommée Azure Static Web Apps CI/CD, terminée avec succès. L’exécution de cette opération nécessite quelques minutes.
Accédez à votre Portail Azure pour votre application et affichez la section API de Paramètres. Le nom de la ressource back-end dans l’environnement (managed) de production indique que vos API ont été correctement déployées.
Sélectionnez (géré) pour afficher la liste des API chargées dans l’application :
- list
- Sas
- statut
Accédez à la page Vue d’ensemble pour rechercher l’URL de votre application déployée.
Le déploiement de l’application est terminé.

14. Configurer l’API avec Stockage nom et clé de ressource

L’application a besoin du nom et de la clé de la ressource Stockage Azure avant que l’API fonctionne correctement.

Toujours dans l’Explorateur Azure, cliquez avec le bouton droit sur la ressource Static Web App, puis sélectionnez Ouvrir dans le portail.
Sélectionnez Configuration dans la section Paramètres.

Ajoutez des paramètres d’application à l’aide du tableau suivant.

Propriété	Valeur	Description
Azure_Stockage_AccountName	Stockage Azure nom du compte, par exemple : `fileuploadstor`.	Utilisé dans le code source pour se connecter à Stockage ressource.
Azure_Stockage_AccountKey	Clé du compte de Stockage Azure	Utilisé dans le code source pour se connecter à Stockage ressource.

Sélectionnez Enregistrer dans la page Configuration pour enregistrer les deux paramètres.

Remarque

Vous n’avez pas besoin de définir la variable env de l’application cliente VITE_API_SERVER , car l’application cliente et l’API sont hébergées à partir du même domaine.

15. Utiliser l’application web statique déployée par Azure

Vérifiez que le déploiement et la configuration ont réussi à l’aide du site web.

Dans Visual Studio Code, cliquez avec le bouton droit sur votre application web statique dans l’Explorateur Azure, puis sélectionnez Parcourir le site.
Dans la nouvelle fenêtre de navigateur web, sélectionnez Choisir un fichier, puis sélectionnez un fichier image (*.png ou *.jpg) à charger.
Sélectionnez Obtenir le jeton sas. Cette action transmet le nom de fichier à l’API et reçoit l’URL du jeton SAP nécessaire pour charger le fichier.
Sélectionnez Charger le fichier pour utiliser l’URL du jeton SAP pour charger le fichier. Le navigateur affiche la miniature et l’URL du fichier chargé.

16. Nettoyer les ressources

Dans Visual Studio Code, utilisez l’Explorateur Azure pour les groupes de ressources, cliquez avec le bouton droit sur votre groupe de ressources, puis sélectionnez Supprimer.

Ceci supprime toutes les ressources du groupe, y compris vos ressources Stockage et Application web statique.

Résolution des problèmes

Signalez les problèmes liés à cet exemple dans le dépôt GitHub indiqué ci-dessous. Incluez ce qui suit avec le problème :

URL de l’article
Étape ou contexte dans l’article problématique
Votre environnement de développement

Exemple de code

Dépôt GitHub : azure-upload-file-to-storage

Si vous souhaitez continuer avec cette application, découvrez comment déployer l’application sur Azure pour l’hébergement avec l’une des options suivantes :

Documentation de Stockage Blob Azure
@azure/storage-blob
- Package npm
Application web statique Azure

Charger une image dans un objet blob Stockage Azure avec JavaScript

Prérequis

Architecture de l'application

Environnements locaux et de build

1. Exemple de référentiel d’applications fork avec GitHub

2. Configurer l’environnement de développement

3. Installer des dépendances

4. Créer une ressource de stockage avec l’extension Visual Studio

5. Configurer Stockage CORS

6. Accorder un accès anonyme au stockage

7. Créer un conteneur de chargement

8. Accordez-vous l’accès aux données Blob

9. Obtenir Stockage informations d’identification de ressource

10. Exécuter l’application API

11. Configurer et exécuter l’application cliente

12. Valider les modifications du code

13. Déployer une application web statique sur Azure

14. Configurer l’API avec Stockage nom et clé de ressource

15. Utiliser l’application web statique déployée par Azure

16. Nettoyer les ressources

Résolution des problèmes

Exemple de code

Commentaires

Commentaires

Ressources supplémentaires

Charger une image dans un objet blob Stockage Azure avec JavaScript

Prérequis

Architecture de l'application

Environnements locaux et de build

1. Exemple de référentiel d’applications fork avec GitHub

2. Configurer l’environnement de développement

3. Installer des dépendances

4. Créer une ressource de stockage avec l’extension Visual Studio

5. Configurer Stockage CORS

6. Accorder un accès anonyme au stockage

7. Créer un conteneur de chargement

8. Accordez-vous l’accès aux données Blob

9. Obtenir Stockage informations d’identification de ressource

10. Exécuter l’application API

11. Configurer et exécuter l’application cliente

12. Valider les modifications du code

13. Déployer une application web statique sur Azure

14. Configurer l’API avec Stockage nom et clé de ressource

15. Utiliser l’application web statique déployée par Azure

16. Nettoyer les ressources

Résolution des problèmes

Exemple de code

Contenu connexe

Commentaires

Commentaires

Ressources supplémentaires