Ladda upp en avbildning till en Azure Storage-blob med JavaScript

Artikel
12/06/2023

Använd en statisk webbapp för att ladda upp en fil till en Azure Storage-blob med hjälp av ett Azure Storage @azure/storage-blob npm-paket med en Azure Storage SAS-token.

Förutsättningar

En Azure-prenumeration. Om du inte redan har en Azure-prenumeration kan du registrera dig för ett kostnadsfritt Azure-konto.
GitHub-konto för förgrening och push-överföring till en lagringsplats.

Programmets arkitektur

Den här programarkitekturen innehåller två Azure-resurser:

Azure Static Web Apps för det statiskt genererade klientprogrammet. Resursen tillhandahåller även det hanterade Azure Functions-API:et. Hanterad innebär att Static Web Apps-resursen hanterar API-resursen för eget bruk.
Azure Storage för bloblagringen.

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

Steg	Description
1	Kunden ansluter till den statiskt genererade webbplatsen. Webbplatsen finns i Azure Static Web Apps.
2	Kunden använder den webbplatsen för att välja en fil som ska laddas upp. I den här självstudien är klientdelsramverket Vite React och filen som laddas upp är en bildfil.
3	Webbplatsen anropar Azure Functions API `sas` för att hämta en SAS-token baserat på det exakta filnamnet för filen som ska laddas upp. Det serverlösa API:et använder Azure Blob Storage SDK för att skapa SAS-token. API:et returnerar den fullständiga URL:en som ska användas för att ladda upp filen, som innehåller SAS-token som frågesträng. `https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN`
4	Klientsidans webbplats använder URL:en för SAS-token för att ladda upp filen direkt till Azure Blob Storage.

Lokala miljöer och byggmiljöer

I den här självstudien används följande miljöer:

Lokal utveckling med GitHub Codespaces eller Visual Studio Code.
Skapa och distribuera med GitHub Actions.

1. Förgrena exempelprogramlagringsplats med GitHub

I den här självstudien används GitHub-åtgärder för att distribuera exempelprogrammet till Azure. Du behöver ett GitHub-konto och en förgrening av exempelprogrammets lagringsplats för att slutföra distributionen.

I en webbläsare använder du följande länk för att starta förgreningen för ditt eget konto för exempellagringsplatsen: Azure-Samples/azure-typescript-e2e-apps.
Slutför stegen för att endast förgrena exemplet med huvudgrenen.

2. Konfigurera utvecklingsmiljö

En utvecklingscontainermiljö är tillgänglig med alla beroenden som krävs för att slutföra varje övning i det här projektet. Du kan köra utvecklingscontainern i GitHub Codespaces eller lokalt med hjälp av Visual Studio Code.

GitHub Codespaces
Visual Studio Code

GitHub Codespaces kör en utvecklingscontainer som hanteras av GitHub med Visual Studio Code för webben som användargränssnitt. För den enklaste utvecklingsmiljön använder du GitHub Codespaces så att du har rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här utbildningsmodulen.

Viktigt!

Alla GitHub-konton kan använda Codespaces i upp till 60 timmar kostnadsfritt varje månad med 2 kärninstanser. Mer information finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

I en webbläsare, på din GitHub-förgrening av exempellagringsplatsen, startar du processen för att skapa ett nytt GitHub Codespace på grenen main av din förgrening genom att välja knappen KOD .
På fliken Codespaces väljer du ellipsen, ....
Välj + Ny med alternativ för att välja en specifik Codespaces dev-container.
Välj följande alternativ och välj sedan Skapa kodområde.
- Gren: main
- Konfiguration av dev-container: Tutorial: Upload file to storage with SAS Token
- Region: acceptera standard
- Datortyp: acceptera standard
Vänta tills kodområdet har startats. Den här startprocessen kan ta några minuter.
Öppna en ny terminal i kodområdet.

Dricks

Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal .
Kontrollera versionerna av de verktyg som du använder i den här självstudien.
```
node --version
npm --version
func --version
```
Den här självstudien kräver följande versioner av varje verktyg, som är förinstallerade i din miljö:

Verktyg Version

Node.js ≥ 18

npm ≥ 9,5

Azure Functions-kärnverktyg ≥ 4.5098
Stäng terminalen.
De återstående stegen i den här självstudien sker i samband med den här utvecklingscontainern.

Verktyg	Version
Node.js	≥ 18
npm	≥ 9,5
Azure Functions-kärnverktyg	≥ 4.5098

