Tutoriel : Charger une image dans un objet blob de stockage Azure avec JavaScript

2025-06-22

Dans ce tutoriel, vous allez utiliser une application web statique pour charger des fichiers directement dans un objet blob de stockage Azure à l’aide du @azure/storage-blob package. L’API génère un jeton SAS suivant le modèle Valet Key, qui vous permet de déléguer en toute sécurité un accès limité sans exposer les informations d’identification complètes.

Avertissement

Ce tutoriel vous montre comment héberger votre application de fonction dans un plan de consommation. Lorsque vous envisagez de sécuriser vos connexions à l’aide de Microsoft Entra ID avec des identités managées, vous devez plutôt envisager d’héberger votre application dans le plan Flex Consumption. Le niveau Flex Consumption optimise la sécurité en prenant en charge l’utilisation d’identités managées et l’intégration de réseaux virtuels.

Conditions préalables

Un abonnement Azure ; si vous n’avez pas encore d’abonnement Azure, vous pouvez vous inscrire pour obtenir un compte Azure gratuit.
Compte GitHub à dupliquer et à envoyer à un dépôt.

Architecture de l'application

Cette architecture d’application inclut deux ressources Azure :

Azure Static Web Apps héberge à la fois le client statique et l’API Azure Functions liée, le service gérant automatiquement la ressource API.
Stockage Azure pour le stockage d’objets blob.

Diagramme montrant comment un client interagit à partir de son ordinateur pour utiliser le site web afin de charger directement un fichier sur Stockage Azure.

Étape	Descriptif
1	Le client se connecte au site web généré de manière statique. Le site web est hébergé dans Azure Static Web Apps.
2	Le client utilise ce site Web pour sélectionner un fichier à télécharger. Pour ce tutoriel, le framework front-end est Vite React et le fichier téléchargé est un fichier image.
3	Le site web appelle l’API `sas`Azure Functions pour obtenir un jeton SAS basé sur le nom de fichier exact du fichier à charger. L’API serverless utilise le SDK Azure Blob Storage pour créer le jeton SAS. L’API renvoie l’URL complète à utiliser pour charger le fichier, qui inclut le jeton SAS 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 SAS pour charger le fichier directement dans Stockage Blob Azure.

Environnements locaux et de construction

Ce tutoriel utilise les environnements suivants :

Développement local avec GitHub Codespaces ou Visual Studio Code.
Créez et déployez avec GitHub Actions.

Duplication d’un exemple de référentiel d’application avec GitHub

Ce tutoriel utilise GitHub actions 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 de votre propre compte de l’exemple de référentiel : Azure-Samples/azure-typescript-e2e-apps.
Terminez les étapes de duplication de l’échantillon avec la branche principale uniquement.

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 base de GitHub Codespaces.

Dans un navigateur web, sur votre duplication GitHub de l’exemple de dépôt, démarrez le processus de création d’un codespace GitHub sur la main branche de votre duplication en sélectionnant le bouton CODE .
Sous l’onglet Codespaces , sélectionnez les points de suspension, ....
Sélectionnez + Nouveau avec des options pour sélectionner un conteneur de développement Codespaces spécifique.
Sélectionnez les options suivantes, puis sélectionnez Créer un codespace.
- Branche: main
- Configuration du conteneur de développement : Tutorial: Upload file to storage with SAS Token
- Région : accepter par défaut
- Type de machine : accepter 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 / Astuce

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

Outils principaux Azure Functions ≥ 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
Outils principaux Azure Functions	≥ 4,5098

L’extension Dev Containers pour Visual Studio Code nécessite l’installation de Docker sur votre machine locale. 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 / Astuce

Vous pouvez utiliser le menu principal pour accéder à l’option de menu Terminal, puis sélectionner l’option Nouveau terminal.

Capture d’écran de l’option de menu permettant d’ouvrir un nouveau terminal.
Clonez votre duplication dans le répertoire actuel. Remplacez <YOUR-ACCOUNT> dans 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 / Astuce

Visual Studio Code peut vous inviter automatiquement à rouvrir le dossier existant dans un conteneur de développement. Cette fonctionnalité équivaut à l’utilisation de 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

Outils principaux Azure Functions ≥ 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
Outils principaux Azure Functions	≥ 4,5098

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
```
Divisez le terminal de sorte 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
```

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

Créez la ressource de stockage Azure à 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.
Faites un clic droit sur l’abonnement puis sélectionnez Create Resource....
Sélectionnez Créer un compte de stockage dans la liste.

Suivez les invites à l’aide du 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 le nom de votre ressource de stockage. Ce nom unique est le nom de votre ressource utilisé dans la section suivante. Utilisez un maximum de 24 caractères alphanumériques. Vous avez besoin de ce nom de compte pour l’utiliser ultérieurement.
Sélectionnez un emplacement pour les nouvelles ressources.	Utilisez l’emplacement recommandé.

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

Configurer CORS de stockage

Étant donné que le navigateur est utilisé pour charger le fichier, le compte de stockage Azure doit configurer CORS pour autoriser les demandes d’origines croisées. Ces paramètres CORS sont utilisés pour ce tutoriel afin de simplifier les étapes et ne sont pas destinés à indiquer les meilleures pratiques ou la sécurité. En savoir plus sur CORS pour le stockage Azure.

Accédez à l’extension Stockage Azure. Cliquez avec le bouton droit de la souris sur votre ressource de stockage et sélectionnez Ouvrir dans le portail.
Dans la section Paramètres du compte de stockage du portail Azure, sélectionnez Partage des ressources (CORS).
Utilisez les propriétés suivantes pour définir CORS pour ce tutoriel.
- Origines autorisées : *
- Méthodes autorisées : Toutes sauf patch
- En-têtes autorisés : *
- Embases exposées : *
- Âge maximal = 86400
Cliquez sur Enregistrer.

Accorder un accès anonyme au stockage

Après le téléchargement du fichier, le scénario du didacticiel nécessite un accès public à l’objet blob pour l’affichage. Par souci de simplicité, ce guide permet un accès anonyme aux fichiers téléchargés.

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é.
Sur la page Configuration , activez Autoriser l’accès anonyme à l’objet Blob.

Créer un conteneur de téléchargement

Créez un conteneur privé contenant des objets blob lisibles publiquement.

Toujours dans le compte de stockage du 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
Cliquez sur Créer.

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

Une fois que vous avez créé la ressource, vous n’êtes pas autorisé à afficher le contenu du conteneur. Cette autorisation est réservée à des rôles IAM spécifiques. Ajoutez votre compte afin de pouvoir afficher les objets blob dans les conteneurs.

Dans le compte de stockage du portail Azure, sélectionnez Contrôle d’accès (IAM).
Sélectionnez Ajouter des attributions de rôles.
Recherchez et sélectionnez Contributeur de données d’objet blob de stockage. Cliquez sur Suivant.
Sélectionnez + Sélectionnez des membres.
Recherchez et sélectionnez votre compte.
Sélectionnez Vérifier + attribuer.
Sélectionnez Conteneurs , puis le conteneur de chargement . Vous devez voir qu’il n’y a pas d’erreurs d’autorisation dans le conteneur sans erreur.

Obtenir les informations d’identification des ressources de stockage

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

Toujours dans le portail Azure, dans la section Sécurité + mise en réseau , sélectionnez Clés d’accès.
Copiez la Key clé.
Dans Visual Studio Code, dans le ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apidossier, renommez le fichier de local.settings.json.sample à local.settings.json. Le fichier est ignoré par Git et n’est donc pas archivé dans le contrôle de code source.

Mettez à jour les paramètres d’utilisation local.settings.json du tableau suivant.

Propriété	Valeur	Descriptif
Azure_Storage_AccountName	Nom du compte de stockage Azure, par exemple : `fileuploadstor`.	Utilisé dans le code source pour se connecter à la ressource de stockage.
Azure_Storage_AccountKey	Clé du compte de Stockage Azure	Utilisé dans le code source pour se connecter à la ressource de stockage.
AzureWebJobsStorage	Chaîne de connexion au compte de stockage Azure	Utilisation par le runtime Azure Functions pour stocker l’état et les journaux.

Il peut sembler que vous avez entré deux fois les mêmes informations d’identification de compte, 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. D’une manière générale, les applications Azure Functions doivent disposer d’une ressource de stockage distincte qui n’est pas réutilisée à d’autres fins. Lorsque vous créez la ressource Azure Function plus loin dans le tutoriel, vous n’avez pas besoin de définir la valeur AzureWebJobsStorage pour la ressource cloud. Vous devrez définir les valeurs Azure_Storage_AccountName et Azure_Storage_AccountKey qui sont utilisées dans le code source.

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 7071 de l’application Azure Functions est désormais disponible. Vous devez également voir les API répertoriées dans le terminal de 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, puis cliquez avec le bouton droit sur le port 7071 et sélectionnez Visibilité des ports , puis Public.

Si vous n’exposez pas cette application en tant que publique, vous obtiendrez une erreur lorsque vous utiliserez l’API à partir de l’application cliente.
Pour vérifier que l’API fonctionne et se connecte au stockage, dans l’onglet Ports du volet inférieur, sélectionnez l’icône de globe dans la zone Adresse locale du port 7071. Cela ouvre un navigateur Web vers l’application de fonctions.
Ajoutez l’itinéraire API à la barre d’adresse URL : /api/sas?container=upload&file=test.png. Ce n’est pas grave que le fichier ne soit pas encore dans le conteneur. L’API crée le jeton SAS en fonction de l’endroit où vous souhaitez qu’il soit télé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’adresse du navigateur (et non l’URL du jeton SAS dans l’objet JSON) à utiliser à l’étape suivante. L’URL de base est tout ce qui précède /api/sas. Vous allez coller cette URL de base dans le fichier de variable d’environnement de l’application cliente dans la section suivante.

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 en tant que valeur pour le VITE_API_SERVER.

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

Attendez que le terminal renvoie l’avis suivant indiquant 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 de la souris sur le port 5173 et sélectionnez l’icône en forme de globe.
Vous devriez voir l’application Web.
Interagissez avec l’application Web :
- Sélectionnez un fichier image (*.jpg ou *.png) sur votre ordinateur local à télécharger.
- Sélectionnez le bouton Obtenir une signature d’accès client pour demander un jeton SAS à partir de l’application API. La réponse indique l’URL complète à utiliser pour télécharger le fichier dans le stockage.
- Sélectionnez le bouton Télécharger pour envoyer le fichier image directement au stockage.
L’application cliente et l’application API ont fonctionné ensemble dans un environnement de développement conteneurisé.

Valider les modifications du code

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

Déployer une application web statique sur Azure

L’application Azure Functions utilise une fonctionnalité en préversion. Il doit être déployé dans l’ouest de l’US 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 d’application Web statique.

Propriété	Valeur
Entrez un nom global unique pour la nouvelle application web.	Entrez une valeur unique telle que `fileuploadstor`, pour le nom de votre ressource de stockage. Ce nom unique est le nom de votre ressource utilisé dans la section suivante. N’utilisez que des caractères et des chiffres, d’une longueur maximale de 24 caractères. Vous avez besoin de ce nom de compte pour l’utiliser 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électionnez un 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 le préréglage 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électionnez 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` value est le chemin d’accès de votre application à vos fichiers statiques (générés).
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 flux de travail.
Votre duplication distante dispose d’un nouveau fichier de flux de travail pour le déploiement sur Static Web Apps. Extrayez ce fichier vers votre environnement à l’aide de 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 tutoriel doit ressembler à :

###### 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 duplication GitHub de l’exemple https://github.com/<YOUR-ACCOUNT>/azure-typescript-e2e-apps/actions pour vérifier que l’action de génération et de déploiement, nommée Azure Static Web Apps CI/CD, s’est terminée avec succès. Cette action peut prendre quelques minutes.
Accédez au portail Azure de votre application et affichez la section API de Paramètres. Le nom de la ressource backend dans l’environnement (managed) de production indique que vos API sont déployées avec succès.
Sélectionnez (géré) pour afficher la liste des API chargées dans l’application :
- liste
- Sas
- statut
Accédez à la page Vue d’ensemble pour trouver l’URL de votre application déployée.
Le déploiement de l’application est terminé.

Configurer l’API avec le nom et la clé de la ressource de stockage

L’application a besoin du nom et de la clé de la ressource de stockage Azure pour que l’API fonctionne correctement. Lorsqu’elles sont déployées sur Azure Static Web Apps, l’application cliente et l’API sont hébergées à partir du même domaine, ce qui élimine le besoin de définir la variable d’environnement de l’application cliente VITE_API_SERVER.

Toujours dans l’Explorateur Azure, cliquez avec le bouton droit sur la ressource Application web statique et sélectionnez Ouvrir dans le portail.
Sélectionnez Configuration dans la section Paramètres .

Ajoutez les paramètres de l’application à l’aide du tableau suivant.

Propriété	Valeur	Descriptif
Azure_Storage_AccountName	Nom du compte de stockage Azure, par exemple : `fileuploadstor`.	Utilisé dans le code source pour se connecter à la ressource de stockage.
Azure_Storage_AccountKey	Clé du compte de Stockage Azure	Utilisé dans le code source pour se connecter à la ressource de stockage.

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

Utiliser l’application web statique déployée sur 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 à partir de l’explorateur Azure, puis sélectionnez Parcourir le site.
Dans la nouvelle fenêtre du navigateur Web, sélectionnez Choisir un fichier , puis sélectionnez un fichier image (*.png ou *.jpg) à télécharger.
Sélectionnez Obtenir le jeton sas. Cette action transmet le nom du fichier à l’API et reçoit l’URL du jeton SAS nécessaire au téléchargement du fichier.
Sélectionnez Charger le fichier pour utiliser l’URL du jeton SAS pour télécharger le fichier. Le navigateur affiche la vignette et l’URL du fichier téléchargé.

Nettoyer les ressources

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

Cette action supprime toutes les ressources du groupe, y compris les ressources de stockage et d’application Web statique.

Résolution des problèmes

Signalez les problèmes liés à cet exemple dans le référentiel GitHub. Incluez les éléments suivants avec le problème :

URL de l’article
L’étape ou le contexte de l’article qui posait problème
Votre environnement de développement

Exemple de code

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

Documentation sur le stockage Blob Azure
@azure/storage-blob
- Package npm
Application web statique Azure

Partager via