Hochladen eines Bilds in ein Azure Storage-Blob mit JavaScript

  • Artikel

Verwenden Sie eine statische Web-App, um eine Datei in ein Azure Storage-Blob hochzuladen, indem Sie ein Azure Storage @azure/storage-blob npm-Paket mit einem Azure Storage SAS-Token verwenden.

Voraussetzungen

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

Anwendungsarchitektur

Diese Anwendungsarchitektur umfasst zwei Azure-Ressourcen:

  • Azure Static Web-Apps für die statisch generierte Clientanwendung. Die Ressource stellt auch die verwaltete Azure Functions-API bereit. Verwaltet bedeutet, dass die statische Web-Apps Ressource die API-Ressource für die eigene Verwendung verwaltet.
  • Azure Storage für den BLOB-Speicher.

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

Schritt Beschreibung
1 Der Kunde stellt eine Verbindung mit der statisch generierten Website dar. Die Website wird in Azure Static Web-Apps gehostet.
2 Der Kunde verwendet diese Website, um eine Datei auszuwählen, die hochgeladen werden soll. Für dieses Lernprogramm ist das Front-End-Framework Vite React und die hochgeladene Datei eine Bilddatei.
3 Die Website ruft die Azure Functions-APIsas 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 Storage hochzuladen.

Lokale und Buildumgebungen

In diesem Lernprogramm werden die folgenden Umgebungen verwendet:

  • Lokale Entwicklung mit GitHub Codespaces oder Visual Studio Code.
  • Erstellen und Bereitstellen mit GitHub-Aktionen.

1. 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 eine Verzweigung des Beispielanwendungs-Repositorys, um diese Bereitstellung abzuschließen.

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

2. 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 Web als Benutzeroberfläche aus. Für eine möglichst unkomplizierte Entwicklungsumgebung verwenden Sie GitHub Codespaces. Hiermit sind die benötigten Entwicklertools und Abhängigkeiten vorinstalliert, mit denen Sie dieses Schulungsmodul absolvieren können.

Wichtig

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

  1. Starten Sie in einem Webbrowser auf Ihrer GitHub-Verzweigung des Beispiel-Repositorys den Prozess, um einen neuen GitHub Codespace auf der main Verzweigung Ihrer Verzweigung zu erstellen, indem Sie die Schaltfläche "CODE " auswählen.

    GitHub screenshot of Code Spaces buttons for a repository.

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

    GitHub screenshot of Code Spaces tab with ellipsis control highlighted.

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

    GitHub screenshot of Codespaces New with options menu item highlighted.

  4. Wählen Sie die folgenden Optionen aus, und wählen Sie dann "Codespace erstellen" aus.

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

    GitHub screenshot of Codespaces New with options menu with the following dev container highlighted, Tutorial: Upload file to storage with SAS Token.

  5. Warten Sie den Start des Codespaces ab. Dieser Startvorgang kann einige Minuten dauern.

  6. Öffnen Sie ein neues Terminal im Codespace.

    Tipp

    Sie können das Hauptmenü verwenden, um zur Menüoption Terminal zu navigieren und dann die Option Neues Terminal auszuwählen.

    Screenshot of the codespaces menu option to open a new terminal.

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

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

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

    Tool Version
    Node.js ≥ 18
    npm ≥ 9.5
    Azure Functions-Kerntools ≥ 4.5098

  8. Schließen Sie das Terminal.

  9. Die verbleibenden Schritte in diesem Tutorial werden im Kontext dieses Entwicklungscontainers ausgeführt.

3. Installieren von Abhängigkeiten

Die Beispiel-App für dieses Lernprogramm befindet sich im azure-upload-file-to-storage Ordner. 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-App zu installieren.

    cd app && npm install

4. Erstellen einer Storage-Ressource mit der Visual Studio-Erweiterung