Dev Containers-tillägget för Visual Studio Code kräver att Docker installeras på den lokala datorn. Tillägget är värd för utvecklingscontainern lokalt med Docker-värden med rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här utbildningsmodulen.

Öppna Visual Studio Code i kontexten för en tom katalog.
Kontrollera att tillägget Dev Containers är installerat i Visual Studio Code.
Öppna en ny terminal i redigeraren.

Dricks

Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal .
Klona din förgrening till den aktuella katalogen. Ersätt YOUR-ACCOUNT i följande kommando med ditt kontonamn.
```
git clone https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps
```
Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Reopen in Container (Dev Containers: Reopen in Container).

Dricks

Visual Studio Code kan automatiskt uppmana dig att öppna den befintliga mappen i en utvecklingscontainer. Detta är funktionellt likvärdigt med att använda kommandopaletten för att öppna den aktuella arbetsytan igen i en container.
Kontrollera versionerna av de verktyg som du använder i den här självstudien.
```
node --version
npm --version
func --version
```
Den här självstudien kräver följande versioner av varje verktyg, som är förinstallerade i din miljö:

Verktyg Version

Node.js ≥ 18

npm ≥ 9,5

Azure Functions-kärnverktyg ≥ 4.5098
Stäng terminalen.
De återstående stegen i den här självstudien sker i samband med den här utvecklingscontainern.

Verktyg	Version
Node.js	≥ 18
npm	≥ 9,5
Azure Functions-kärnverktyg	≥ 4.5098

3. Installera beroenden

Exempelappen för den här självstudien azure-upload-file-to-storage finns i mappen . Du behöver inte använda några andra mappar i projektet.

Öppna en terminal i Visual Studio Code och flytta till projektmappen.
```
cd azure-upload-file-to-storage
```
Dela terminalen så att du har två terminaler, en för klientappen och en för API-appen.
I en av terminalerna kör du följande kommando för att installera API-appens beroenden och köra appen.
```
cd api && npm install
```
I den andra terminalen kör du kommandot för att installera klientappen.
```
cd app && npm install
```

4. Skapa lagringsresurs med Visual Studio-tillägget

Skapa lagringsresursen som ska användas med exempelappen. Lagringen används för:

Utlösare i Azure Functions-appen
Bloblagring (fil)

Gå till Azure Storage-tillägget.
Logga in på Azure om det behövs.
Högerklicka på prenumerationen och välj Create Resource...sedan .
Välj Skapa lagringskonto i listan.

Följ anvisningarna i följande tabell för att förstå hur du skapar lagringsresursen.

Property	Värde
Ange ett globalt unikt namn för den nya webbappen.	Ange ett unikt värde, till exempel `fileuploadstor`, för namnet på lagringsresursen. Det här unika namnet är ditt resursnamn som används i nästa avsnitt. Använd endast tecken och siffror, upp till 24 långa. Du behöver det här kontonamnet för att kunna använda det senare.
Välj en plats för nya resurser.	Använd den rekommenderade platsen.

När processen för att skapa appen är klar visas ett meddelande med information om den nya resursen.

5. Konfigurera CORS för lagring

Eftersom webbläsaren används för att ladda upp filen måste Azure Storage-kontot konfigurera CORS för att tillåta begäranden mellan ursprung.

Gå till Azure Storage-tillägget. Högerklicka på lagringsresursen och välj Öppna i portalen.
I avsnittet Lagringskonto för Azure-portalen Inställningar väljer du Resursdelning (CORS).
Använd följande egenskaper för att ange CORS för den här självstudien.
- Tillåtet ursprung: *
- Tillåtna metoder: Alla utom korrigering
- Tillåtna rubriker: *
- Synliga rubriker: *
- Max ålder: 86400
De här inställningarna används för den här självstudien för att förenkla stegen och är inte avsedda att ange metodtips eller säkerhet. Läs mer om CORS för Azure Storage.
Välj Spara.

6. Bevilja anonym åtkomst till lagring

Filuppladdningen skyddas från klienten när du skapar en tidsbegränsad och behörighetsbegränsad SAS-token. När filen har laddats upp vill du dock att alla ska se den i det här självstudiescenariot. För att kunna göra det måste du ändra lagringsbehörigheten så att den blir offentligt tillgänglig.

Även om kontot är offentligt tillgängligt kan varje container och varje blob ha privat åtkomst. En säkrare metod men för komplicerad för den här självstudien är att ladda upp till ett lagringskonto med SAS-token och sedan flytta bloben till ett annat lagringskonto med offentlig åtkomst.

Om du vill aktivera offentlig åtkomst i Azure-portalen väljer du sidan Översikt för ditt lagringskonto. I avsnittet Egenskaper väljer du Blob anonym åtkomst och sedan Inaktiverad.
På sidan Konfiguration aktiverar du Tillåt anonym blobåtkomst.

7. Skapa uppladdningscontainer

I avsnittet Datalagring i Azure-portalens lagringskonto väljer du Containrar.
Välj + Container för att skapa containern upload med följande inställningar:
- Namn: upload
- Offentlig åtkomstnivå: Blob
Välj Skapa.

8. Bevilja dig blobdataåtkomst

När du skapade resursen har du inte behörighet att visa innehållet i containern. Det är reserverat för specifika IAM-roller. Lägg till ditt konto så att du kan visa blobarna i containrarna.

Välj Åtkomstkontroll (IAM) i Azure-portalens lagringskonto.
Välj Lägg till rolltilldelningar.
Sök och välj Storage Blob Data-deltagare. Välj Nästa.
Välj + Välj medlemmar.
Sök och välj ditt konto.
Välj Granska + tilldela.
Välj Containrar och sedan uppladdningscontainern. Du bör kunna se att det inte finns några blobar i containern utan auktoriseringsfel.

9. Hämta autentiseringsuppgifter för lagringsresurser

Autentiseringsuppgifterna för lagringsresurser används i Azure Functions API-appen för att ansluta till lagringsresursen.

När du fortfarande är i Azure-portalen går du till avsnittet Säkerhet + nätverk och väljer Åtkomstnycklar.
Kom ihåg att API-filerna finns på ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api.
I API-mappen byter du namn på filen från local.settings.json.sample till local.settings.json. Filen ignoreras av Git så att den inte checkas in i källkontrollen.

Uppdatera inställningarna för local.settings.json att använda följande tabell.

Property	Värde	beskrivning
Azure_Storage_AccountName	Azure Storage-kontonamn, till exempel: `fileuploadstor`.	Används i källkoden för att ansluta till lagringsresursen.
Azure_Storage_AccountKey	Azure Storage-kontonyckel	Används i källkoden för att ansluta till lagringsresursen.
AzureWebJobsStorage	Azure Storage-konto anslutningssträng	Använd av Azure Functions-körning för att lagra tillstånd och loggar.

Det kan verka som om du har angett samma kontoautentiseringsuppgifter två gånger, en gång som en nyckel och en gång som en anslutningssträng. Det gjorde du, men specifikt för den här enkla självstudien. I allmänhet bör Azure Functions-appar ha en separat lagringsresurs som inte återanvänds för ett annat syfte. När du skapar Azure Function-resursen senare i självstudien behöver du inte ange värdet AzureWebJobsStorage för molnresursen. Du behöver bara ange de Azure_Storage_AccountName - och Azure_Storage_AccountKey värden som används i källkoden.

10. Kör API-appen

Kör Functions-appen för att se till att den fungerar korrekt innan du distribuerar den till Azure.

I API-appens terminal kör du följande kommando för att starta API-appen.
```
npm run start
```
Vänta tills Azure Functions-appen har startats. Du får ett meddelande om att Azure Functions-appens port 7071 nu är tillgänglig. Du bör också se API:erna i terminalen för API-appen.
```
Functions:

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

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

        status: [GET] http://localhost:7071/api/status
```
Välj fliken Portar i det nedre fönstret och högerklicka sedan på 7071-porten och välj Portsynlighet och välj sedan Offentlig.

Om du inte exponerar den här appen som offentlig får du ett fel när du använder API:et från klientappen.
Om du vill testa att API:et fungerar och ansluter till lagring går du till fliken Portar i det nedre fönstret och väljer globeikonen i området Lokal adress för port 7071. Då öppnas en webbläsare för funktionsappen.
Lägg till API-vägen i URL-adressfältet: /api/sas?container=upload&file=test.png. Det är ok att filen inte finns i containern än. API:et skapar SAS-token baserat på var du vill att den ska laddas upp till.

JSON-svaret bör se ut ungefär så här:

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

Kopiera basen för API-URL:en i webbläsarens adressfält (inte SAS-token-URL:en i JSON-objektet) som ska användas i nästa steg. Bas-URL:en är allt före /api/sas.

11. Konfigurera och kör klientappen

Byt namn på ./azure-upload-file-to-storage/app/.env.sample filen till .env.
.env Öppna filen och klistra in bas-URL:en från föregående avsnitt som värde för VITE_API_SERVER.

Ett exempel för en Codespaces-miljö kan se ut ungefär som VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev
Starta klientappen i den andra delade terminalen med följande kommando:
```
npm run dev
```

Vänta tills terminalen returnerar följande meddelande om att appen är tillgänglig på port 5173.

  VITE v4.4.4  ready in 410 ms

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

Välj fliken Portar i det nedre fönstret och högerklicka sedan på 5173-porten och välj jordglobsikonen.
Du bör se den enkla webbappen.
Interagera med webbappen:
- Välj en bildfil (*.jpg eller *.png) från den lokala datorn som ska laddas upp.
- Välj knappen Hämta en SAS för att begära en SAS-token från API-appen. Svaret visar den fullständiga URL:en som ska användas för att ladda upp filen till Storage.
- Välj knappen Ladda upp för att skicka bildfilen direkt till Lagring.
Klientappen och API-appen fungerade tillsammans i en containerbaserad utvecklarmiljö.

12. Checka in kodändringar

Öppna fliken Källkontroll i Visual Studio Code.
+ Välj ikonen för att mellanlagra alla ändringar. Dessa ändringar bör endast innehålla nya package-lock.json-filer för mapparna och api för den app här självstudien.

13. Distribuera statisk webbapp till Azure

Azure Functions-appen använder en förhandsversionsfunktion. Den måste distribueras till USA, västra 2 för att fungera korrekt.

I Visual Studio Code väljer du Azure Explorer.
I Azure Explorer högerklickar du på prenumerationsnamnet och väljer Create Resource...sedan .
Välj Skapa statisk webbapp från listan.

Följ anvisningarna i följande tabell för att förstå hur du skapar din Static Web App-resurs.

Property	Värde
Ange ett globalt unikt namn för den nya webbappen.	Ange ett unikt värde, till exempel `fileuploadstor`, för namnet på lagringsresursen. Det här unika namnet är ditt resursnamn som används i nästa avsnitt. Använd endast tecken och siffror, upp till 24 långa. Du behöver det här kontonamnet för att kunna använda det senare.
Välj en plats för nya resurser.	Använd den rekommenderade platsen.

Följ anvisningarna för att ange följande information:

Prompt	Skriv in
Välj en resursgrupp för nya resurser.	Använd den resursgrupp som du skapade för lagringsresursen.
Ange namnet på den nya statiska webbappen.	Acceptera standardnamnet.
Välj en SKU	Välj den kostnadsfria SKU:n för den här självstudien. Om du redan har en kostnadsfri statisk webbappresurs i din prenumeration väljer du nästa prisnivå.
Välj byggförinställning för att konfigurera standardprojektstrukturen.	Välj Kund.
Välj platsen för programkoden	`azure-upload-file-to-storage/app`
Välj platsen för Din Azure Functions-kod	`azure-upload-file-to-storage/api`
Ange sökvägen till byggutdata...	`dist` Det här är sökvägen från din app till dina statiska (genererade) filer.
Välj en plats för nya resurser.	Välj en region nära dig.

När processen är klar visas ett popup-meddelande. Välj Visa/redigera arbetsflöde.
Fjärrgrenen har en ny arbetsflödesfil för distribution till Static Web Apps. Hämta filen till din miljö med följande kommando i terminalen:
```
git pull origin main
```
Öppna arbetsflödesfilen som finns på /.github/workflows/.

Kontrollera att avsnittet om arbetsflödet som är specifikt för den här självstudiekursens statiska webbapp bör se ut så här:

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

Gå till din GitHub-förgrening av exemplet https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions för att verifiera att bygg- och distributionsåtgärden, med namnet Azure Static Web Apps CI/CD, har slutförts. Det kan ta några minuter att slutföra.
Gå till Azure-portalen för din app och visa avsnittet API:er i Inställningar. Serverdelsresursnamnet i produktionsmiljön (managed) anger att dina API:er har distribuerats.
Välj (hanterad) för att se listan över API:er som lästs in i appen:
- lista
- Sas
- status
Gå till sidan Översikt för att hitta URL:en för din distribuerade app.
Distributionen av appen är klar.

14. Konfigurera API med lagringsresursens namn och nyckel

Appen behöver resursnamnet och nyckeln för Azure Storage innan API:et fungerar korrekt.

Högerklicka på resursen Static Web App i Azure Explorer och välj Öppna i portalen.
Välj Konfiguration i avsnittet Inställningar.

Lägg till programinställningar med hjälp av följande tabell.

Property	Värde	beskrivning
Azure_Storage_AccountName	Azure Storage-kontonamn, till exempel: `fileuploadstor`.	Används i källkoden för att ansluta till lagringsresursen.
Azure_Storage_AccountKey	Azure Storage-kontonyckel	Används i källkoden för att ansluta till lagringsresursen.

Spara båda inställningarna genom att välja Spara på sidan Konfiguration.

Kommentar

Du behöver inte ange klientappens env-variabel VITE_API_SERVER eftersom klientappen och API:et finns från samma domän.

15. Använd den Azure-distribuerade statiska webbappen

Kontrollera att distributionen och konfigurationen lyckades med hjälp av webbplatsen.

I Visual Studio Code högerklickar du på din statiska webbapp från Azure Explorer och väljer Bläddra på webbplatsen.
I det nya webbläsarfönstret väljer du Välj fil och sedan en bildfil (*.png eller *.jpg) som ska laddas upp.
Välj Hämta sas-token. Den här åtgärden skickar filnamnet till API:et och tar emot den SAS-token-URL som krävs för att ladda upp filen.
Välj Ladda upp fil för att använda URL:en för SAS-token för att ladda upp filen. Webbläsaren visar miniatyrbilden och URL:en för den uppladdade filen.

16. Rensa resurser

I Visual Studio Code använder du Azure Explorer för resursgrupper, högerklickar på resursgruppen och väljer sedan Ta bort.

Detta tar bort alla resurser i gruppen, inklusive dina lagrings- och statiska webbappresurser.

Felsökning

Rapportera problem med det här exemplet på GitHub-lagringsplatsen som anges nedan. Ta med följande med problemet:

Artikelns URL
Steget eller kontexten i artikeln som var problematisk
Din utvecklingsmiljö

Exempelkod

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

Om du vill fortsätta med den här appen kan du lära dig hur du distribuerar appen till Azure för värdtjänster med något av följande alternativ:

Dokumentation om Azure Blob Storage
@azure/storage-blob
- npm-paket
Azure Static-webbapp

Ladda upp en avbildning till en Azure Storage-blob med JavaScript

Förutsättningar

Programmets arkitektur

Lokala miljöer och byggmiljöer

1. Förgrena exempelprogramlagringsplats med GitHub

2. Konfigurera utvecklingsmiljö

3. Installera beroenden

4. Skapa lagringsresurs med Visual Studio-tillägget

5. Konfigurera CORS för lagring

6. Bevilja anonym åtkomst till lagring

7. Skapa uppladdningscontainer

8. Bevilja dig blobdataåtkomst

9. Hämta autentiseringsuppgifter för lagringsresurser

10. Kör API-appen

11. Konfigurera och kör klientappen

12. Checka in kodändringar

13. Distribuera statisk webbapp till Azure

14. Konfigurera API med lagringsresursens namn och nyckel

15. Använd den Azure-distribuerade statiska webbappen

16. Rensa resurser

Felsökning

Exempelkod

Feedback

Feedback

Ytterligare resurser

Ladda upp en avbildning till en Azure Storage-blob med JavaScript

Förutsättningar

Programmets arkitektur

Lokala miljöer och byggmiljöer

1. Förgrena exempelprogramlagringsplats med GitHub

2. Konfigurera utvecklingsmiljö

3. Installera beroenden

4. Skapa lagringsresurs med Visual Studio-tillägget

5. Konfigurera CORS för lagring

6. Bevilja anonym åtkomst till lagring

7. Skapa uppladdningscontainer

8. Bevilja dig blobdataåtkomst

9. Hämta autentiseringsuppgifter för lagringsresurser

10. Kör API-appen

11. Konfigurera och kör klientappen

12. Checka in kodändringar

13. Distribuera statisk webbapp till Azure

14. Konfigurera API med lagringsresursens namn och nyckel

15. Använd den Azure-distribuerade statiska webbappen

16. Rensa resurser

Felsökning

Exempelkod

Relaterat innehåll

Feedback

Feedback

Ytterligare resurser