Przekazywanie obrazu do obiektu blob usługi Azure Storage przy użyciu języka JavaScript

  • Artykuł

Użyj statycznej aplikacji internetowej, aby przekazać plik do obiektu blob usługi Azure Storage przy użyciu pakietu npm usługi Azure Storage @azure/storage-blob z tokenem SAS usługi Azure Storage.

Wymagania wstępne

  • Subskrypcja platformy Azure. Jeśli nie masz jeszcze subskrypcji platformy Azure, możesz utworzyć bezpłatne konto.
  • Konto usługi GitHub do rozwidlenia i wypychania do repozytorium.

Architektura aplikacji

Ta architektura aplikacji obejmuje dwa zasoby platformy Azure:

  • Usługa Azure Static Web Apps dla statycznie wygenerowanej aplikacji klienckiej. Zasób udostępnia również zarządzany interfejs API usługi Azure Functions. Zarządzane oznacza, że zasób usługi Static Web Apps zarządza zasobem interfejsu API na własny użytek.
  • Usługa Azure Storage dla magazynu obiektów blob.

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

Krok opis
1 Klient łączy się ze statycznie wygenerowaną witryną internetową. Witryna internetowa jest hostowana w usłudze Azure Static Web Apps.
2 Klient korzysta z tej witryny internetowej, aby wybrać plik do przekazania. W tym samouczku platforma frontonu to Vite React , a przekazany plik jest plikiem obrazu.
3 Witryna internetowa wywołuje interfejs API sas usługi Azure Functions, aby uzyskać token SAS na podstawie dokładnej nazwy pliku do przekazania. Interfejs API bezserwerowy używa zestawu SDK usługi Azure Blob Storage do utworzenia tokenu SAS. Interfejs API zwraca pełny adres URL do przekazania pliku, który zawiera token SAS jako ciąg zapytania.
https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN
100 Witryna internetowa frontonu używa adresu URL tokenu SAS do przekazania pliku bezpośrednio do usługi Azure Blob Storage.

Środowiska lokalne i kompilacji

W tym samouczku są używane następujące środowiska:

  • Programowanie lokalne za pomocą usług GitHub Codespaces lub Visual Studio Code.
  • Kompilowanie i wdrażanie za pomocą funkcji GitHub Actions.

1. Przykładowe repozytorium aplikacji rozwidlenia za pomocą usługi GitHub

W tym samouczku do wdrożenia przykładowej aplikacji na platformie Azure są używane akcje Usługi GitHub. Do ukończenia tego wdrożenia potrzebne jest konto usługi GitHub i rozwidlenie przykładowego repozytorium aplikacji.

  1. W przeglądarce internetowej użyj następującego linku, aby rozpocząć rozwidlenie dla własnego konta przykładowego repozytorium: Azure-Samples/azure-typescript-e2e-apps.
  2. Wykonaj kroki rozwidlenia przykładu tylko z gałęzią główną .

2. Konfigurowanie środowiska deweloperskiego

Środowisko kontenera deweloperskiego jest dostępne ze wszystkimi zależnościami wymaganymi do wykonania każdego ćwiczenia w tym projekcie. Kontener deweloperski można uruchomić w usłudze GitHub Codespaces lub lokalnie przy użyciu programu Visual Studio Code.

Usługa GitHub Codespaces uruchamia kontener deweloperski zarządzany przez usługę GitHub za pomocą programu Visual Studio Code dla sieci Web jako interfejsu użytkownika. W przypadku najprostszego środowiska programistycznego użyj usługi GitHub Codespaces, aby mieć wstępnie zainstalowane odpowiednie narzędzia deweloperskie i zależności, aby ukończyć ten moduł szkoleniowy.

Ważne

Wszystkie konta usługi GitHub mogą korzystać z usługi Codespaces przez maksymalnie 60 godzin bezpłatnych każdego miesiąca z 2 podstawowymi wystąpieniami. Aby uzyskać więcej informacji, zobacz GitHub Codespaces monthly included storage and core hours (Miesięczne miejsca do magazynowania i godzin rdzeni usługi GitHub Codespaces).

  1. W przeglądarce internetowej w rozwidleniu usługi GitHub przykładowego repozytorium uruchom proces tworzenia nowego repozytorium GitHub Codespace w main gałęzi rozwidlenia, wybierając przycisk KOD .

    GitHub screenshot of Code Spaces buttons for a repository.

  2. Na karcie Codespaces wybierz wielokropek . ...

    GitHub screenshot of Code Spaces tab with ellipsis control highlighted.

  3. Wybierz pozycję + Nowy z opcjami , aby wybrać określony kontener deweloperski Codespaces.

    GitHub screenshot of Codespaces New with options menu item highlighted.

  4. Wybierz następujące opcje, a następnie wybierz pozycję Utwórz przestrzeń kodu.

    • Oddział: main
    • Konfiguracja kontenera deweloperskiego: Tutorial: Upload file to storage with SAS Token
    • Region: zaakceptuj wartość domyślną
    • Typ maszyny: zaakceptuj wartość domyślną

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

  5. Poczekaj na uruchomienie przestrzeni kodu. Ten proces uruchamiania może potrwać kilka minut.

  6. Otwórz nowy terminal w przestrzeni kodu.

    Napiwek

    Możesz użyć menu głównego, aby przejść do opcji menu Terminal, a następnie wybrać opcję Nowy terminal .

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

  7. Sprawdź wersje narzędzi używanych w tym samouczku.

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

    Ten samouczek wymaga następujących wersji każdego narzędzia, które są wstępnie zainstalowane w danym środowisku:

    Narzędzie Wersja
    Node.js ≥ 18
    npm ≥ 9.5
    Podstawowe narzędzia usługi Azure Functions ≥ 4.5098

  8. Zamknij terminal.

  9. Pozostałe kroki opisane w tym samouczku mają miejsce w kontekście tego kontenera deweloperskiego.

3. Instalowanie zależności

Przykładowa aplikacja dla tego samouczka znajduje się w folderze azure-upload-file-to-storage . W projekcie nie trzeba używać żadnych innych folderów.

  1. W programie Visual Studio Code otwórz terminal i przejdź do folderu projektu.

    cd azure-upload-file-to-storage

  2. Podziel terminal, aby mieć dwa terminale— jeden dla aplikacji klienckiej i jeden dla aplikacji interfejsu API.

  3. W jednym z terminali uruchom następujące polecenie, aby zainstalować zależności aplikacji interfejsu API i uruchomić aplikację.

    cd api && npm install

  4. W innym terminalu uruchom polecenie , aby zainstalować aplikację kliencka.

    cd app && npm install

4. Tworzenie zasobu magazynu za pomocą rozszerzenia programu Visual Studio

Utwórz zasób usługi Storage do użycia z przykładową aplikacją. Zastosowania magazynu:

  • Wyzwalacze w aplikacji usługi Azure Functions
  • Magazyn obiektów blob (plików)

  1. Przejdź do rozszerzenia usługi Azure Storage.

  2. W razie potrzeby zaloguj się do platformy Azure.

  3. Kliknij prawym przyciskiem myszy subskrypcję, a następnie wybierz pozycję Create Resource....

    Screenshot of Visual Studio Code in the Azure Explorer with the right-click menu showing the Create Resource item highlighted.

  4. Wybierz pozycję Utwórz konto magazynu z listy.

  5. Postępuj zgodnie z instrukcjami w poniższej tabeli, aby dowiedzieć się, jak utworzyć zasób usługi Storage.

    Właściwości Wartość
    Wprowadź globalnie unikatową nazwę nowej aplikacji internetowej. Wprowadź unikatową wartość, taką jak fileuploadstor, jako nazwę zasobu usługi Storage.

    Ta unikatowa nazwa to nazwa zasobu używana w następnej sekcji. Używaj tylko znaków i cyfr o długości do 24. Ta nazwa konta jest potrzebna do późniejszego użycia.
    Wybierz lokalizację nowych zasobów. Użyj zalecanej lokalizacji.

  6. Po zakończeniu procesu tworzenia aplikacji zostanie wyświetlone powiadomienie z informacjami o nowym zasobie.

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

5. Konfigurowanie mechanizmu CORS magazynu

Ponieważ przeglądarka jest używana do przekazywania pliku, konto usługi Azure Storage musi skonfigurować mechanizm CORS w celu zezwalania na żądania między źródłami.

  1. Przejdź do rozszerzenia usługi Azure Storage. Kliknij prawym przyciskiem myszy zasób magazynu i wybierz polecenie Otwórz w portalu.

  2. W sekcji Ustawienia konta magazynu w witrynie Azure Portal wybierz pozycję Udostępnianie zasobów (CORS).

  3. Użyj następujących właściwości, aby ustawić mechanizm CORS na potrzeby tego samouczka.

    • Dozwolone źródła: *
    • Dozwolone metody: wszystkie z wyjątkiem poprawki
    • Dozwolone nagłówki: *
    • Uwidocznione nagłówki: *
    • Maksymalny wiek: 86400

    Te ustawienia są używane w tym samouczku w celu uproszczenia kroków i nie są przeznaczone do wskazywania najlepszych rozwiązań ani zabezpieczeń. Dowiedz się więcej o mechanizmie CORS dla usługi Azure Storage.

  4. Wybierz pozycję Zapisz.

6. Udzielanie anonimowego dostępu do magazynu

Przekazywanie pliku jest zabezpieczone przed klientem podczas tworzenia tokenu SAS ograniczonego czasowo i ograniczonego uprawnieniami. Jednak po przekazaniu pliku w tym scenariuszu samouczka chcesz, aby każdy mógł go zobaczyć. Aby to zrobić, musisz zmienić uprawnienie magazynu, aby było publicznie dostępne.

Mimo że konto jest publicznie dostępne, każdy kontener i każdy obiekt blob może mieć dostęp prywatny. Bardziej bezpieczna metoda, ale zbyt skomplikowana w tym samouczku jest przekazanie do jednego konta magazynu przy użyciu tokenu SAS, a następnie przeniesienie obiektu blob do innego konta magazynu z dostępem publicznym.

  1. Aby włączyć dostęp publiczny w witrynie Azure Portal, wybierz stronę Przegląd konta magazynu, w sekcji Właściwości wybierz pozycję Dostęp anonimowy obiektu blob, a następnie wybierz pozycję Wyłączone.
  2. Na stronie Konfiguracja włącz opcję Zezwalaj na dostęp anonimowy obiektu blob.

7. Tworzenie kontenera przekazywania

  1. Nadal na koncie magazynu w witrynie Azure Portal w sekcji Magazyn danych wybierz pozycję Kontenery.

  2. Wybierz pozycję + Kontener , aby utworzyć upload kontener przy użyciu następujących ustawień:

    • Nazwa: upload
    • Poziom dostępu publicznego: Blob

  3. Wybierz pozycję Utwórz.

8. Udzielanie sobie dostępu do danych obiektów blob

Podczas tworzenia zasobu nie masz uprawnień do wyświetlania zawartości kontenera. Jest to zarezerwowane dla określonych ról IAM. Dodaj konto, aby można było wyświetlać obiekty blob w kontenerach.

  1. Nadal na koncie magazynu w witrynie Azure Portal wybierz pozycję Kontrola dostępu (Zarządzanie dostępem i tożsamościami).
  2. Wybierz pozycję Dodaj przypisania ról.
  3. Wyszukaj i wybierz pozycję Współautor danych obiektu blob usługi Storage. Wybierz Dalej.
  4. Wybierz pozycję + Wybierz członków.
  5. Wyszukaj i wybierz swoje konto.
  6. Wybierz Przejrzyj + przypisz.
  7. Wybierz pozycję Kontenery , a następnie kontener przekazywania . Powinien być widoczny brak obiektów blob w kontenerze bez błędów autoryzacji.

9. Pobieranie poświadczeń zasobu magazynu

Poświadczenia zasobu usługi Storage są używane w aplikacji interfejsu API usługi Azure Functions w celu nawiązania połączenia z zasobem usługi Storage.

  1. W witrynie Azure Portal w sekcji Zabezpieczenia i sieć wybierz pozycję Klucze dostępu.

  2. Pamiętaj, że pliki interfejsu API znajdują się pod adresem ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api.

  3. W folderze interfejsu API zmień nazwę pliku z local.settings.json.sample na local.settings.json. Plik jest ignorowany przez usługę Git, więc nie zostanie zaewidencjonowany w kontroli źródła.

  4. Zaktualizuj ustawienia, aby local.settings.json użyć poniższej tabeli.

    Właściwości Wartość Opis
    Azure_Storage_AccountName Nazwa konta usługi Azure Storage, na przykład: fileuploadstor. Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.
    Azure_Storage_AccountKey Klucz konta usługi Azure Storage Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.
    AzureWebJobsStorage parametry połączenia konta usługi Azure Storage Środowisko uruchomieniowe usługi Azure Functions służy do przechowywania stanu i dzienników.

Może się wydawać, że dwa razy wprowadzono te same poświadczenia konta, raz jako klucz i raz jako parametry połączenia. Zrobiliśmy to, ale specjalnie na potrzeby tego prostego samouczka. Ogólnie rzecz biorąc, aplikacje usługi Azure Functions powinny mieć oddzielny zasób usługi Storage, który nie jest ponownie używany do innego celu. Podczas tworzenia zasobu funkcji platformy Azure w dalszej części samouczka nie trzeba ustawiać wartości AzureWebJobsStorage dla zasobu w chmurze. Musisz ustawić tylko wartości Azure_Storage_AccountName i Azure_Storage_AccountKey , które są używane w kodzie źródłowym.

10. Uruchamianie aplikacji interfejsu API

Uruchom aplikację usługi Functions, aby upewnić się, że działa prawidłowo przed wdrożeniem jej na platformie Azure.

  1. W terminalu aplikacji interfejsu API uruchom następujące polecenie, aby uruchomić aplikację interfejsu API.

    npm run start

  2. Poczekaj na uruchomienie aplikacji usługi Azure Functions. Zobaczysz, że port aplikacji usługi Azure Functions 7071 jest teraz dostępny. Interfejsy API powinny być również widoczne w terminalu aplikacji interfejsu API.

    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. Wybierz kartę Porty w dolnym okienku, a następnie kliknij prawym przyciskiem myszy port 7071 , a następnie wybierz pozycję Widoczność portu, a następnie wybierz pozycję Publiczny.

    Jeśli nie uwidaczniasz tej aplikacji jako publicznej, podczas korzystania z interfejsu API z aplikacji klienckiej wystąpi błąd.

  4. Aby przetestować działanie interfejsu API i nawiązać połączenie z magazynem, na karcie Porty w dolnym okienku wybierz ikonę globusa w obszarze Adres lokalny dla portu 7071. Spowoduje to otwarcie przeglądarki internetowej w aplikacji funkcji.

  5. Dodaj trasę interfejsu API do paska adresu URL: /api/sas?container=upload&file=test.png. Plik nie znajduje się jeszcze w kontenerze. Interfejs API tworzy token SAS na podstawie miejsca, do którego ma zostać przekazany.

  6. Odpowiedź JSON powinna wyglądać mniej więcej tak:

    {
    "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. Skopiuj bazę adresu URL interfejsu API na pasku adresu przeglądarki (a nie adres URL tokenu SAS w obiekcie JSON), aby użyć go w następnym kroku. Podstawowy adres URL to wszystko przed /api/sas.

11. Konfigurowanie i uruchamianie aplikacji klienckiej

  1. Zmień nazwę pliku na ./azure-upload-file-to-storage/app/.env.sample.env.

  2. .env Otwórz plik i wklej podstawowy adres URL z poprzedniej sekcji jako wartość .VITE_API_SERVER

    Przykład środowiska Codespaces może wyglądać mniej więcej tak: VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev

  3. W innym podzielonym terminalu uruchom aplikację kliencka za pomocą następującego polecenia:

    npm run dev

  4. Poczekaj, aż terminal zwróci następujące powiadomienie, że aplikacja jest dostępna na porcie 5173.

      VITE v4.4.4  ready in 410 ms

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

  5. Wybierz kartę Porty w dolnym okienku, a następnie kliknij prawym przyciskiem myszy port 5173 i wybierz ikonę globusa.

  6. Powinna zostać wyświetlona prosta aplikacja internetowa.

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

  7. Interakcja z aplikacją internetową:

    • Wybierz plik obrazu (*.jpg lub *.png) z komputera lokalnego do przekazania.
    • Wybierz przycisk Pobierz sygnaturę dostępu współdzielonego, aby zażądać tokenu SYGNATURy dostępu współdzielonego z aplikacji interfejsu API. Odpowiedź zawiera pełny adres URL, który ma być używany do przekazania pliku do magazynu.
    • Wybierz przycisk Przekaż, aby wysłać plik obrazu bezpośrednio do usługi Storage.

    Screenshot of web browser showing web app with the image file uploaded and a thumbnail of the file displayed.

  8. Aplikacja kliencka i aplikacja interfejsu API pomyślnie współpracowały ze sobą w konteneryzowanym środowisku dewelopera.

12. Zatwierdzanie zmian kodu

  1. W programie Visual Studio Code otwórz kartę Kontrola źródła.
  2. Wybierz ikonę, + aby przygotować wszystkie zmiany. Te zmiany powinny zawierać tylko nowe pliki package-lock.json dla app folderów i api na potrzeby tego samouczka.

13. Wdrażanie statycznej aplikacji internetowej na platformie Azure

Aplikacja usługi Azure Functions korzysta z funkcji w wersji zapoznawczej. Aby działać prawidłowo, należy ją wdrożyć w regionie Zachodnie stany USA 2 .

  1. W programie Visual Studio Code wybierz eksploratora platformy Azure.

  2. W eksploratorze platformy Azure kliknij prawym przyciskiem myszy nazwę subskrypcji, a następnie wybierz pozycję Create Resource....

  3. Wybierz pozycję Utwórz statyczną aplikację internetową z listy.

  4. Postępuj zgodnie z instrukcjami w poniższej tabeli, aby dowiedzieć się, jak utworzyć zasób statycznej aplikacji internetowej.

    Właściwości Wartość
    Wprowadź globalnie unikatową nazwę nowej aplikacji internetowej. Wprowadź unikatową wartość, taką jak fileuploadstor, jako nazwę zasobu usługi Storage.

    Ta unikatowa nazwa to nazwa zasobu używana w następnej sekcji. Używaj tylko znaków i cyfr o długości do 24. Ta nazwa konta jest potrzebna do późniejszego użycia.
    Wybierz lokalizację nowych zasobów. Użyj zalecanej lokalizacji.

  5. Postępuj zgodnie z monitami, aby podać następujące informacje:

    Monit Enter
    Wybierz grupę zasobów dla nowych zasobów. Użyj grupy zasobów utworzonej dla zasobu magazynu.
    Wprowadź nazwę nowej statycznej aplikacji internetowej. Zaakceptuj nazwę domyślną.
    Wybieranie jednostki SKU Wybierz bezpłatną jednostkę SKU dla tego samouczka. Jeśli masz już bezpłatny zasób statycznej aplikacji internetowej w subskrypcji, wybierz następną warstwę cenową.
    Wybierz ustawienie wstępne kompilacji, aby skonfigurować domyślną strukturę projektu. Wybierz Niestandardowy.
    Wybierz lokalizację kodu aplikacji azure-upload-file-to-storage/app
    Wybieranie lokalizacji kodu usługi Azure Functions azure-upload-file-to-storage/api
    Wprowadź ścieżkę danych wyjściowych kompilacji... dist

    Jest to ścieżka z aplikacji do plików statycznych (wygenerowanych).
    Wybierz lokalizację nowych zasobów. Wybierz region w pobliżu.

  6. Po zakończeniu procesu zostanie wyświetlone wyskakujące okienko powiadomień. Wybierz pozycję Wyświetl/Edytuj przepływ pracy.

  7. Zdalny rozwidlenie zawiera nowy plik przepływu pracy do wdrażania w usłudze Static Web Apps. Pobierz ten plik w dół do środowiska za pomocą następującego polecenia w terminalu:

    git pull origin main

  8. Otwórz plik przepływu pracy znajdujący się w lokalizacji /.github/workflows/.

  9. Sprawdź, czy sekcja przepływu pracy specyficzna dla statycznej aplikacji internetowej tego samouczka powinna wyglądać następująco:

    ###### 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. Przejdź do rozwidlenia usługi GitHub przykładu, https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions aby zweryfikować akcję kompilacji i wdrożenia o nazwie Azure Static Web Apps CI/CD, ukończono pomyślnie. Może to potrwać kilka minut.

  11. Przejdź do witryny Azure Portal dla swojej aplikacji i wyświetl sekcję interfejsów API Ustawienia. Nazwa zasobu zaplecza w środowisku produkcyjnym wskazuje(managed), że interfejsy API zostały pomyślnie wdrożone.

  12. Wybierz pozycję (zarządzana), aby wyświetlić listę interfejsów API załadowanych w aplikacji:

    • lista
    • Sas
    • stan

  13. Przejdź do strony Przegląd, aby znaleźć adres URL wdrożonej aplikacji.

  14. Wdrożenie aplikacji zostało ukończone.

14. Konfigurowanie interfejsu API przy użyciu nazwy i klucza zasobu usługi Storage

Aplikacja wymaga nazwy i klucza zasobu usługi Azure Storage, zanim interfejs API działa poprawnie.

  1. Nadal w eksploratorze platformy Azure kliknij prawym przyciskiem myszy zasób Statyczna aplikacja internetowa i wybierz polecenie Otwórz w portalu.

  2. Wybierz pozycję Konfiguracja w sekcji Ustawienia.

  3. Dodaj ustawienia aplikacji przy użyciu poniższej tabeli.

    Właściwości Wartość Opis
    Azure_Storage_AccountName Nazwa konta usługi Azure Storage, na przykład: fileuploadstor. Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.
    Azure_Storage_AccountKey Klucz konta usługi Azure Storage Używany w kodzie źródłowym do nawiązywania połączenia z zasobem usługi Storage.

  4. Wybierz pozycję Zapisz na stronie Konfiguracja, aby zapisać oba ustawienia.

Uwaga

Nie musisz ustawiać zmiennej env aplikacji klienckiej VITE_API_SERVER, ponieważ aplikacja kliencka i interfejs API są hostowane z tej samej domeny.

15. Używanie statycznej aplikacji internetowej wdrożonej na platformie Azure

Sprawdź, czy wdrożenie i konfiguracja zakończyła się pomyślnie przy użyciu witryny sieci Web.

  1. W programie Visual Studio Code kliknij prawym przyciskiem myszy aplikację statyczną internetową w eksploratorze platformy Azure i wybierz pozycję Przeglądaj witrynę.
  2. W nowym oknie przeglądarki internetowej wybierz pozycję Wybierz plik , a następnie wybierz plik obrazu (*.png lub *.jpg), aby przekazać.
  3. Wybierz pozycję Pobierz token sygnatury dostępu współdzielonego. Ta akcja przekazuje nazwę pliku do interfejsu API i odbiera adres URL tokenu SAS niezbędny do przekazania pliku.
  4. Wybierz pozycję Przekaż plik , aby użyć adresu URL tokenu SYGNATURY dostępu współdzielonego, aby przekazać plik. W przeglądarce zostanie wyświetlona miniatura i adres URL przekazanego pliku.

16. Czyszczenie zasobów

W programie Visual Studio Code użyj eksploratora platformy Azure dla grup zasobów, kliknij prawym przyciskiem myszy grupę zasobów, a następnie wybierz polecenie Usuń.

Spowoduje to usunięcie wszystkich zasobów w grupie, w tym zasobów usługi Storage i statycznej aplikacji internetowej.

Rozwiązywanie problemów

Zgłoś problemy z tym przykładem w repozytorium GitHub zanotowany poniżej. Dołącz następujące elementy do problemu:

  • Adres URL artykułu
  • Krok lub kontekst w artykule, który był problematyczny
  • Środowisko projektowe

Przykładowy kod

Powiązana zawartość

Jeśli chcesz kontynuować pracę z tą aplikacją, dowiedz się, jak wdrożyć aplikację na platformie Azure na potrzeby hostowania przy użyciu jednej z następujących opcji: