Hochladen eines Images in ein Azure Storage-Blob

  • Artikel
  • 13 Minuten Lesedauer

Verwenden Sie eine clientseitige React App, um eine Bilddatei mithilfe eines Azure Storage @azure/storage-blob-npm-Pakets in eine Azure Storage-Blob-Datei hochzuladen.

Die TypeScript-Programmieraufgaben wurden für Sie erledigt. Dieses Tutorial konzentriert sich auf die erfolgreiche Verwendung der lokalen Umgebung und der Azure-Remoteumgebungen in Visual Studio Code mit Azure-Erweiterungen.

Anwendungsarchitektur und Funktionalität

Dieser Artikel enthält mehrere wichtige Azure-Aufgaben für JavaScript-Entwickler:

  • Lokales Ausführen einer React- oder TypeScript-App mit Visual Studio Code
  • Erstellen einer Azure Storage Blob-Ressource und Konfiguration für Dateiuploads
    • Konfigurieren von CORS
    • Erstellen eines SAS-Tokens (Shared Access Signatures)
  • Konfigurieren von Code für die Azure SDK-Clientbibliothek zur Verwendung von SAS-Token für die Authentifizierung beim Dienst

Die React-Beispiel-App, die auf GitHub verfügbar ist, besteht aus den folgenden Elementen:

Simple React app connected to Azure Storage blobs.

1. Einrichten der Entwicklungsumgebung

2. Forken und Klonen der Beispielanwendung

  1. Öffnen Sie diese GitHub-Beispiel-URL in einem Webbrowser:

    https://github.com/Azure-Samples/js-e2e-browser-file-upload-storage-blob

  2. Wählen Sie Forken aus, um Ihren eigenen Fork dieses Beispielprojekts zu erstellen. Ein eigener GitHub-Fork ist erforderlich, um dieses Beispiel als statische Web-App in Azure bereitzustellen.

  3. Wählen Sie die Schaltfläche Code aus, und kopieren Sie anschließend die Klon-URL.

  4. Klonen Sie in einem Bash-Terminal Ihr geforktes Repository, und ersetzen Sie dabei REPLACE-WITH-YOUR-ACCOUNT-NAME durch den Namen Ihres GitHub-Kontos:

    git clone https://github.com/REPLACE-WITH-YOUR-ACCOUNT-NAME/js-e2e-browser-file-upload-storage-blob

  5. Ändern Sie sich in das neue Verzeichnis, und öffnen Sie Visual Studio Code.

    cd js-e2e-browser-file-upload-storage-blob && code .

3. Installieren von Abhängigkeiten und Ausführen eines lokalen Projekts

  1. Öffnen Sie in Visual Studio Code ein integriertes Bash-Terminal (STRG + UMSCHALT + `), und führen Sie den folgenden Befehl aus, um die Abhängigkeiten des Beispiels zu installieren:

    npm install

  2. Führen Sie im gleichen Terminalfenster den Befehl zum Ausführen der Web-App aus.

    npm start

  3. Öffnen Sie einen Webbrowser, und verwenden Sie die folgende URL, um die Web-App auf Ihrem lokalen Computer anzuzeigen.

    http://localhost:3000/

    Wenn die einfache Web-App in Ihrem Browser mit dem Text angezeigt wird, dass der Speicher nicht konfiguriert ist, haben Sie diesen Abschnitt des Tutorials erfolgreich durchgearbeitet.

    Simple Node.js app connected to MongoDB database.

  4. Beenden Sie den Code mit STRG + C im Visual Studio Code-Terminal.

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

  1. Navigieren Sie zur Azure Storage-Erweiterung. Klicken Sie mit der rechten Maustaste auf das Abonnement, und wählen Sie dann Create Storage Account... aus.

    Navigate to the Azure Storage extension. Right-click on the subscription then select `Create Storage Account...`.

  2. 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 Wert wie fileuploaddemo als Name der Storage-Ressource ein.

    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.

  3. Nachdem der App-Erstellungsprozess beendet wurde, wird eine Benachrichtigung mit Informationen zur neuen Ressource angezeigt.

    When the app creation process is complete, a notification appears with information about the new resource.

5. Generieren des SAS-Tokens (Shared Access Signature)

Generieren Sie das SAS-Token, bevor Sie CORS konfigurieren.

  1. Klicken Sie in der Visual Studio Code-Erweiterung für Storage mit der rechten Maustaste auf die Ressource, und wählen Sie dann Im Portal öffnen aus. Dadurch wird das Azure-Portal für Ihre Storage-Ressource geöffnet.

  2. Wählen Sie im Abschnitt Sicherheit + Netzwerkbetrieb die Option Shared Access Signature aus.

  3. Konfigurieren Sie das SAS-Token mit den folgenden Einstellungen.

    Eigenschaft Wert
    Zulässige Dienste Blob
    Zulässige Ressourcentypen Dienst, Container, Objekt
    Zulässige Berechtigungen Lesen, Schreiben, Löschen, Auflisten, Hinzufügen, Erstellen
    Berechtigungen für Blobversionsverwaltung Überprüft
    Allow blob index permissions (Blobindexberechtigungen zulassen) „Lesen/Schreiben“ und „Filtern“ müssen aktiviert sein.
    Datum/Uhrzeit für Start und Ablauf Akzeptieren Sie das Startdatum und die Uhrzeit, und legen Sie das Enddatum in 24 Stunden fest. Ihr SAS-Token ist nur 24 Stunden lang gültig.
    Nur HTTPS Ausgewählt
    Bevorzugte Routingebene Basic
    Signaturschlüssel key1 ausgewählt

    Configure the SAS token as show in the image. The settings are explained below the image.

  4. Wählen Sie SAS und Verbindungszeichenfolge generieren aus.

  5. Kopieren Sie das SAS-Token sofort. Sie können dieses Token nicht auflisten. Wenn Sie es nicht kopiert haben, müssen Sie ein neues SAS-Token generieren.

6. Festlegen von Storage-Werten in der ENV-Datei

Das SAS-Token wird verwendet, wenn Abfragen an die cloudbasierte Ressource gesendet werden.

  1. Erstellen Sie im Stammverzeichnis des Projekts eine Datei namens .env.

  2. Fügen Sie zwei erforderliche Variablen mit ihren Speicherwerten hinzu:

    REACT_APP_STORAGESASTOKEN=
REACT_APP_STORAGERESOURCENAME=

    React erstellt die statischen Dateien mit diesen Variablen.

  3. Wenn das Token mit einem Fragezeichen (?) beginnt, entfernen Sie es. Die Codedatei stellt ? für Sie bereit, sodass Sie das Fragezeichen nicht im Token benötigen.

7. Konfigurieren von CORS für die Azure Storage-Ressource

Konfigurieren Sie CORS für Ihre Ressource, damit der clientseitige React-Code auf Ihr Speicherkonto zugreifen kann.

  1. Wählen Sie im Azure-Portal im Abschnitt „Einstellungen“ die Option Resource sharing (CORS) (Ressourcenfreigabe (CORS)) aus.

  2. Konfigurieren Sie CORS für den Blob-Dienst wie in der Abbildung gezeigt. Die Einstellungen werden unter der Abbildung erläutert.

    Eigenschaft Wert
    Zulässige Ursprünge *
    Zulässige Methoden Alle außer Patch.
    Zulässige Header *
    Verfügbar gemachte Header *
    Maximales Alter 86.400

    Configure CORS as show in the image. The settings are explained below the image.

  3. Wählen Sie Speichern über den Einstellungen aus, um die Einstellung in der Ressource zu speichern. Für den Code sind keine Änderungen erforderlich, um mit diesen CORS-Einstellungen arbeiten zu können.

8. Lokales Ausführen des Projekts, um die Verbindung mit dem Storage-Konto zu bestätigen

Ihr SAS-Token und der Name des Speicherkontos werden in der Datei src/azure-storage-blob.ts festgelegt, sodass Sie bereit sind, die Anwendung auszuführen.

  1. Wird die App nicht ausgeführt, starten Sie sie erneut:

    npm start

  2. Öffnen Sie die folgende URL in einem Browser:

    http://localhost:3000

    The React website connected to Azure Storage blobs should display with a file selection button and a file upload button.

  3. Wählen Sie ein Bild aus dem images Ordner aus, um sie hochzuladen, und wählen Sie dann die Schaltfläche Hochladen! aus.

  4. Der React-Clientcode des Front-Ends ruft ./src/azure-storage-blob.ts zur Authentifizierung bei Azure auf, erstellt dann einen Speichercontainer (falls noch nicht vorhanden) und lädt die Datei in diesen Container hoch.

9. Bereitstellen einer statischen Web-App in Azure

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

  2. Wenn ein Popupfenster angezeigt wird, in dem Sie aufgefordert werden, Ihre Änderungen zu committen, tun Sie dies nicht. Das Beispiel sollte ohne Änderungen bereitgestellt werden können.

    Wenn Sie die Änderungen zurücksetzen möchten, wählen Sie in Visual Studio Code auf der Aktivitätsleiste das Symbol Quellcodeverwaltung aus. Wählen Sie dann in der Liste Änderungen die einzelnen geänderten Dateien und anschließend das Symbol Änderungen verwerfen aus.

  3. Klicken Sie mit der rechten Maustaste auf den Abonnementnamen, und wählen Sie anschließend Create Static Web App (Advanced) (Statische Web-App erstellen (erweitert)) aus.

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

    Prompt EINGABETASTE
    Enter the name for the new Static Web App. (Geben Sie den Namen für die neue statische Web-App ein.) Erstellen Sie einen eindeutigen Namen für Ihre Ressource. Dazu können Sie etwa dem Repositorynamen Ihren eigenen Namen voranstellen (Beispiel: upload-file-to-storage).
    „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.
    SKU auswählen Wählen Sie für dieses Tutorial die kostenlose SKU aus. Wenn Sie bereits über eine kostenlose statische Web-App-Ressource verfügen, wählen Sie den nächsten Tarif aus.
    „Choose build preset to configure default project structure.“ (Wählen Sie eine Buildvoreinstellung aus, um die Standardprojektstruktur zu konfigurieren.) Wählen Sie React aus.
    „Select the location of your application code“ (Wählen Sie den Speicherort Ihres Anwendungscodes aus.) /: Gibt an, dass sich die Datei „package.json“ im Stammverzeichnis des Repositorys befindet.
    Wählen Sie den Speicherort Ihres Azure Functions-Codes aus. Übernehmen Sie den Standardwert. In diesem Beispiel wird zwar keine API verwendet, Sie können aber später eine hinzufügen.
    „Enter the path of your build output...“ (Geben Sie den Pfad Ihrer Buildausgabe ein...) build

    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.

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

    Partial screenshot of Visual Studio Code notification pop-up with View/Edit Workflow button highlighted.

10. Hinzufügen von Azure Storage-Geheimnissen zu GitHub-Geheimnissen

  1. Kehren Sie in einem Webbrowser zu Ihrem GitHub-Fork des Beispielprojekts zurück, um die beiden Geheimnisse und ihre Werte hinzuzufügen:

    https://github.com/YOUR-GITHUB-ACCOUNT/js-e2e-browser-file-upload-storage-blob/settings/secrets/actions

    Screenshot of a web browser displaying https://github.com, on the Settings -> Secrets page, with the New repository secret button highlighted.

11. Konfigurieren der statischen Web-App zum Herstellen einer Verbindung mit einer Speicherressource

Bearbeiten Sie den GitHub-Workflow und die Geheimnisse, um eine Verbindung mit Azure Storage herzustellen.

  1. Öffnen Sie in Visual Studio Code die YAML-Workflowdatei .github/workflows, und fügen Sie die beiden Speicherumgebungsvariablen nach dem Abschnitt with zu build_and_deploy_job hinzu.

    jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123456 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### 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: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
            REACT_APP_STORAGESASTOKEN: ${{secrets.REACT_APP_STORAGESASTOKEN}}
            REACT_APP_STORAGERESOURCENAME: ${{secrets.REACT_APP_STORAGERESOURCENAME}}

    Dadurch werden die Geheimnisse in den Buildprozess gepullt.

  2. Wählen Sie in Visual Studio Code „Quellcodeverwaltung“ (STRG + UMSCHALT + G) und dann das Symbol zum Hinzufügen aus, um die geänderte YML-Datei hinzuzufügen.

  3. Geben Sie einen Kommentar für Ihren Commit ein, z. B. Adding Storage secrets.

  4. Pushen Sie in Ihren GitHub-Fork, indem Sie auf der Statusleiste das Symbol Änderungen synchronisieren auswählen.

    Partial screenshot of Visual Studio Code status bar.

  5. Wählen Sie im Popupfenster, in dem Sie das Pushen und Pullen in Ihr bzw. aus Ihrem Remoterepository bestätigen müssen, die Option OK aus.

    Wenn bei diesem Schritt ein Fehler auftritt, überprüfen Sie Ihr Git-Remoterepository, um sicherzustellen, dass Sie Ihren Fork geklont haben: git remote -v.

  6. Dieser Push löst einen neuen Build und seine Bereitstellung für Ihre statische Web-App aus.

12. Überprüfen, ob der Build- und Bereitstellungsauftrag abgeschlossen ist

  1. Kehren Sie in einem Webbrowser zu Ihrem GitHub-Fork des Beispielprojekts zurück.

  2. Wählen Sie Aktionen und anschließen die Aktion Azure Static Web Apps CI/CD aus.

  3. Wählen Sie „Build and Deploy Job“ (Auftrag zum Erstellen und Bereitstellen) aus, um den Abschluss des Prozesses zu verfolgen.

    Screenshot of web browser showing GitHub action success

13. Verwenden der von Azure bereitgestellten statischen Web-App

  1. Klicken Sie in Visual Studio Code in Azure Explorer mit der rechten Maustaste auf Ihre statische Web-App, und wählen Sie

    Partial screenshot selecting Browse Site from the Azure Static web site.

  2. Wählen Sie im neuen Webbrowserfenster eine Datei aus, und laden Sie die Datei hoch.

Beheben von Problemen mit einer lokalen Verbindung mit einem Storage-Konto

Wenn Sie einen Fehler erhalten haben oder die Datei nicht in den Container hochgeladen wird, überprüfen Sie Folgendes:

  • Erstellen Sie Ihr SAS-Token neu. Stellen Sie dabei sicher, dass das Token auf der Speicherressourcenebene und nicht auf der Containerebene erstellt wird. Kopieren Sie das neue Token an der richtigen Stelle in den Code.
  • Stellen Sie sicher, das die in den Code kopierte Tokenzeichenfolge nicht mit einem Fragezeichen (?) beginnt.
  • Überprüfen Sie die CORS-Einstellung für Ihre Speicherressource.

Funktionalität der Schaltfläche „Hochladen“

Die TypeScript-Datei src/App.tsx wird als Teil der App-Erstellung mit create-reag-app bereitgestellt. Die Datei wurde geändert, um eine Schaltfläche für die Dateiauswahl und eine Schaltfläche für den Upload sowie den unterstützenden Code zur Bereitstellung dieser Funktionalität bereitzustellen.

Der Code, mit dem eine Verbindung mit dem Azure Blob Storage-Code hergestellt wird, ist hervorgehoben. Der Aufruf von uploadFileToBlob gibt alle Blobs (Dateien) im Container als unformatierte Liste zurück. Diese Liste wird mit der DisplayImagesFromContainer-Funktion angezeigt.

// ./src/App.tsx

import React, { useState } from 'react';
import Path from 'path';
import uploadFileToBlob, { isStorageConfigured } from './azure-storage-blob';

const storageConfigured = isStorageConfigured();

const App = (): JSX.Element => {
  // all blobs in container
  const [blobList, setBlobList] = useState<string[]>([]);

  // current file to upload into container
  const [fileSelected, setFileSelected] = useState(null);

  // UI/form management
  const [uploading, setUploading] = useState(false);
  const [inputKey, setInputKey] = useState(Math.random().toString(36));

  const onFileChange = (event: any) => {
    // capture file into state
    setFileSelected(event.target.files[0]);
  };

  const onFileUpload = async () => {
    // prepare UI
    setUploading(true);

    // *** UPLOAD TO AZURE STORAGE ***
    const blobsInContainer: string[] = await uploadFileToBlob(fileSelected);

    // prepare UI for results
    setBlobList(blobsInContainer);

    // reset state/form
    setFileSelected(null);
    setUploading(false);
    setInputKey(Math.random().toString(36));
  };

  // display form
  const DisplayForm = () => (
    <div>
      <input type="file" onChange={onFileChange} key={inputKey || ''} />
      <button type="submit" onClick={onFileUpload}>
        Upload!
          </button>
    </div>
  )

  // display file name and image
  const DisplayImagesFromContainer = () => (
    <div>
      <h2>Container items</h2>
      <ul>
        {blobList.map((item) => {
          return (
            <li key={item}>
              <div>
                {Path.basename(item)}
                <br />
                <img src={item} alt={item} height="200" />
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );

  return (
    <div>
      <h1>Upload file to Azure Blob Storage</h1>
      {storageConfigured && !uploading && DisplayForm()}
      {storageConfigured && uploading && <div>Uploading</div>}
      <hr />
      {storageConfigured && blobList.length > 0 && DisplayImagesFromContainer()}
      {!storageConfigured && <div>Storage is not configured.</div>}
    </div>
  );
};

export default App;

Hochladen einer Datei in Azure Storage-Blob mit der Azure SDK-Clientbibliothek

Der Code zum Hochladen der Datei in Azure Storage ist frameworkagnostisch. Da der Code für ein Tutorial erstellt wird, wird auf Einfachheit und Verständlichkeit geachtet. Diese Entscheidungen werden erläutert. Sie sollten Ihr eigenes Projekt auf beabsichtigte Nutzung, Sicherheit und Effizienz überprüfen.

Das Beispiel erstellt und verwendet einen öffentlich zugänglichen Container und Dateien. Wenn Sie Dateien in Ihrem eigenen Projekt sichern möchten, stehen Ihnen viele Ebenen zur Verfügung, auf denen Sie dies steuern können, vom Erfordernis einer allgemeinen Authentifizierung für Ihre Ressource bis hin zu sehr spezifischen Berechtigungen für jedes Blobobjekt.

Abhängigkeiten und Variablen

Die TypeScript-Datei azure-storage-blob.ts lädt die Abhängigkeiten und pullt die erforderlichen Variablen durch Umgebungsvariablen oder hartcodierte Zeichenfolgen.

Variable Beschreibung
sasToken Dem mit dem Azure-Portal erstellten SAS-Token wird ein ? vorangestellt. Entfernen Sie dieses, bevor Sie es in der sasToken-Variablen festlegen.
container Der Name des Containers im Blobspeicher. Sie können sich diesen als äquivalent zu einem Ordner oder Verzeichnis für ein Dateisystem vorstellen.
storageAccountName Der Name Ihrer Ressource. 
// THIS IS SAMPLE CODE ONLY - NOT MEANT FOR PRODUCTION USE
import { BlobServiceClient, ContainerClient} from '@azure/storage-blob';

const containerName = `tutorial-container`;
const sasToken = process.env.REACT_APP_STORAGESASTOKEN;
const storageAccountName = process.env.REACT_APP_STORAGERESOURCENAME;

Erstellen des Storage-Clients und Verwaltungsschritte

Die uploadFileToBlob-Funktion ist die Hauptfunktion der Datei. Sie erstellt das Clientobjekt für den Storage-Dienst, erstellt dann den Client für das Containerobjekt, lädt die Datei hoch und ruft dann eine Liste aller Blobs im Container ab.

const uploadFileToBlob = async (file: File | null): Promise<string[]> => {
  if (!file) return [];

  // get BlobService = notice `?` is pulled out of sasToken - if created in Azure portal
  const blobService = new BlobServiceClient(
    `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`
  );

  // get Container - full public read access
  const containerClient: ContainerClient = blobService.getContainerClient(containerName);
  await containerClient.createIfNotExists({
    access: 'container',
  });

  // upload file
  await createBlobInContainer(containerClient, file);

  // get list of blobs in container
  return getBlobsInContainer(containerClient);
};

Hochladen der Datei in das Blob

Die Funktion createBlobInContainer lädt die Datei mithilfe der BlockBlobClient-Klasse und der uploadData-Methode in den Container hoch. Der Inhaltstyp muss mit der Anforderung gesendet werden, wenn Sie beabsichtigen, Browserfunktionen zu verwenden, die vom Dateityp abhängen, z. B. das Anzeigen eines Bilds.

const createBlobInContainer = async (containerClient: ContainerClient, file: File) => {
  
  // create blobClient for container
  const blobClient = containerClient.getBlockBlobClient(file.name);

  // set mimetype as determined from browser with file upload control
  const options = { blobHTTPHeaders: { blobContentType: file.type } };

  // upload file
  await blobClient.uploadData(file, options);
}

Abrufen einer Liste von Blobs

Die Funktion getBlobsInContainer ruft mithilfe der ContainerClient-Klasse und der listBlobsFlat-Methode eine Liste von URLs für die Blobs im Container ab. Die URLs werden erstellt, um als src einer Bildanzeige in HTML verwendet zu werden: <img src={item} alt={item} height="200" />.

// return list of blobs in container to display
const getBlobsInContainer = async (containerClient: ContainerClient) => {
  const returnedBlobUrls: string[] = [];

  // get list of blobs in container
  // eslint-disable-next-line
  for await (const blob of containerClient.listBlobsFlat()) {
    // if image is public, just construct URL
    returnedBlobUrls.push(
      `https://${storageAccountName}.blob.core.windows.net/${containerName}/${blob.name}`
    );
  }

  return returnedBlobUrls;
}

Bereinigen von Ressourcen

Verwenden Sie in Visual Studio Code Azure Explorer für Ressourcengruppen, klicken Sie mit der rechten Maustaste auf die 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.

Nächste Schritte

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: