Läs på engelska

Dela via

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

  • Artikel

Använd en statisk webbapp för att ladda upp filer direkt till en Azure Storage-blob med hjälp av @azure/storage-blob-paketet. API:et genererar en SAS-token enligt Valet Key-mönstret, vilket gör att du på ett säkert sätt kan delegera begränsad åtkomst utan att exponera fullständiga autentiseringsuppgifter.

Varning

Den här självstudien visar hur du värdar din funktionsapp i en konsumtionsplan. När du planerar att skydda dina anslutningar med hjälp av Microsoft Entra-ID med hanterade identiteter bör du i stället överväga att vara värd för din app i Flex Consumption-plan. Flex Consumption-planen har utformats för att optimera säkerheten genom att stödja användningen av hanterade identiteter utan några av de kompromisser som krävs när du kör i en förbruknings- eller Premium-plan. Flex Consumption har också fullt stöd för integrering av virtuella nätverk.

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 att skapa en avgrening och skicka ändringar till ett repo.

Programarkitektur

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

  • Azure Static Web Apps är värd för både den statiska klienten och det länkade Azure Functions-API:et, där tjänsten hanterar API-resursen automatiskt.
  • Azure Storage för bloblagringen.

diagram som visar hur en kund interagerar från sin dator för att använda webbplatsen för att ladda upp en fil till Azure Storage direkt.

Steg Beskrivning
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 handledningen är front-end ramverket Vite React och filen som laddas upp är en bildfil.
3 Webbplatsen anropar Azure Functions API sas för att hämta SAS-tokenen 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 Frontend-webbapplikationen använder SAS-token-URL:en 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.

Förgrena exempelprogramlagringsplats med GitHub

I den här handledningen 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.

  1. 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.
  2. Slutför stegen för att förgrena exemplet endast med huvudgrenen .

Konfigurera utvecklingsmiljö

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

sv-SE: 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. För mer information, se GitHub Codespaces månatligen inkluderade lagring och kärntimmar.

  1. I en webbläsare, på din GitHub-förgrening av exempellagringsplatsen, startar du processen för att skapa ett nytt GitHub Codespace på main grenen av din förgrening genom att välja knappen CODE.

    GitHub-skärmbild av Codespaces-knappar för en lagringsplats.

  2. På fliken Codespaces väljer du ellipsen ....

    GitHub-skärmbild av fliken Codespaces med ellipskontrollen markerad.

  3. Välj + Ny med alternativ för att välja en specifik Codespaces dev-container.

    GitHub-skärmbild av Codespaces Nytt med menyalternativ markerat.

  4. 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 standardinställning
    • Datortyp: acceptera standard

    GitHub-skärmbild av Codespaces Ny med alternativmenyn med följande utvecklingscontainer markerad, Självstudie: Ladda upp fil till lagring med SAS-token.

  5. Vänta tills kodutrymmet startar. Den här startprocessen kan ta några minuter.

  6. Öppna en ny terminal i kodområdet.

    Tips

    Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal.

    Skärmbild av menyalternativet codespaces för att öppna en ny terminal.

  7. Kontrollera versionerna av de verktyg som du använder i den här självstudien.

    shell 
    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

  8. Stäng terminalen.

  9. De återstående stegen i den här handledningen sker inom den här utvecklingscontainern.

Installera beroenden

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

  1. Öppna en terminal i Visual Studio Code och flytta till projektmappen.

    Bash 
    cd azure-upload-file-to-storage

  2. Dela terminalen så att du har två terminaler, en för klientappen och en för API-appen.

  3. I en av terminalerna kör du följande kommando för att installera API:et appens beroenden och köra appen.

    Bash 
    cd api && npm install

  4. I den andra terminalen kör du kommandot för att installera -klientappen.

    Bash 
    cd app && npm install

Skapa lagringsresurs med Visual Studio-tillägget

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

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

  1. Gå till Azure Storage-tillägget.

  2. Logga in på Azure om det behövs.

  3. Högerklicka på prenumerationen och välj sedan Create Resource....

    Skärmbild av Visual Studio Code i Azure Explorer med högerklicksmenyn med objektet Skapa resurs markerat.

  4. Välj Skapa lagringskonto från listan.

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

    Egenskap 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 senare användning.
    Välj en plats för nya resurser. Använd den rekommenderade platsen.

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

    Skärmbild av Visual Studio Code som visar Aktivitetsfältet i Azure och meddelandet om att lagringskontot har skapats.

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. Dessa CORS-inställningar 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.

  1. Gå till Azure Storage-tillägget. Högerklicka på lagringsresursen och välj Öppna i portalen.

  2. I avsnittet Azure-portalens lagringskonto Inställningar väljer du Resursdelning (CORS).

  3. Använd följande egenskaper för att ställa in CORS för den här handledningen.

    • Tillåtet ursprung: *
    • Tillåtna metoder: Alla utom patch
    • Tillåtna rubriker: *
    • Synliga rubriker: *
    • Max ålder: 86400

  4. Välj Spara.

Bevilja anonym åtkomst till lagring

Efter filuppladdningen kräver självstudiescenariot offentlig åtkomst till bloben för visning. För enkelhetens skull möjliggör den här guiden anonym åtkomst för de uppladdade filerna.

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

Skapa uppladdningscontainer

Skapa en privat container som har offentligt läsbara blobar.

  1. I avsnittet Data Storage väljer du Containersmedan du fortfarande är i Azure-portalens lagringskonto.

  2. Välj + Container för att skapa din upload container med följande inställningar:

    • Namn: upload
    • Offentlig åtkomstnivå: Blob

  3. Välj Skapa.

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.

  1. Fortsätt vara i Azure-portalens lagringskonto och välj Åtkomstkontroll (IAM).
  2. Välj Lägg till rolltilldelningar.
  3. Sök och välj Storage Blob Data Contributor. Välj Nästa.
  4. Välj + Välj medlemmar.
  5. Sök och välj ditt konto.
  6. Välj Granska + tilldela.
  7. Välj Containrar och sedan uppladdningscontainer. Du bör kunna se att det inte finns några blobar i containern, och detta utan att några auktoriseringsfel uppstår.

Hämta autentiseringsuppgifter för lagringsresurser

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

  1. I avsnittet Säkerhet + nätverk i Azure-portalen väljer du Åtkomstnycklar.

  2. Kopiera nyckeln Key .

  3. I Visual Studio Code i mappen ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apibyta 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.

  4. Uppdatera inställningarna för local.settings.json med hjälp av följande tabell.

    Egenskap 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 Anslutningssträng för Azure Storage-konto Används av Azure Functions runtime-miljön 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 guiden. 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-funktionsresursen 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.

Kör API-appen

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

  1. I API-appens terminal kör du följande kommando för att starta API-appen.

    Bash 
    npm run start

  2. 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.

    Console 
    Functions:

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

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

        status: [GET] http://localhost:7071/api/status

  3. Välj fliken Portar i det nedre fönstret och högerklicka sedan på porten 7071 och välj Portsynlighet sedan välja 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.

  4. 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 lokala adress för port 7071. Då öppnas en webbläsare för funktionsappen.

  5. 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.

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

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

  7. 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 innan /api/sas. Du klistrar in detta i miljövariabelfilen för klientappen i nästa avsnitt.

Konfigurera och köra klientappen

  1. Byt namn på filen ./azure-upload-file-to-storage/app/.env.sample till .env.

  2. Öppna filen .env 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

  3. Starta klientappen i den andra delade terminalen med följande kommando:

    Bash 
    npm run dev

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

    Console 
      VITE v4.4.4  ready in 410 ms

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

  5. Välj fliken Portar i det nedre fönstret och högerklicka sedan på porten 5173 och välj jordglobsikonen.

  6. Du ska se den enkla webbappen.

    Skärmbild av webbläsare som visar webbapp med knappen Välj fil tillgänglig.

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

    Skärmbild av webbläsaren som visar webbappen med den uppladdade bildfilen och en miniatyrbild av filen som visas.

  8. Klientappen och API-appen fungerade tillsammans i en containerbaserad utvecklarmiljö.

Checka in kodändringar

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

Distribuera statisk webbapp till Azure

Azure Functions-appen använder en funktion i förhandsversion. Den måste distribueras till West US 2 för att fungera korrekt.

  1. I Visual Studio Code väljer du Azure Explorer.

  2. Högerklicka på prenumerationsnamnet i Azure Explorer och välj sedan Create Resource....

  3. Välj Skapa statisk webbapp från listan.

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

    Egenskap 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 kommer att användas i nästa avsnitt. Använd endast tecken och siffror, upp till 24 långa. Du behöver det här kontonamnet för senare användning.
    Välj en plats för nya resurser. Använd den rekommenderade platsen.

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

    Snabb Inträda
    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 det förvalda namnet.
    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 Anpassad.
    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.

  6. När processen är klar visas ett popup-meddelande. Välj Visa/Redigera arbetsflöde.

  7. Din externa fork har en ny arbetsflödesfil för distribution till Static Web Apps. Hämta filen till din miljö med följande kommando i terminalen:

    Bash 
    git pull origin main

  8. Öppna arbetsflödesfilen som finns på /.github/workflows/.

  9. Kontrollera att avsnittet i arbetsflödet som är specifikt för den här självstudiekursens statiska webbapp ska se ut så här:

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

  10. 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/CDhar slutförts. Det kan ta några minuter att slutföra.

  11. Gå till Azure-portalen för din app och visa avsnittet API:er i Inställningar. Resursnamn för serverdelen i produktionsmiljön är (managed) vilket visar att dina API:er har distribuerats framgångsrikt.

  12. Välj (hanterad) för att se API-listan som har laddats in i appen:

    • lista
    • Sas
    • status

  13. Gå till sidan Översikt för att hitta URL:en för din distribuerade app.

  14. Distributionen av appen är klar.

Konfigurera API med lagringsresursens namn och nyckel

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

  1. Högerklicka på resursen Static Web App i Azure Explorer och välj Öppna i portalen.

  2. Välj Konfiguration i avsnittet Inställningar.

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

    Egenskap 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.

  4. Välj Spara på sidan Konfiguration för att spara båda inställningarna.

Anteckning

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

Använda den Azure-distribuerade statiska webbappen

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

  1. Högerklicka på din statiska webbapp i Azure explorer i Visual Studio Code och välj Öppna webbplats.
  2. I det nya webbläsarfönstret väljer du Välj fil väljer sedan en bildfil (*.png eller *.jpg) som ska laddas upp.
  3. 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.
  4. 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.

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. Inkludera följande med problemet:

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

Exempelkod

Relaterat innehåll

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: