Caricare un'immagine in un BLOB Archiviazione di Azure con JavaScript

Articolo
12/06/2023

Usare un'app Web statica per caricare un file in un BLOB di Archiviazione di Azure usando un pacchetto npm Archiviazione di Azure @azure/storage-blob con un token di firma di accesso condiviso Archiviazione di Azure.

Prerequisiti

Sottoscrizione di Azure. Se non se ne ha già una, è possibile iscriversi per ottenere un account Azure gratuito.
Account GitHub per creare una copia tramite fork ed eseguire il push in un repository.

Architettura dell'applicazione

Questa architettura dell'applicazione include due risorse di Azure:

App Web statiche di Azure per l'applicazione client generata in modo statico. La risorsa fornisce anche l'API Funzioni di Azure gestita. Gestito significa che la risorsa App Web statiche gestisce la risorsa API per il proprio uso.
Archiviazione di Azure per l'archiviazione BLOB.

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

Procedi	Description
1	Il cliente si connette al sito Web generato in modo statico. Il sito Web è ospitato in App Web statiche di Azure.
2	Il cliente usa tale sito Web per selezionare un file da caricare. Per questa esercitazione, il framework front-end è Vite React e il file caricato è un file di immagine.
3	Il sito Web chiama l'API `sas` Funzioni di Azure per ottenere un token di firma di accesso condiviso in base al nome file esatto del file da caricare. L'API serverless usa Archiviazione BLOB di Azure SDK per creare il token di firma di accesso condiviso. L'API restituisce l'URL completo da usare per caricare il file, che include il token di firma di accesso condiviso come stringa di query. `https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN`
4	Il sito Web front-end usa l'URL del token di firma di accesso condiviso per caricare il file direttamente in Archiviazione BLOB di Azure.

Ambienti locali e di compilazione

Questa esercitazione usa gli ambienti seguenti:

Sviluppo locale con GitHub Codespaces o Visual Studio Code.
Compilare e distribuire con GitHub Actions.

1. Repository di applicazioni di esempio fork con GitHub

Questa esercitazione usa GitHub actions per distribuire l'applicazione di esempio in Azure. Per completare la distribuzione sono necessari un account GitHub e un fork del repository di applicazioni di esempio.

In un Web browser usare il collegamento seguente per iniziare il fork per il proprio account del repository di esempio: Azure-Samples/azure-typescript-e2e-apps.
Completare i passaggi per creare una copia tramite fork dell'esempio solo con il ramo principale .

2. Configurare l'ambiente di sviluppo

È disponibile un ambiente contenitore di sviluppo con tutte le dipendenze necessarie per completare ogni esercizio in questo progetto. È possibile eseguire il contenitore di sviluppo in GitHub Codespaces o in locale usando Visual Studio Code.

GitHub Codespaces
Visual Studio Code

GitHub Codespaces esegue un contenitore di sviluppo gestito da GitHub con Visual Studio Code per il Web come interfaccia utente. Per l'ambiente di sviluppo più semplice, usare GitHub Codespaces per disporre degli strumenti di sviluppo e delle dipendenze preinstallati corretti per completare questo modulo di formazione.

Importante

Tutti gli account GitHub possono usare Codespaces per un massimo di 60 ore gratuite ogni mese con 2 istanze di core. Per altre informazioni, vedere Spazio di archiviazione e ore core mensili inclusi in GitHub Codespaces.

In un Web browser, nel fork GitHub del repository di esempio, avviare il processo per creare un nuovo Spazio di codice GitHub nel main ramo del fork selezionando il pulsante CODE .
Nella scheda Codespaces (Spazi di codice) selezionare i puntini di sospensione. ...
Selezionare + Nuovo con opzioni per selezionare un contenitore di sviluppo Codespaces specifico.
Selezionare le opzioni seguenti, quindi selezionare Crea spazio di codice.
- Ramo: main
- Configurazione del contenitore di sviluppo: Tutorial: Upload file to storage with SAS Token
- Area: accettare l'impostazione predefinita
- Tipo di computer: accettare il valore predefinito
Attendere l'avvio del codespace. Questo processo di avvio può richiedere alcuni minuti.
Aprire un nuovo terminale nel codespace.

Suggerimento

È possibile usare il menu principale per passare all'opzione di menu Terminale e quindi selezionare l'opzione Nuovo terminale.
Controllare le versioni degli strumenti usati in questa esercitazione.
```
node --version
npm --version
func --version
```
Questa esercitazione richiede le versioni seguenti di ogni strumento, preinstallate nell'ambiente:

Tool Versione

Node.js ≥ 18

npm ≥ 9.5

Funzioni di Azure strumenti di base ≥ 4.5098
Chiudere il terminale.
I passaggi rimanenti di questa esercitazione si svolgono nel contesto di questo contenitore di sviluppo.

Tool	Versione
Node.js	≥ 18
npm	≥ 9.5
Funzioni di Azure strumenti di base	≥ 4.5098

L'estensione Dev Containers per Visual Studio Code richiede l'installazione di Docker nel computer locale. L'estensione ospita il contenitore di sviluppo in locale usando l'host Docker con gli strumenti di sviluppo e le dipendenze preinstallati corretti per completare questo modulo di formazione.

Aprire Visual Studio Code nel contesto di una directory vuota.
Assicurarsi che l'estensione Dev Containers sia installata in Visual Studio Code.
Aprire un nuovo terminale nell'editor.

Suggerimento

È possibile usare il menu principale per passare all'opzione di menu Terminale e quindi selezionare l'opzione Nuovo terminale.
Clonare il fork nella directory corrente. Sostituire YOUR-ACCOUNT nel comando seguente con il nome dell'account.
```
git clone https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps
```
Aprire il riquadro comandi, cercare i comandi Dev Containers e quindi selezionare Dev Containers: Reopen in Container (Dev Containers: Riapri nel contenitore).

Suggerimento

Visual Studio Code potrebbe richiedere automaticamente di riaprire la cartella esistente all'interno di un contenitore di sviluppo. Questa funzionalità equivale a usare il riquadro comandi per riaprire l'area di lavoro corrente in un contenitore.
Controllare le versioni degli strumenti usati in questa esercitazione.
```
node --version
npm --version
func --version
```
Questa esercitazione richiede le versioni seguenti di ogni strumento, preinstallate nell'ambiente:

Tool Versione

Node.js ≥ 18

npm ≥ 9.5

Funzioni di Azure strumenti di base ≥ 4.5098
Chiudere il terminale.
I passaggi rimanenti di questa esercitazione si svolgono nel contesto di questo contenitore di sviluppo.

Tool	Versione
Node.js	≥ 18
npm	≥ 9.5
Funzioni di Azure strumenti di base	≥ 4.5098

3. Installare le dipendenze

L'app di esempio per questa esercitazione si trova nella azure-upload-file-to-storage cartella . Non è necessario usare altre cartelle nel progetto.

In Visual Studio Code aprire un terminale e passare alla cartella del progetto.
```
cd azure-upload-file-to-storage
```
Dividere il terminale in modo da avere due terminali, uno per l'app client e uno per l'app per le API.
In uno dei terminali eseguire il comando seguente per installare le dipendenze dell'app per le API ed eseguire l'app.
```
cd api && npm install
```
Nell'altro terminale eseguire il comando per installare l'app client.
```
cd app && npm install
```

4. Creare Archiviazione risorsa con l'estensione di Visual Studio

Creare la risorsa Archiviazione da usare con l'app di esempio. Lo spazio di archiviazione viene usato per:

Trigger nell'app Funzioni di Azure
Archiviazione BLOB (file)

Passare all'estensione Archiviazione di Azure.
Accedere ad Azure, se necessario.
Fare clic con il pulsante destro del mouse sulla sottoscrizione e quindi scegliere Create Resource....
Selezionare Crea account Archiviazione dall'elenco.

Seguire le istruzioni riportate nella tabella seguente per informazioni su come creare la risorsa di archiviazione.

Proprietà	valore
Immettere un nome univoco globale per la nuova app Web.	Immettere un valore univoco, `fileuploadstor`ad esempio , per il nome della risorsa Archiviazione. Questo nome univoco è il nome della risorsa usato nella sezione successiva. Usare solo un massimo di 24 caratteri e numeri. Questo nome dell'account sarà necessario più avanti.
Select a location for new resources.	Usare la posizione consigliata.