Erstellen Sie die Speicherressource, die mit der Beispiel-App verwendet werden soll. Der 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 of Visual Studio Code in the Azure Explorer with the right-click menu showing the Create Resource item highlighted.

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

  5. Befolgen Sie die Anweisungen anhand der folgenden Tabelle, um zu verstehen, wie die Storage-Ressource erstellt wird.

    Eigenschaft Wert
    Geben Sie einen global eindeutigen Namen für die neue Web-App ein. Geben Sie einen eindeutigen Wert ein, z fileuploadstor. B. für den Namen der Speicherressource.

    Dieser eindeutige Name ist Ihr Ressourcenname, der im nächsten Abschnitt verwendet wird. Verwenden Sie nur Zeichen und Zahlen (maximal 24 Zeichen). Dieser Kontoname ist in einem späteren Schritt erforderlich.
    Wählen Sie einen Standort für neue Ressourcen aus. Verwenden Sie den empfohlenen Speicherort.

  6. Nachdem der App-Erstellungsprozess abgeschlossen ist, wird eine Benachrichtigung mit Informationen zur neuen Ressource angezeigt.

    Screenshot of Visual Studio Code showing the Azure Activity Bar and the notification that the storage account was successfully created.

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

  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 Azure-Portal Speicherkontos Einstellungen die Option Ressourcenfreigabe (RESOURCE Sharing, 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 Kopfzeilen: *
    • Max. Alter: 86400

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

  4. Wählen Sie Speichern.

6. Anonymen Zugriff auf Speicher gewähren

Der Dateiupload wird vom Client gesichert, wenn Sie ein zeitlich begrenztes und eingeschränktes SAS-Token erstellen. Sobald die Datei jedoch hochgeladen wurde, soll in diesem Lernprogrammszenario jeder die Datei sehen. Dazu müssen Sie die Speicherberechtigung so ändern, dass sie öffentlich zugänglich ist.

Obwohl das Konto öffentlich zugänglich ist, kann jeder Container und jeder Blob über privaten Zugriff verfügen. Eine sicherere Methode, aber zu kompliziert für dieses Lernprogramm besteht darin, ein Speicherkonto mit dem SAS-Token hochzuladen und dann das Blob mit öffentlichem Zugriff auf ein anderes Speicherkonto zu verschieben.

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

7. Erstellen eines Uploadcontainers

  1. Wählen Sie im Azure-Portal Speicherkonto im Abschnitt "Datenspeicher" die Option "Container" aus.

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

    • Name: upload
    • Öffentliche Zugriffsstufe: Blob

  3. Klicken Sie auf Erstellen.

8. Gewähren Des Blob-Datenzugriffs

Während Sie die Ressource erstellt haben, verfügen Sie nicht über die Berechtigung zum Anzeigen des Inhalts des Containers. Dies 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 weiterhin im Azure-Portal Speicherkonto die Zugriffssteuerung (IAM) aus.
  2. Wählen Sie Rollenzuweisung hinzufügen aus.
  3. Suchen Und wählen Sie "Storage Blob Data Contributor" aus. Wählen Sie Weiter aus.
  4. Wählen Sie + Mitglieder auswählen aus.
  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 Uploadcontainer aus. Sie sollten sehen können, dass im Container keine Blobs ohne Autorisierungsfehler vorhanden sind.

9. Abrufen von Anmeldeinformationen 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 weiterhin im Azure-Portal im Abschnitt "Sicherheit + Netzwerk" die Zugriffstasten aus.

  2. Denken Sie daran, dass die API-Dateien unter ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apigefunden werden.

  3. Benennen Sie die Datei im API-Ordner in .local.settings.jsonlocal.settings.json.sample Die Datei wird von Git ignoriert, sodass sie nicht in die Quellcodeverwaltung eingecheckt wird.

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

    Eigenschaft 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 Azure Storage-Konto Verbindungszeichenfolge Wird von Der Azure Functions-Laufzeit zum Speichern des Zustands und der Protokolle verwendet.

Möglicherweise haben Sie zweimal die gleichen Kontoanmeldeinformationen eingegeben, einmal als Schlüssel und einmal als Verbindungszeichenfolge. Sie haben das gemacht, aber speziell für dieses einfache Lernprogramm. 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 nur die werte Azure_Storage_AccountName und Azure_Storage_AccountKey festlegen, die im Quellcode verwendet werden.

10. 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 "Ports" aus, und klicken Sie dann mit der rechten Maustaste auf den Port 7071, und wählen Sie "Portsichtbarkeit" und dann "Öffentlich" aus.

    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, bevor /api/sas.

11. Konfigurieren und Ausführen der Client-App

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

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

    Ein Beispiel für eine Codespaces-Umgebung kann etwa wie folgt aussehen: 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 Folgendes zurückgibt, dass die App am Port 5173 verfü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 den Port 5173, und wählen Sie das Globussymbol aus.

  6. Die einfache Web-App sollte angezeigt werden.

    Screenshot of web browser showing web app with Select File button available.

  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 of web browser showing web app with the image file uploaded and a thumbnail of the file displayed.

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

12. Übernehmen von 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.

13. Bereitstellen statischer Web-App in Azure

Die Azure Functions-App verwendet ein Vorschaufeature, es muss für West US 2 bereitgestellt werden, um ordnungsgemäß zu funktionieren.

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

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

  3. Wählen Sie in der Liste "Statische Web App erstellen" aus.

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

    Eigenschaft Wert
    Geben Sie einen global eindeutigen Namen für die neue Web-App ein. Geben Sie einen eindeutigen Wert ein, z fileuploadstor. B. für den Namen der Speicherressource.

    Dieser eindeutige Name ist Ihr Ressourcenname, der im nächsten Abschnitt verwendet wird. Verwenden Sie nur Zeichen und Zahlen (maximal 24 Zeichen). Dieser Kontoname ist in einem späteren Schritt erforderlich.
    Wählen Sie einen Standort für neue Ressourcen aus. Verwenden Sie den empfohlenen Speicherort.

  5. Geben Sie gemäß der Eingabeaufforderungen die folgenden Informationen an:

    Prompt EINGABETASTE
    „Select a resource group for new resources.“ (Wählen Sie eine Ressourcengruppe für neue Ressourcen aus.) Verwenden Sie die Ressourcengruppe, die Sie für Ihre Speicherressource erstellt haben.
    Enter the name for the new Static Web App. (Geben Sie den Namen für die neue statische Web-App ein.) Übernehmen Sie den Standardnamen.
    Auswählen einer SKU Wählen Sie für dieses Tutorial die kostenlose SKU 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 "Buildvoreinstellung" aus, um die Standardprojektstruktur zu konfigurieren. Wählen Sie Benutzerdefiniert aus.
    Auswählen des Speicherorts des Anwendungscodes azure-upload-file-to-storage/app
    Wählen Sie den Speicherort Ihres Azure Functions-Codes aus. azure-upload-file-to-storage/api
    Geben Sie den Pfad der Buildausgabe ein... dist

    Dies ist der Pfad von Ihrer App zu Ihren statischen (generierten) Dateien.
    „Select a location for new resources.“ (Wählen Sie einen Standort für neue Ressourcen aus.) Wählen Sie eine Region in Ihrer Nähe aus.

  6. Wenn der Prozess abgeschlossen ist, wird ein Benachrichtigungspopupfenster angezeigt. Wählen Sie View/Edit Workflow (Workflow anzeigen/bearbeiten) aus.

  7. Ihre Remote-Verzweigung verfügt über eine neue Workflowdatei für die Bereitstellung in statischen Web-Apps. Ziehen Sie diese Datei mit dem folgenden Befehl im Terminal in Ihre Umgebung nach unten:

    git pull origin main

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

  9. Überprüfen Sie, ob der Abschnitt des Workflows, der für die statische Web-App dieses Lernprogramms spezifisch ist, wie folgt aussehen sollte:

    ###### 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 Ihrer GitHub-Verzweigung des Beispiels, https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions um die Build- und Bereitstellungsaktion mit dem Namen Azure Static Web Apps CI/CD"Erfolgreich abgeschlossen" zu überprüfen. Dies kann einige Minuten in Anspruch nehmen.

  11. Wechseln Sie zu Ihren Azure-Portal für Ihre App, und zeigen Sie den APIs-Abschnitt von Einstellungen an. Der Back-End-Ressourcenname in der Produktionsumgebung gibt (managed) an, dass Ihre APIs erfolgreich bereitgestellt wurden.

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

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

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

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

  2. Wählen Sie im Abschnitt "Einstellungen" die Option "Konfiguration" aus.

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

    Eigenschaft 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 auf der Seite "Konfiguration" die Option "Speichern" aus, um beide Einstellungen zu speichern.

Hinweis

Sie müssen die env-Variable der Client-App nicht VITE_API_SERVER festlegen, da die Client-App und die API in derselben Do gehostet werden Standard.

15. 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 durchsuchen" aus.
  2. Wählen Sie im neuen Webbrowserfenster die Option "Datei auswählen" und dann eine Bilddatei (*.png oder *.jpg) aus, die hochgeladen werden soll.
  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.

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

Dadurch werden alle Ressourcen in der Gruppe gelöscht, einschließlich der Storage- und statischen Web-App-Ressourcen.

Problembehandlung

Melden Sie Probleme mit diesem Beispiel im unten aufgeführten GitHub-Repository. Schließen Sie Folgendes mit dem Problem ein:

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

Beispielcode

Zugehöriger Inhalt

Wenn Sie mit dieser App fortfahren möchten, informieren Sie sich darüber, wie Sie die App zum Hosten mit einer der folgenden Optionen in Azure bereitstellen: