Freigeben über

Tutorial: Hochladen eines Bilds in ein Azure Storage-Blob mit JavaScript

In diesem Tutorial verwenden Sie eine statische Web-App, um Dateien mithilfe des @azure/storage-blob Pakets direkt in ein Azure Storage-Blob hochzuladen. Die API generiert ein SAS-Token nach dem Valet Key-Muster, mit dem Sie eingeschränkten Zugriff sicher delegieren können, ohne vollständige Anmeldeinformationen verfügbar zu geben.

Vorsicht

In diesem Lernprogramm erfahren Sie, wie Sie Ihre Funktions-App in einem Verbrauchsplan hosten. Wenn Sie planen, Ihre Verbindungen mithilfe der Microsoft Entra-ID mit verwalteten Identitäten zu sichern, sollten Sie stattdessen in Betracht ziehen, Ihre App im Flex-Verbrauchsplanzu hosten. Der Flex-Verbrauchstarif optimiert die Sicherheit, indem er die Verwendung verwalteter Identitäten und die Integration virtueller Netzwerke unterstützt.

Voraussetzungen

  • Ein Azure-Abonnement; Wenn Sie noch nicht über ein Azure-Abonnement verfügen, können Sie sich für ein kostenloses Azure-Kontoregistrieren.
  • GitHub-Konto zum Forken und zum Pushen an ein Repository.

Anwendungsarchitektur

Diese Anwendungsarchitektur umfasst zwei Azure-Ressourcen:

  • Azure Static Web Apps hosten sowohl den statischen Client als auch die verknüpfte Azure Functions-API, wobei der Dienst die API-Ressource automatisch verwaltet.
  • Azure Storage für den Blobspeicher.

Diagramm, das zeigt, wie ein Kunde von ihrem Computer aus interagiert, um die Website zum direkten Hochladen einer Datei in Azure Storage zu verwenden.

Schritt Beschreibung
1 Der Kunde verbindet sich mit der statisch generierten Website. Die Website wird in Azure Static Web Appsgehostet.
2 Der Kunde verwendet diese Website, um eine Datei auszuwählen, die hochgeladen werden soll. In diesem Lernprogramm ist das Front-End-Framework Vite React und die hochgeladene Datei eine Bilddatei.
3 Die Website ruft die Azure Functions-API-sas auf, um ein SAS-Token basierend auf dem genauen Dateinamen der hochzuladenden Datei abzurufen. Die serverlose API verwendet das Azure Blob Storage SDK zum Erstellen des SAS-Tokens. Die API gibt die vollständige URL zurück, die zum Hochladen der Datei verwendet werden soll, die das SAS-Token als Abfragezeichenfolge enthält.
https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN
4 Die Front-End-Website verwendet die SAS-Token-URL, um die Datei direkt in Azure Blob Storagehochzuladen.

Lokale und Build-Umgebungen

In diesem Lernprogramm werden die folgenden Umgebungen verwendet:

  • Lokale Entwicklung mit GitHub Codespaces oder Visual Studio Code.
  • Erstellen und bereitstellen mit GitHub Actions.

Fork-Beispielanwendungs-Repository mit GitHub

In diesem Lernprogramm werden GitHub-Aktionen verwendet, um die Beispielanwendung in Azure bereitzustellen. Sie benötigen ein GitHub-Konto und einen Fork des Repositorys der Beispielanwendung, um diese Bereitstellung abzuschließen.

  1. Verwenden Sie in einem Webbrowser den folgenden Link, um einen Fork des Beispiel-Repositorys für Ihr eigenes Konto zu erstellen: Azure-Samples/azure-typescript-e2e-apps.
  2. Führen Sie die Schritte aus, um das Beispiel nur mit dem Hauptbranch zu erstellen.

Konfigurieren der Entwicklungsumgebung

Es ist eine Entwicklungscontainerumgebung mit allen Abhängigkeiten verfügbar, die zum Abschließen der Übungen in diesem Projekt erforderlich sind. Sie können den Entwicklungscontainer in GitHub Codespaces oder lokal mit Visual Studio Code ausführen.

GitHub Codespaces führt einen von GitHub verwalteten Entwicklungscontainer mit Visual Studio Code für das Web als Benutzeroberfläche aus. Verwenden Sie für die einfachste Entwicklungsumgebung GitHub Codespaces, damit Sie die richtigen Entwicklertools und Abhängigkeiten vorinstalliert haben, um dieses Schulungsmodul abzuschließen.

Wichtig

Alle GitHub-Konten können Codespaces für bis zu 60 Stunden kostenlos jeden Monat mit 2 Kerninstanzen verwenden. Weitere Informationen finden Sie im Artikel zu monatlich enthaltener Speicherkapazität und Kernstunden in GitHub Codespaces.

  1. Öffnen Sie in einem Webbrowser das GitHub-Fork des Beispiel-Repositorys und starten Sie den Prozess zum Erstellen eines neuen GitHub Codespaces im main-Branch Ihres Forks, indem Sie die Schaltfläche CODE auswählen.

    GitHub-Screenshot von Codespaces-Schaltflächen für ein Repository.

  2. Wählen Sie auf der Registerkarte Codespaces die Auslassungspunkte ... aus.

    GitHub-Screenshot der Registerkarte

  3. Wählen Sie + Neu mit Optionen aus, um einen bestimmten Codespaces-Entwicklungscontainer auszuwählen.

    GitHub-Screenshot von

  4. Wählen Sie die folgenden Optionen aus, und klicken Sie dann auf Codespace erstellen.

    • Zweig: main
    • Dev-Containerkonfiguration: Tutorial: Upload file to storage with SAS Token
    • Region: Standard akzeptieren
    • Computertyp: Standardwert akzeptieren

    GitHub-Screenshot von

  5. Warten Sie, bis der Codespace gestartet wird. Dieser Startvorgang kann einige Minuten dauern.

  6. Öffnen Sie ein neues Terminal im Codespace.

    Tipp

    Mit dem Hauptmenü können Sie zur Menüoption Terminal navigieren und dann die Option Neues Terminal auswählen.

    Screenshot der Menüoption

  7. Überprüfen Sie die Versionen der Tools, die Sie in diesem Lernprogramm verwenden.

    node --version
npm --version
func --version

    Dieses Lernprogramm erfordert die folgenden Versionen jedes Tools, die in Ihrer Umgebung vorinstalliert sind:

    Werkzeug Version
    Node.js ≥ 18
    npm ≥ 9.5
    Kerntools für Azure Functions ≥ 4.5098

  8. Schließen Sie das Terminal.

  9. Die verbleibenden Schritte in diesem Lernprogramm finden im Kontext dieses Entwicklungscontainers statt.

Installieren von Abhängigkeiten

Die Beispiel-App für dieses Lernprogramm befindet sich im Ordner azure-upload-file-to-storage. Sie müssen keine anderen Ordner im Projekt verwenden.

  1. Öffnen Sie in Visual Studio Code ein Terminal, und wechseln Sie zum Projektordner.

    cd azure-upload-file-to-storage

  2. Teilen Sie das Terminal so, dass Sie zwei Terminals haben, eine für die Client-App und eine für die API-App.

  3. Führen Sie in einem der Terminals den folgenden Befehl aus, um die Abhängigkeiten der -API App zu installieren und die App auszuführen.

    cd api && npm install

  4. Führen Sie im anderen Terminal den Befehl aus, um die Client-Appzu installieren.

    cd app && npm install

Erstellen einer Speicherressource mit der Visual Studio-Erweiterung

Erstellen Sie die Azure Storage-Ressource, die mit der Beispiel-App verwendet werden soll. Speicher wird für Folgendes verwendet:

  • Trigger in der Azure Functions-App
  • Blobspeicher (Datei)

  1. Navigieren Sie zur Azure Storage-Erweiterung.

  2. Melden Sie sich bei Azure bei Bedarf an.

  3. Klicken Sie mit der rechten Maustaste auf das Abonnement, und wählen Sie dann Create Resource...aus.

    Screenshot von Visual Studio Code im Azure-Explorer mit dem Kontextmenü, in dem das Element „Ressource erstellen” hervorgehoben ist.

  4. Wählen Sie Speicherkonto erstellen aus der Liste aus.

  5. Folgen Sie den Anweisungen in der folgenden Tabelle, um zu verstehen, wie Sie Ihre Speicherressource erstellen.

    Eigentum Wert
    Geben Sie einen global eindeutigen Namen für die neue Web-App ein. Geben Sie einen eindeutigen Wert wie fileuploadstorfür den Namen der Speicherressource ein.

    Dieser eindeutige Name ist Ihr Ressourcenname, der im nächsten Abschnitt verwendet wird. Verwenden Sie eine Länge von maximal 24 alphanumerischen Zeichen. Sie benötigen diesen Kontonamen, um ihn später zu verwenden.
    Wählen Sie einen Speicherort für neue Ressourcen aus. Verwenden Sie den empfohlenen Speicherort.

  6. Nach Abschluss des App-Erstellungsprozesses wird eine Benachrichtigung mit Informationen zur neuen Ressource angezeigt.

    Screenshot von Visual Studio Code mit der Azure-Aktivitätsleiste und der Benachrichtigung, dass das Speicherkonto erfolgreich erstellt wurde.

Konfigurieren von Speicher-CORS

Da der Browser zum Hochladen der Datei verwendet wird, muss das Azure Storage-Konto CORS so konfigurieren, dass cross-origin-Anforderungen zulässig sind. Diese CORS-Einstellungen werden für dieses Lernprogramm verwendet, um die Schritte zu vereinfachen und sollten nicht auf bewährte Methoden oder Sicherheit hinweisen. Erfahren Sie mehr über CORS für Azure Storage.

  1. Navigieren Sie zur Azure Storage-Erweiterung. Klicken Sie mit der rechten Maustaste auf Ihre Speicherressource, und wählen Sie Im Portal öffnen aus.

  2. Wählen Sie im Abschnitt Einstellungen im Azure-Portalspeicherkonto Ressourcenfreigabe (CORS) aus.

  3. Verwenden Sie die folgenden Eigenschaften, um CORS für dieses Lernprogramm festzulegen.

    • Zulässige Ursprünge: *
    • Zulässige Methoden: Alle außer Patch
    • Zulässige Kopfzeilen: *
    • Verfügbar gemachte Header: *
    • Max. Alter: 86400

  4. Wählen Sie Speichern aus.

Anonymen Zugriff auf Speicher gewähren

Nach dem Hochladen der Datei erfordert das Lernprogrammszenario einen öffentlichen Zugriff auf das BLOB zum Anzeigen. Der Einfachheit halber ermöglicht dieser Leitfaden anonymen Zugriff auf die hochgeladenen Dateien.

  1. Um den öffentlichen Zugriff im Azure-Portal zu deaktivieren, wählen Sie auf der Seite Übersicht für Ihr Speicherkonto im Abschnitt Eigenschaften, den Blob-anonymer Zugriff und dann Deaktiviertaus.
  2. Aktivieren Sie auf der Seite Konfiguration die Option Anonymen Blob-Zugriff zulassen.

Erstellen eines Uploadcontainers

Erstellen Sie einen privaten Container mit öffentlich lesbaren Blobs.

  1. Wählen Sie im Abschnitt Datenspeicher im Azure-Portalspeicherkonto Container aus.

  2. Wählen Sie + Container- aus, um Ihren upload Container mit den folgenden Einstellungen zu erstellen:

    • Name: upload
    • Öffentliche Zugriffsstufe: Blob

  3. Wählen Sie Erstellen aus.

Gewähren Sie sich Blob-Datenzugriff

Während Sie die Ressource erstellt haben, verfügen Sie nicht über die Berechtigung zum Anzeigen des Inhalts des Containers. Diese Berechtigung ist für bestimmte IAM-Rollen reserviert. Fügen Sie Ihr Konto hinzu, damit Sie die Blobs in den Containern anzeigen können.

  1. Wählen Sie im Speicherkonto des Azure-Portals die Option Zugriffssteuerung (IAM) aus.
  2. Wählen Sie Rollenzuweisung hinzufügen aus.
  3. Suchen und wählen Sie Mitwirkender an Storage-Blobdaten aus. Wählen Sie Weiter aus.
  4. Wählen Sie aus + wählen Sie Mitgliederaus.
  5. Suchen Sie Ihr Konto, und wählen Sie es aus.
  6. Wählen Sie Überprüfen und zuweisen aus.
  7. Wählen Sie Container und dann den Upload-Container aus. Sie sollten sehen können, dass im Container keine Blobs vorhanden sind, ohne dass Autorisierungsfehler auftreten.

Abrufen von Zugangsdaten für Speicherressourcen

Die Anmeldeinformationen der Speicherressource werden in der Azure Functions-API-App verwendet, um eine Verbindung mit der Speicherressource herzustellen.

  1. Wählen Sie im Azure-Portal im Abschnitt Sicherheit + Netzwerk die Option Zugriffsschlüssel aus.

  2. Kopieren Sie den Key -Schlüssel.

  3. Benennen Sie in Visual Studio Code im ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apiOrdner die Datei von local.settings.json.sample in local.settings.json um. Die Datei wird von Git ignoriert, sodass sie nicht in die Quellcodeverwaltung eingecheckt wird.

  4. Aktualisieren Sie die Einstellungen für local.settings.json mithilfe der folgenden Tabelle.

    Eigentum Wert Beschreibung
    Azure_Storage_AccountName Name des Azure Storage-Kontos, z. B.: fileuploadstor. Wird im Quellcode verwendet, um eine Verbindung mit der Speicherressource herzustellen.
    Azure_Storage_AccountKey Azure Storage-Kontoschlüssel Wird im Quellcode verwendet, um eine Verbindung mit der Speicherressource herzustellen.
    AzureWebJobsStorage Verbindungszeichenfolge für Azure Storage-Konten Wird von der Azure Functions-Laufzeit zum Speichern von Status und Protokollen verwendet.

Möglicherweise haben Sie zweimal die gleichen Kontoanmeldeinformationen eingegeben, einmal als Schlüssel und einmal als Verbindungszeichenfolge. Sie haben das speziell für diese einfache Anleitung gemacht. Im Allgemeinen sollten Azure Functions-Apps über eine separate Speicherressource verfügen, die nicht für einen anderen Zweck wiederverwendet wird. Wenn Sie die Azure Function-Ressource später im Lernprogramm erstellen, müssen Sie den AzureWebJobsStorage- Wert für die Cloudressource nicht festlegen. Sie müssen die Azure_Storage_AccountName und Azure_Storage_AccountKey Werte festlegen, die im Quellcode verwendet werden.

Ausführen der API-App

Führen Sie die Funktionen-App aus, um sicherzustellen, dass sie ordnungsgemäß funktioniert, bevor Sie sie in Azure bereitstellen.

  1. Führen Sie im Terminal der API-App den folgenden Befehl aus, um die API-App zu starten.

    npm run start

  2. Warten Sie, bis die Azure Functions-App gestartet wird. Sie erhalten einen Hinweis darauf, dass der Port der Azure Functions-App 7071 jetzt verfügbar ist. Außerdem sollten die im Terminal aufgeführten APIs für die API-App angezeigt werden.

    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. Wählen Sie im unteren Bereich die Registerkarte Anschlüsse aus, und klicken Sie dann mit der rechten Maustaste auf den 7071 Anschluss, und wählen Sie Anschluss-Sichtbarkeit und dann Öffentlichaus.

    Wenn Sie diese App nicht als öffentlich verfügbar machen, wird eine Fehlermeldung angezeigt, wenn Sie die API aus der Client-App verwenden.

  4. Um zu testen, dass die API funktioniert und eine Verbindung mit dem Speicher herstellt, wählen Sie auf der Registerkarte Ports im unteren Bereich das Globussymbol im Bereich lokale Adresse für Port 7071 aus. Dadurch wird ein Webbrowser für die Funktionen-App geöffnet.

  5. Fügen Sie die API-Route zur URL-Adressleiste hinzu: /api/sas?container=upload&file=test.png. Es ist ok, dass sich die Datei noch nicht im Container befindet. Die API erstellt das SAS-Token basierend auf der Position, in die sie hochgeladen werden soll.

  6. Die JSON-Antwort sollte etwa wie folgt aussehen:

    {
    "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. Kopieren Sie die Basis der API-URL in der Adressleiste des Browsers (nicht die SAS-Token-URL im JSON-Objekt), die im nächsten Schritt verwendet werden soll. Die Basis-URL ist alles vor /api/sas. Im nächsten Abschnitt fügen Sie diese Basis-URL in die Umgebungsvariablendatei der Client-App ein.

Konfigurieren und Ausführen der Client-App

  1. Benennen Sie die ./azure-upload-file-to-storage/app/.env.sample-Datei in .envum.

  2. Öffnen Sie die datei .env, und fügen Sie die Basis-URL aus dem vorherigen Abschnitt als Wert für die VITE_API_SERVERein.

    Ein Beispiel für eine Codespaces-Umgebung kann etwa aussehen wie VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev.

  3. Starten Sie die Client-App im anderen geteilten Terminal mit dem folgenden Befehl:

    npm run dev

  4. Warten Sie, bis das Terminal den folgenden Hinweis zurückgibt, dass die App am Port 5173verfügbar ist.

      VITE v4.4.4  ready in 410 ms

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

  5. Wählen Sie im unteren Bereich die Registerkarte Ports aus, und klicken Sie dann mit der rechten Maustaste auf die 5173 Port, und wählen Sie das Globussymbol aus.

  6. Die Web-App sollte angezeigt werden.

    Screenshot des Webbrowsers, der eine Web-App mit der verfügbaren Schaltfläche

  7. Interagieren Sie mit der Web-App:

    • Wählen Sie eine Bilddatei (*.jpg oder *.png) von Ihrem lokalen Computer aus, um sie hochzuladen.
    • Wählen Sie die Schaltfläche "SAS- abrufen" aus, um ein SAS-Token aus der API-App anzufordern. Die Antwort zeigt die vollständige URL an, die zum Hochladen der Datei in den Speicher verwendet werden soll.
    • Wählen Sie die Schaltfläche Hochladen aus, um die Bilddatei direkt an den Speicher zu senden.

    Screenshot des Webbrowsers, in dem die Web-App mit hochgeladener Bilddatei und einer Miniaturansicht der angezeigten Datei angezeigt wird.

  8. Die Client-App und die API-App arbeiteten erfolgreich in einer containerisierten Entwicklerumgebung zusammen.

Commit für Codeänderungen

  1. Öffnen Sie in Visual Studio Code die Registerkarte Quellcodeverwaltung.
  2. Wählen Sie das Symbol + aus, um alle Änderungen zu stufen. Diese Änderungen sollten nur neue package-lock.json Dateien für die app und api Ordner für dieses Lernprogramm enthalten.

Bereitstellen statischer Web-App in Azure

Die Azure Functions-App verwendet eine Vorschaufunktion. Er muss in der Region "USA, Westen 2 " bereitgestellt werden, um ordnungsgemäß zu funktionieren.

  1. Wählen Sie in Visual Studio Code den Azure-Explorer aus.

  2. Klicken Sie im Azure Explorer mit der rechten Maustaste auf den Abonnementnamen, und wählen Sie dann Create Resource...aus.

  3. Wählen Sie Erstellen einer Static Web App aus der Liste aus.

  4. Folgen Sie den Anweisungen mithilfe der folgenden Tabelle, um zu verstehen, wie Sie Ihre Static Web App-Ressource erstellen.

    Eigentum Wert
    Geben Sie einen global eindeutigen Namen für die neue Web-App ein. Geben Sie einen eindeutigen Wert wie fileuploadstorfür den Namen der Speicherressource ein.

    Dieser eindeutige Name ist Ihr Ressourcenname, der im nächsten Abschnitt verwendet wird. Verwenden Sie nur Zeichen und Zahlen mit einer Länge von bis zu 24 Zeichen. Sie benötigen diesen Kontonamen, um ihn später zu verwenden.
    Wählen Sie einen Speicherort für neue Ressourcen aus. Verwenden Sie den empfohlenen Speicherort.

  5. Folgen Sie den Anweisungen, um die folgenden Informationen bereitzustellen:

    Aufforderung EINGABETASTE
    Wählen Sie eine Ressourcengruppe für neue Ressourcen aus. Verwenden Sie die Ressourcengruppe, die Sie für Ihre Speicherressource erstellt haben.
    Geben Sie den Namen für die neue statische Web-App ein. Akzeptieren Sie den Standardnamen.
    SKU auswählen Wählen Sie die kostenlose SKU für dieses Lernprogramm aus. Wenn Sie bereits über eine kostenlose Static Web App-Ressource in Ihrem Abonnement verfügen, wählen Sie das nächste Preisniveau aus.
    Wählen Sie die Build-Voreinstellung aus, um die Standardprojektstruktur zu konfigurieren. Wählen Sie Benutzerdefiniert aus.
    Auswählen des Speicherorts Ihres Anwendungscodes azure-upload-file-to-storage/app
    Wählen Sie den Speicherort Ihres Azure Functions-Codes azure-upload-file-to-storage/api
    Eingeben des Pfads Ihrer Buildausgabe dist

    value ist der Pfad von Ihrer App zu Ihren statischen (generierten) Dateien.
    Wählen Sie einen Speicherort für neue Ressourcen aus. Wählen Sie eine Region in der Nähe von Ihnen aus.

  6. Wenn der Vorgang abgeschlossen ist, wird ein Popupmenü für Benachrichtigungen angezeigt. Wählen Sie View/Edit Workflow (Workflow anzeigen/bearbeiten) aus.

  7. Ihre Remote-Fork verfügt über eine neue Workflow-Datei für die Bereitstellung bei Static Web Apps. Laden Sie diese Datei mithilfe des folgenden Befehls im Terminal in Ihre Umgebung herunter.

    git pull origin main

  8. Öffnen Sie die Workflowdatei unter /.github/workflows/.

  9. Stellen Sie sicher, dass der Abschnitt des Workflows, der spezifisch für die Static Web App dieses Tutorials, wie folgt aussieht:

    ###### 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. Wechseln Sie zu Ihrem GitHub-Fork des Beispiels, https://github.com/<YOUR-ACCOUNT>/azure-typescript-e2e-apps/actions, um zu überprüfen, ob die Build- und Bereitstellungsaktion mit dem Namen Azure Static Web Apps CI/CD erfolgreich abgeschlossen wurde. Es kann einige Minuten dauern, bis dieser Vorgang abgeschlossen ist.

  11. Gehen Sie zu Ihrem Azure-Portal für Ihre App und zeigen Sie den Abschnitt APIs der Einstellungenan. Der Back-End-Ressourcenname in der Produktionsumgebung ist (managed), der angibt, dass Ihre APIs erfolgreich bereitgestellt werden.

  12. Wählen Sie (verwaltet) aus, um die Liste der in der App geladenen APIs anzuzeigen:

    • Liste
    • Sas
    • Status

  13. Wechseln Sie zur Seite "Übersicht", um die URL für Ihre bereitgestellte App zu finden.

  14. Die Bereitstellung der App ist abgeschlossen.

Konfigurieren der API mit Speicherressourcenname und Schlüssel

Die App benötigt den Azure Storage-Ressourcennamen und den Schlüssel, bevor die API ordnungsgemäß funktioniert. Bei der Bereitstellung in Azure Static Web Apps werden die Client-App und die API in derselben Domäne gehostet, sodass die Umgebungsvariable VITE_API_SERVER der Client-App nicht festgelegt werden muss.

  1. Klicken Sie im Azure Explorer mit der rechten Maustaste auf die Static Web App-Ressource, und wählen Sie Im Portal öffnen aus.

  2. Wählen Sie Konfiguration im Abschnitt Einstellungen.

  3. Fügen Sie Anwendungseinstellungen mithilfe der folgenden Tabelle hinzu.

    Eigentum Wert Beschreibung
    Azure_Storage_AccountName Name des Azure Storage-Kontos, z. B.: fileuploadstor. Wird im Quellcode verwendet, um eine Verbindung mit der Speicherressource herzustellen.
    Azure_Storage_AccountKey Azure Storage-Kontoschlüssel Wird im Quellcode verwendet, um eine Verbindung mit der Speicherressource herzustellen.

  4. Wählen Sie Speichern auf der Seite "Konfiguration" aus, um beide Einstellungen zu speichern.

Verwenden der von Azure bereitgestellten statischen Web-App

Überprüfen Sie, ob die Bereitstellung und Konfiguration erfolgreich war, indem Sie die Website verwenden.

  1. Klicken Sie in Visual Studio Code im Azure-Explorer mit der rechten Maustaste auf Ihre statische Web-App, und wählen Sie Website anzeigenaus.
  2. Wählen Sie im neuen Webbrowserfenster Datei auswählen und dann eine Bilddatei (*.png oder *.jpg) aus, um sie hochzuladen.
  3. Wählen Sie SAS-Token abrufen aus. Diese Aktion übergibt den Dateinamen an die API und empfängt die SAS-Token-URL, die zum Hochladen der Datei erforderlich ist.
  4. Wählen Sie Datei hochladen aus, um die SAS-Token-URL zum Hochladen der Datei zu verwenden. Der Browser zeigt die Miniaturansicht und URL der hochgeladenen Datei an.

Bereinigen von Ressourcen

Verwenden Sie in Visual Studio Code den Azure-Explorer für Ressourcengruppen. Klicken Sie mit der rechten Maustaste auf Ihre Ressourcengruppe, und wählen Sie dann Löschen aus.

Diese Aktion löscht alle Ressourcen in der Gruppe, einschließlich der Speicher- und statischen Web-App-Ressourcen.

Fehlerbehebung

Melden Sie Probleme mit diesem Beispiel im GitHub-Repository. Fügen Sie Folgendes dem Problem hinzu:

  • Die URL des Artikels
  • Der Schritt oder kontext im Artikel, der problematisch war
  • Ihre Entwicklungsumgebung

Beispielcode

Verwandte Inhalte