Al termine del processo di creazione dell'app, viene visualizzata una notifica con le informazioni sulla nuova risorsa.

5. Configurare Archiviazione CORS

Poiché il browser viene usato per caricare il file, l'account Archiviazione di Azure deve configurare CORS per consentire le richieste tra le origini.

Passare all'estensione Archiviazione di Azure. Fare clic con il pulsante destro del mouse sulla risorsa di archiviazione e scegliere Apri nel portale.
Nella sezione Impostazioni portale di Azure account di archiviazione selezionare Condivisione risorse (CORS).
Usare le proprietà seguenti per impostare CORS per questa esercitazione.
- Origini consentite: *
- Metodi consentiti: tutti tranne patch
- Intestazioni consentite: *
- Intestazioni esposte: *
- Età massima: 86400
Queste impostazioni vengono usate per questa esercitazione per semplificare i passaggi e non devono indicare procedure consigliate o sicurezza. Altre informazioni su CORS per Archiviazione di Azure.
Seleziona Salva.

6. Concedere l'accesso anonimo all'archiviazione

Il caricamento del file viene protetto dal client quando si crea un token di firma di accesso condiviso limitato a tempo e con autorizzazioni limitate. Tuttavia, una volta caricato il file, in questo scenario di esercitazione si vuole che chiunque lo visualizzi. A tale scopo, è necessario modificare l'autorizzazione di archiviazione per essere accessibile pubblicamente.

Anche se l'account è accessibile pubblicamente, ogni contenitore e ogni BLOB può avere accesso privato. Un metodo più sicuro ma troppo complicato per questa esercitazione consiste nel caricare in un account di archiviazione con il token di firma di accesso condiviso, quindi spostare il BLOB in un altro account di archiviazione con accesso pubblico.

Per abilitare l'accesso pubblico nella portale di Azure, selezionare la pagina Panoramica per l'account di archiviazione, nella sezione Proprietà selezionare Accesso anonimo BLOB e quindi selezionare Disabilitato.
Nella pagina Configurazione abilitare Consenti l'accesso anonimo blob.

7. Creare un contenitore di caricamento

Mentre si trova ancora nell'account di archiviazione portale di Azure, nella sezione Archiviazione dati selezionare Contenitori.
Selezionare + Contenitore per creare il upload contenitore con le impostazioni seguenti:
- Nome: upload
- Livello di accesso pubblico: Blob
Seleziona Crea.

8. Concedere a se stessi l'accesso ai dati BLOB

Durante la creazione della risorsa, non si dispone dell'autorizzazione per visualizzare il contenuto del contenitore. Riservato a ruoli IAM specifici. Aggiungere l'account in modo da poter visualizzare i BLOB nei contenitori.

Sempre nell'account di archiviazione portale di Azure selezionare Controllo di accesso (IAM).
Selezionare Aggiungi assegnazioni di ruolo.
Cercare e selezionare Archiviazione Collaboratore dati BLOB. Seleziona Avanti.
Seleziona + Seleziona membri.
Cercare e selezionare l'account.
Seleziona Rivedi + assegna.
Selezionare Contenitori e quindi il contenitore di caricamento . Dovrebbe essere possibile vedere che nel contenitore non sono presenti BLOB senza errori di autorizzazione.

9. Ottenere le credenziali della risorsa Archiviazione

Le credenziali della risorsa Archiviazione vengono usate nell'app per le API Funzioni di Azure per connettersi alla risorsa Archiviazione.

Mentre si trova ancora nella portale di Azure, nella sezione Sicurezza e rete selezionare Chiavi di accesso.
Tenere presente che i file dell'API sono disponibili in ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api.
Nella cartella API rinominare il file da local.settings.json.sample a local.settings.json. Il file viene ignorato da Git in modo che non venga archiviato nel controllo del codice sorgente.

Aggiornare le impostazioni per local.settings.json l'uso della tabella seguente.

Proprietà	valore	Descrizione
Azure_Archiviazione_AccountName	Archiviazione di Azure nome dell'account, ad esempio: `fileuploadstor`.	Usato nel codice sorgente per connettersi alla risorsa Archiviazione.
Azure_Archiviazione_AccountKey	Archiviazione di Azure chiave dell'account	Usato nel codice sorgente per connettersi alla risorsa Archiviazione.
AzureWebJobsStorage	Archiviazione di Azure account stringa di connessione	Usare da Funzioni di Azure runtime per archiviare lo stato e i log.

Può sembrare che siano state immesse due volte le stesse credenziali dell'account, una volta come chiave e una volta come stringa di connessione. L'hai fatto, ma in particolare per questa semplice esercitazione. In generale, Funzioni di Azure le app devono avere una risorsa Archiviazione separata che non viene riutilizzata per un altro scopo. Quando si crea la risorsa funzione di Azure più avanti nell'esercitazione, non sarà necessario impostare il valore AzureWebJobs Archiviazione per la risorsa cloud. È sufficiente impostare i valori Azure_Archiviazione_AccountName e Azure_Archiviazione_AccountKey usati nel codice sorgente.

10. Eseguire l'app per le API

Eseguire l'app per le funzioni per assicurarsi che funzioni correttamente prima di distribuirla in Azure.

Nel terminale dell'app per le API eseguire il comando seguente per avviare l'app per le API.
```
npm run start
```
Attendere l'avvio dell'app Funzioni di Azure. Si noterà che la porta dell'app Funzioni di Azure, 7071 è ora disponibile. Verranno visualizzate anche le API elencate nel terminale per l'app per le 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
```
Selezionare la scheda Porte nel riquadro inferiore, quindi fare clic con il pulsante destro del mouse sulla porta 7071 e selezionare Visibilità porta e quindi selezionare Pubblico.

Se non si espone questa app come pubblica, si riceverà un errore quando si usa l'API dall'app client.
Per verificare che l'API funzioni e si connetta all'archiviazione, nella scheda Porte del riquadro inferiore selezionare l'icona del globo nell'area Indirizzo locale per la porta 7071. Verrà aperto un Web browser per l'app per le funzioni.
Aggiungere la route API alla barra degli indirizzi URL: /api/sas?container=upload&file=test.png. Non è ancora possibile che il file non sia ancora presente nel contenitore. L'API crea il token di firma di accesso condiviso in base alla posizione in cui si vuole caricarlo.

La risposta JSON dovrebbe essere simile alla seguente:

{
    "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..."
}

Copiare la base dell'URL dell'API nella barra degli indirizzi del browser (non l'URL del token di firma di accesso condiviso nell'oggetto JSON) da usare nel passaggio successivo. L'URL di base è tutto prima di /api/sas.

11. Configurare ed eseguire l'app client

Rinominare il file ./azure-upload-file-to-storage/app/.env.sample in .env.
Aprire il .env file e incollare l'URL di base della sezione precedente come valore per .VITE_API_SERVER

Un esempio per un ambiente Codespaces può avere un aspetto simile al seguente VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev
Nell'altro terminale diviso avviare l'app client con il comando seguente:
```
npm run dev
```

Attendere che il terminale restituisca il seguente avviso che l'app è disponibile sulla porta 5173.

  VITE v4.4.4  ready in 410 ms

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

Selezionare la scheda Porte nel riquadro inferiore, quindi fare clic con il pulsante destro del mouse sulla porta 5173 e selezionare l'icona del globo.
Verrà visualizzata la semplice app Web.
Interagire con l'app Web:
- Selezionare un file di immagine (*.jpg o *.png) dal computer locale da caricare.
- Selezionare il pulsante Ottieni una firma di accesso condiviso per richiedere un token di firma di accesso condiviso dall'app per le API. La risposta mostra l'URL completo da usare per caricare il file in Archiviazione.
- Selezionare il pulsante Carica per inviare il file di immagine direttamente a Archiviazione.
L'app client e l'app per le API hanno funzionato correttamente in un ambiente di sviluppo in contenitori.

12. Eseguire il commit delle modifiche al codice

In Visual Studio Code aprire la scheda Controllo del codice sorgente.
Selezionare l'icona + per preparare tutte le modifiche. Queste modifiche devono includere solo nuovi file package-lock.json per le app cartelle e api per questa esercitazione.

13. Distribuire un'app Web statica in Azure

L'app Funzioni di Azure usa una funzionalità di anteprima, deve essere distribuita negli Stati Uniti occidentali 2 per funzionare correttamente.

In Visual Studio Code selezionare Esplora risorse di Azure.
In Azure Explorer fare clic con il pulsante destro del mouse sul nome della sottoscrizione e quindi scegliere Create Resource....
Selezionare Crea app Web statica dall'elenco .

Seguire le istruzioni riportate nella tabella seguente per comprendere come creare la risorsa app Web statica.

Proprietà	valore
Immettere un nome univoco globale per la nuova app Web.	Immettere un valore univoco, `fileuploadstor`ad esempio , per il nome della risorsa Archiviazione. Questo nome univoco è il nome della risorsa usato nella sezione successiva. Usare solo un massimo di 24 caratteri e numeri. Questo nome dell'account sarà necessario più avanti.
Select a location for new resources.	Usare la posizione consigliata.

Seguire le istruzioni per fornire le informazioni seguenti:

Richiesta	INVIO
Selezionare un gruppo di risorse per le nuove risorse.	Usare il gruppo di risorse creato per la risorsa di archiviazione.
Immettere il nome per la nuova app Web statica.	Accettare il nome predefinito.
Selezionare uno SKU	Selezionare lo SKU gratuito per questa esercitazione. Se nella sottoscrizione è già disponibile una risorsa app Web statica gratuita, selezionare il piano tariffario successivo.
Scegliere il set di impostazioni di compilazione per configurare la struttura predefinita del progetto.	Seleziona Personalizza.
Selezionare il percorso del codice dell'applicazione	`azure-upload-file-to-storage/app`
Selezionare il percorso del codice Funzioni di Azure	`azure-upload-file-to-storage/api`
Immettere il percorso dell'output di compilazione...	`dist` Questo è il percorso dall'app ai file statici (generati).
Selezionare un percorso per le nuove risorse.	Selezionare un'area nelle vicinanze.

Al termine del processo, viene visualizzata una notifica popup. Selezionare Visualizza/Modifica flusso di lavoro.
Il fork remoto include un nuovo file del flusso di lavoro per la distribuzione in App Web statiche. Eseguire il pull del file nell'ambiente con il comando seguente nel terminale:
```
git pull origin main
```
Aprire il file del flusso di lavoro che si trova in /.github/workflows/.

Verificare che la sezione relativa al flusso di lavoro specifico per l'app Web statica dell'esercitazione sia simile alla seguente:

###### 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 ######

Passare al fork GitHub dell'esempio per https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions verificare l'azione di compilazione e distribuzione, denominata Azure Static Web Apps CI/CD, completata correttamente. Questa operazione richiederà qualche minuto.
Passare alla portale di Azure per l'app e visualizzare la sezione API di Impostazioni. Il nome della risorsa back-end nell'ambiente di produzione indica (managed) che le API sono state distribuite correttamente.
Selezionare (gestito) per visualizzare l'elenco delle API caricate nell'app:
- list
- Sas
- stato
Passare alla pagina Panoramica per trovare l'URL per l'app distribuita.
La distribuzione dell'app è stata completata.

14. Configurare l'API con Archiviazione nome e chiave della risorsa

L'app richiede il nome e la chiave della risorsa Archiviazione di Azure prima che l'API funzioni correttamente.

Sempre in Azure Explorer fare clic con il pulsante destro del mouse sulla risorsa App Web statica e scegliere Apri nel portale.
Selezionare Configurazione nella sezione Impostazioni.

Aggiungere le impostazioni dell'applicazione usando la tabella seguente.

Proprietà	valore	Descrizione
Azure_Archiviazione_AccountName	Archiviazione di Azure nome dell'account, ad esempio: `fileuploadstor`.	Usato nel codice sorgente per connettersi alla risorsa Archiviazione.
Azure_Archiviazione_AccountKey	Archiviazione di Azure chiave dell'account	Usato nel codice sorgente per connettersi alla risorsa Archiviazione.

Selezionare Salva nella pagina Configurazione per salvare entrambe le impostazioni.

Nota

Non è necessario impostare la variabile env dell'app client VITE_API_edizione Standard RVER perché l'app client e l'API sono ospitate dallo stesso dominio.

15. Usare l'app Web statica distribuita in Azure

Verificare che la distribuzione e la configurazione siano riuscite usando il sito Web.

In Visual Studio Code fare clic con il pulsante destro del mouse sull'app Web statica da Azure Explorer e scegliere Sfoglia sito.
Nella nuova finestra del Web browser selezionare Scegli file e quindi selezionare un file di immagine (*.png o *.jpg) da caricare.
Selezionare Recupera token di firma di accesso condiviso. Questa azione passa il nome file all'API e riceve l'URL del token di firma di accesso condiviso necessario per caricare il file.
Selezionare Carica file per usare l'URL del token di firma di accesso condiviso per caricare il file. Il browser visualizza l'anteprima e l'URL del file caricato.

16. Pulire le risorse

In Visual Studio Code usare Azure Explorer per Gruppi di risorse, fare clic con il pulsante destro del mouse sul gruppo di risorse e quindi scegliere Elimina.

In questo modo vengono eliminate tutte le risorse nel gruppo, incluse le risorse Archiviazione e app Web statiche.

Risoluzione dei problemi

Segnalare i problemi relativi a questo esempio nel repository GitHub annotato di seguito. Includere quanto segue con il problema:

URL dell'articolo
Il passaggio o il contesto all'interno dell'articolo che è stato problematico
Ambiente di sviluppo

Codice di esempio

Repository GitHub: azure-upload-file-to-storage

Per continuare con questa app, si apprenderà come distribuire l'app in Azure per l'hosting con una delle opzioni seguenti:

Archiviazione BLOB di Azure documentazione
@azure/storage-blob
- Pacchetto npm
App Web statica di Azure

Condividi tramite

Caricare un'immagine in un BLOB Archiviazione di Azure con JavaScript

Prerequisiti

Architettura dell'applicazione

Ambienti locali e di compilazione

1. Repository di applicazioni di esempio fork con GitHub

2. Configurare l'ambiente di sviluppo

3. Installare le dipendenze

4. Creare Archiviazione risorsa con l'estensione di Visual Studio

5. Configurare Archiviazione CORS

6. Concedere l'accesso anonimo all'archiviazione

7. Creare un contenitore di caricamento

8. Concedere a se stessi l'accesso ai dati BLOB

9. Ottenere le credenziali della risorsa Archiviazione

10. Eseguire l'app per le API

11. Configurare ed eseguire l'app client

12. Eseguire il commit delle modifiche al codice

13. Distribuire un'app Web statica in Azure

14. Configurare l'API con Archiviazione nome e chiave della risorsa

15. Usare l'app Web statica distribuita in Azure

16. Pulire le risorse

Risoluzione dei problemi

Codice di esempio

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Caricare un'immagine in un BLOB Archiviazione di Azure con JavaScript

Prerequisiti

Architettura dell'applicazione

Ambienti locali e di compilazione

1. Repository di applicazioni di esempio fork con GitHub

2. Configurare l'ambiente di sviluppo

3. Installare le dipendenze

4. Creare Archiviazione risorsa con l'estensione di Visual Studio

5. Configurare Archiviazione CORS

6. Concedere l'accesso anonimo all'archiviazione

7. Creare un contenitore di caricamento

8. Concedere a se stessi l'accesso ai dati BLOB

9. Ottenere le credenziali della risorsa Archiviazione

10. Eseguire l'app per le API

11. Configurare ed eseguire l'app client

12. Eseguire il commit delle modifiche al codice

13. Distribuire un'app Web statica in Azure

14. Configurare l'API con Archiviazione nome e chiave della risorsa

15. Usare l'app Web statica distribuita in Azure

16. Pulire le risorse

Risoluzione dei problemi

Codice di esempio

Contenuto correlato

Commenti e suggerimenti

Risorse aggiuntive