Nahrání obrázku do objektu blob služby Azure Storage pomocí JavaScriptu

Článek
12/06/2023

Pomocí statické webové aplikace nahrajte soubor do objektu blob služby Azure Storage pomocí balíčku NPM služby Azure Storage @azure/storage-blob npm s tokenem SAS služby Azure Storage.

Požadavky

Předplatné Azure. Pokud ještě předplatné Azure nemáte, můžete si zaregistrovat bezplatný účet Azure.
Účet GitHubu pro vytvoření forku a nasdílení změn do úložiště

Architektura aplikace

Tato aplikační architektura zahrnuje dva prostředky Azure:

Azure Static Web Apps pro staticky vygenerovanou klientskou aplikaci Prostředek také poskytuje spravované rozhraní API služby Azure Functions. Spravované znamená, že prostředek Static Web Apps spravuje prostředek rozhraní API pro vlastní použití.
Azure Storage pro úložiště objektů blob.

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

Krok	Description
1	Zákazník se připojí k staticky generovanému webu. Web je hostovaný ve službě Azure Static Web Apps.
2	Zákazník používá tento web k výběru souboru k nahrání. V tomto kurzu je front-endová architektura Vite React a nahraný soubor je soubor obrázku.
3	Web volá rozhraní API `sas` služby Azure Functions, aby získal token SAS na základě přesného názvu souboru, který se má nahrát. Bezserverové rozhraní API k vytvoření tokenu SAS používá sadu SDK služby Azure Blob Storage. Rozhraní API vrátí úplnou adresu URL, která se použije k nahrání souboru, který obsahuje token SAS jako řetězec dotazu. `https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN`
4	Front-endový web používá adresu URL tokenu SAS k nahrání souboru přímo do služby Azure Blob Storage.

Místní a sestavení prostředí

V tomto kurzu se používají následující prostředí:

Místní vývoj s využitím GitHub Codespaces nebo editoru Visual Studio Code
Sestavte a nasaďte pomocí GitHub Actions.

1. Fork sample application repository with GitHub

Tento kurz používá akce GitHubu k nasazení ukázkové aplikace do Azure. K dokončení tohoto nasazení potřebujete účet GitHubu a fork úložiště ukázkové aplikace.

Ve webovém prohlížeči pomocí následujícího odkazu zahajte fork pro vlastní účet ukázkového úložiště: Azure-Samples/azure-typescript-e2e-apps.
Dokončete kroky pro vytvoření forku ukázky pouze s hlavní větví.

2. Konfigurace vývojového prostředí

Vývojové prostředí kontejneru je k dispozici se všemi závislostmi potřebnými k dokončení každého cvičení v tomto projektu. Vývojový kontejner můžete spustit v GitHub Codespaces nebo místně pomocí editoru Visual Studio Code.

GitHub Codespaces
Visual Studio Code

GitHub Codespaces spouští vývojový kontejner spravovaný GitHubem pomocí editoru Visual Studio Code pro web jako uživatelského rozhraní. Pro nejjednodušší vývojové prostředí použijte GitHub Codespaces, abyste měli předinstalované správné vývojářské nástroje a závislosti k dokončení tohoto trénovacího modulu.

Důležité

Všechny účty GitHubu můžou každý měsíc používat Codespaces až 60 hodin zdarma se 2 jádrovými instancemi. Další informace najdete v tématu GitHub Codespaces měsíčně zahrnuté úložiště a hodiny jádra.

Ve webovém prohlížeči spusťte ve svém forku GitHubu ukázkového úložiště proces vytvoření nového prostoru GitHub Codespace ve main větvi forku výběrem tlačítka CODE .
Na kartě Codespaces vyberte tři tečky....
Vyberte + Nový s možnostmi a vyberte konkrétní vývojový kontejner Codespaces.
Vyberte následující možnosti a pak vyberte Vytvořit prostor kódu.
- Pobočka: main
- Konfigurace vývojového kontejneru: Tutorial: Upload file to storage with SAS Token
- Oblast: Přijmout výchozí
- Typ počítače: Přijmout výchozí
Počkejte, až se prostor kódu spustí. Tento proces spuštění může trvat několik minut.
Otevřete nový terminál v codespace.

Tip

Pomocí hlavní nabídky můžete přejít na možnost nabídky Terminál a pak vybrat možnost Nový terminál .
Zkontrolujte verze nástrojů, které používáte v tomto kurzu.
```
node --version
npm --version
func --version
```
Tento kurz vyžaduje následující verze každého nástroje, které jsou předinstalované ve vašem prostředí:

Nástroj Verze

Node.js ≥ 18

npm ≥ 9,5

Základní nástroje Azure Functions ≥ 4,5098
Zavřete terminál.
Zbývající kroky v tomto kurzu probíhají v kontextu tohoto vývojového kontejneru.

Nástroj	Verze
Node.js	≥ 18
npm	≥ 9,5
Základní nástroje Azure Functions	≥ 4,5098

Rozšíření Dev Containers pro Visual Studio Code vyžaduje instalaci Dockeru na místním počítači. Rozšíření hostuje vývojový kontejner místně pomocí hostitele Dockeru se správnými vývojářskými nástroji a závislostmi předinstalovanými k dokončení tohoto trénovacího modulu.

Otevřete Visual Studio Code v kontextu prázdného adresáře.
Ujistěte se, že máte nainstalované rozšíření Dev Containers v editoru Visual Studio Code.
V editoru otevřete nový terminál.

Tip

Pomocí hlavní nabídky můžete přejít na možnost nabídky Terminál a pak vybrat možnost Nový terminál .
Naklonujte fork do aktuálního adresáře. V následujícím příkazu nahraďte YOUR-ACCOUNT názvem vašeho účtu.
```
git clone https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps
```
Otevřete paletu příkazů, vyhledejte příkazy Dev Containers a pak vyberte Dev Containers: Znovu otevřít v kontejneru.

Tip

Visual Studio Code vás může automaticky vyzvat k opětovnému otevření existující složky v rámci vývojového kontejneru. Toto je funkčně ekvivalentní použití palety příkazů k opětovnému otevření aktuálního pracovního prostoru v kontejneru.
Zkontrolujte verze nástrojů, které používáte v tomto kurzu.
```
node --version
npm --version
func --version
```
Tento kurz vyžaduje následující verze každého nástroje, které jsou předinstalované ve vašem prostředí:

Nástroj Verze

Node.js ≥ 18

npm ≥ 9,5

Základní nástroje Azure Functions ≥ 4,5098
Zavřete terminál.
Zbývající kroky v tomto kurzu probíhají v kontextu tohoto vývojového kontejneru.

Nástroj	Verze
Node.js	≥ 18
npm	≥ 9,5
Základní nástroje Azure Functions	≥ 4,5098

3. Instalace závislostí

Ukázková aplikace pro tento kurz je ve azure-upload-file-to-storage složce. V projektu nebudete muset používat žádné jiné složky.

V editoru Visual Studio Code otevřete terminál a přejděte do složky projektu.
```
cd azure-upload-file-to-storage
```
Rozdělte terminál tak, abyste měli dva terminály, jeden pro klientskou aplikaci a druhý pro aplikaci API.
V jednom z terminálů spusťte následující příkaz, který nainstaluje závislosti aplikace API a spustí aplikaci.
```
cd api && npm install
```
V druhém terminálu spusťte příkaz pro instalaci klientské aplikace.
```
cd app && npm install
```

4. Vytvoření prostředku úložiště s rozšířením sady Visual Studio

Vytvořte prostředek úložiště, který se použije s ukázkovou aplikací. Úložiště se používá pro:

Triggery v aplikaci Azure Functions
Úložiště objektů blob (soubor)

Přejděte na rozšíření Azure Storage.
V případě potřeby se přihlaste k Azure.
Klikněte pravým tlačítkem myši na předplatné a vyberte Create Resource....
V seznamu vyberte Vytvořit účet úložiště.

Postupujte podle pokynů v následující tabulce a zjistěte, jak vytvořit prostředek úložiště.

Vlastnost	Hodnota
Zadejte globálně jedinečný název nové webové aplikace.	Zadejte jedinečnou hodnotu, například `fileuploadstor`název prostředku úložiště. Tento jedinečný název je název vašeho prostředku použitý v další části. Používejte jenom znaky a čísla, o délce až 24 znaků. Tento název účtu budete potřebovat k pozdějšímu použití.
Vyberte umístění pro nové prostředky.	Použijte doporučené umístění.

Po dokončení procesu vytváření aplikace se zobrazí oznámení s informacemi o novém prostředku.

5. Konfigurace CORS úložiště

Vzhledem k tomu, že se k nahrání souboru používá prohlížeč, musí účet Azure Storage nakonfigurovat CORS tak, aby umožňoval žádosti mezi zdroji.

Přejděte na rozšíření Azure Storage. Klikněte pravým tlačítkem na prostředek úložiště a vyberte Otevřít na portálu.
V části Nastavení účtu úložiště na webu Azure Portal vyberte Sdílení prostředků (CORS).
K nastavení CORS pro tento kurz použijte následující vlastnosti.
- Povolené původy: *
- Povolené metody: Vše kromě opravy
- Povolené hlavičky: *
- Vystavené hlavičky: *
- Maximální věk: 86400
Tato nastavení se v tomto kurzu používají ke zjednodušení kroků a nejsou určená k označení osvědčených postupů nebo zabezpečení. Přečtěte si další informace o CORS pro Azure Storage.
Zvolte Uložit.

6. Udělení anonymního přístupu k úložišti

Nahrání souboru je zabezpečené od klienta při vytváření časově omezeného tokenu SAS a omezeného oprávnění. Po nahrání souboru v tomto kurzu ale chcete, aby ho viděl kdokoli. Abyste to mohli udělat, musíte změnit oprávnění úložiště, aby bylo veřejně přístupné.

I když je účet veřejně přístupný, každý kontejner a každý objekt blob může mít privátní přístup. Bezpečnější metoda, ale příliš složitá pro účely tohoto kurzu je nahrání do jednoho účtu úložiště s tokenem SAS a následné přesunutí objektu blob do jiného účtu úložiště s veřejným přístupem.

Pokud chcete povolit veřejný přístup na webu Azure Portal, vyberte stránku Přehled vašeho účtu úložiště, v části Vlastnosti vyberte anonymní přístup k objektu blob a pak vyberte Zakázáno.
Na stránce Konfigurace povolte anonymní přístup k objektům blob.

7. Vytvoření kontejneru pro nahrání

V účtu úložiště na webu Azure Portal vyberte v části Úložiště dat kontejnery.
Vyberte + Kontejner a vytvořte upload kontejner s následujícím nastavením:
- Název: upload
- Úroveň veřejného přístupu: Blob
Vyberte Vytvořit.

8. Udělení přístupu k datům objektů blob

Při vytváření prostředku nemáte oprávnění k zobrazení obsahu kontejneru. To je vyhrazené pro konkrétní role IAM. Přidejte svůj účet, abyste mohli zobrazit objekty blob v kontejnerech.

Stále v účtu úložiště na webu Azure Portal vyberte Řízení přístupu (IAM).
Vyberte Přidat přiřazení rolí.
Vyhledejte a vyberte Přispěvatel dat objektů blob služby Storage. Vyberte Další.
Vyberte + Vybrat členy.
Vyhledejte a vyberte svůj účet.
Vyberte Zkontrolovat + přiřadit.
Vyberte Kontejnery a pak kontejner pro nahrání . Měli byste vidět, že v kontejneru nejsou žádné objekty blob bez chyb autorizace.

9. Získání přihlašovacích údajů k prostředku úložiště

Přihlašovací údaje k prostředku úložiště se používají v aplikaci rozhraní API služby Azure Functions pro připojení k prostředku úložiště.

Na webu Azure Portal vyberte v části Zabezpečení a sítě přístupové klíče.
Zapamatujte si, že soubory rozhraní API jsou nalezeny na adrese ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api.
Ve složce rozhraní API přejmenujte soubor z local.settings.json.sample na local.settings.json. Git soubor ignoruje, takže se nevrátí se změnami do správy zdrojového kódu.

Aktualizujte nastavení pro local.settings.json použití následující tabulky.

Vlastnost	Hodnota	Popis
Azure_Storage_AccountName	Název účtu služby Azure Storage, například: `fileuploadstor`.	Používá se ve zdrojovém kódu pro připojení k prostředku úložiště.
Azure_Storage_AccountKey	Klíč účtu služby Azure Storage	Používá se ve zdrojovém kódu pro připojení k prostředku úložiště.
AzureWebJobsStorage	připojovací řetězec účtu služby Azure Storage	Modul runtime Azure Functions slouží k ukládání stavu a protokolů.

Může to vypadat, že jste dvakrát zadali stejné přihlašovací údaje účtu, jednou jako klíč a jednou jako připojovací řetězec. Udělali jste to, ale speciálně pro tento jednoduchý kurz. Obecně řečeno, aplikace Azure Functions by měly mít samostatný prostředek úložiště, který se nepoužívá pro jiný účel. Když později v kurzu vytvoříte prostředek funkce Azure Functions, nebudete muset pro cloudový prostředek nastavit hodnotu AzureWebJobsStorage . Budete muset nastavit jenom Azure_Storage_AccountName a Azure_Storage_AccountKey hodnoty, které se používají ve zdrojovém kódu.

10. Spuštění aplikace API

Spusťte aplikaci Functions, abyste měli jistotu, že funguje správně, než ji nasadíte do Azure.

V terminálu aplikace API spusťte následující příkaz a spusťte aplikaci API.
```
npm run start
```
Počkejte, až se aplikace Azure Functions spustí. Uvidíte, že port aplikace Azure Functions 7071 je teď dostupný. Měla by se zobrazit také rozhraní API uvedená v terminálu pro aplikaci 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
```
Vyberte kartu Porty v dolním podokně a potom klikněte pravým tlačítkem myši na port 7071 a vyberte Viditelnost portů a pak vyberte Veřejný.

Pokud tuto aplikaci nezpřístupníte jako veřejnou, při použití rozhraní API z klientské aplikace se zobrazí chyba.
Pokud chcete otestovat, že rozhraní API funguje a připojuje se k úložišti, vyberte na kartě Porty v dolním podokně ikonu zeměkoule v oblasti Místní adresa pro port 7071. Tím se otevře webový prohlížeč pro aplikaci Functions.
Přidejte trasu rozhraní API na adresní řádek URL: /api/sas?container=upload&file=test.png. Je v pořádku, že soubor ještě není v kontejneru. Rozhraní API vytvoří token SAS podle toho, kam ho chcete nahrát.

Odpověď JSON by měla vypadat přibližně takto:

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

Zkopírujte základ adresy URL rozhraní API na adresní řádek prohlížeče (nikoli adresu URL tokenu SAS v objektu JSON), který použijete v dalším kroku. Základní adresa URL je vše před /api/sas.

11. Konfigurace a spuštění klientské aplikace

./azure-upload-file-to-storage/app/.env.sample Přejmenujte soubor na .env.
.env Otevřete soubor a vložte základní adresu URL z předchozí části jako hodnotu objektu VITE_API_SERVER.

Příklad prostředí Codespaces může vypadat nějak takto: VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev
V druhém rozděleném terminálu spusťte klientskou aplikaci pomocí následujícího příkazu:
```
npm run dev
```

Počkejte, až terminál vrátí následující upozornění, že aplikace je dostupná na portu 5173.

  VITE v4.4.4  ready in 410 ms

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

Vyberte kartu Porty v dolním podokně a potom klikněte pravým tlačítkem myši na port 5173 a vyberte ikonu zeměkoule.
Měla by se zobrazit jednoduchá webová aplikace.
Interakce s webovou aplikací:
- Vyberte soubor obrázku (*.jpg nebo *.png) z místního počítače, který chcete nahrát.
- Vyberte tlačítko Získat SAS a požádejte o token SAS z aplikace API. V odpovědi se zobrazí úplná adresa URL, která se má použít k nahrání souboru do úložiště.
- Výběrem tlačítka Nahrát odešlete soubor obrázku přímo do úložiště.
Klientská aplikace a aplikace API úspěšně spolupracovaly v kontejnerizovaném vývojářském prostředí.

12. Potvrzení změn kódu

V editoru Visual Studio Code otevřete kartu Správa zdrojového kódu .
+ Výběrem ikony připravte všechny změny. Tyto změny by měly obsahovat pouze nové soubory package-lock.json pro soubory app a api složky pro účely tohoto kurzu.

13. Nasazení statické webové aplikace do Azure

Aplikace Azure Functions používá funkci Ve verzi Preview, aby správně fungovala, musí být nasazená do usa – západ 2 .

V editoru Visual Studio Code vyberte Průzkumníka Azure.
V Azure Exploreru klikněte pravým tlačítkem myši na název předplatného a vyberte Create Resource....
V seznamu vyberte Vytvořit statickou webovou aplikaci .

Postupujte podle pokynů v následující tabulce a zjistěte, jak vytvořit prostředek statické webové aplikace.

Vlastnost	Hodnota
Zadejte globálně jedinečný název nové webové aplikace.	Zadejte jedinečnou hodnotu, například `fileuploadstor`název prostředku úložiště. Tento jedinečný název je název vašeho prostředku použitý v další části. Používejte jenom znaky a čísla, o délce až 24 znaků. Tento název účtu budete potřebovat k pozdějšímu použití.
Vyberte umístění pro nové prostředky.	Použijte doporučené umístění.

Postupujte podle pokynů a zadejte následující informace:

Výzva	ENTER
Vyberte skupinu prostředků pro nové prostředky.	Použijte skupinu prostředků, kterou jste vytvořili pro prostředek úložiště.
Zadejte název nové statické webové aplikace.	Přijměte výchozí název.
Výběr skladové položky	Vyberte bezplatnou skladovou položku pro tento kurz. Pokud už máte ve svém předplatném bezplatný prostředek statické webové aplikace, vyberte další cenovou úroveň.
Zvolte předvolbu sestavení pro konfiguraci výchozí struktury projektu.	Vyberte Vlastní.
Vyberte umístění kódu aplikace.	`azure-upload-file-to-storage/app`
Vyberte umístění kódu Azure Functions.	`azure-upload-file-to-storage/api`
Zadejte cestu výstupu sestavení...	`dist` Toto je cesta z vaší aplikace ke statickým (vygenerovaným) souborům.
Vyberte umístění pro nové prostředky.	Vyberte oblast blízko od vás.

Po dokončení procesu se zobrazí automaticky otevírané okno s oznámením. Vyberte Zobrazit nebo upravit pracovní postup.
Vzdálený fork obsahuje nový soubor pracovního postupu pro nasazení do Static Web Apps. Stáhněte tento soubor do svého prostředí pomocí následujícího příkazu v terminálu:
```
git pull origin main
```
Otevřete soubor pracovního postupu umístěný na adrese /.github/workflows/.

Ověřte, že část pracovního postupu specifická pro statickou webovou aplikaci tohoto kurzu by měla vypadat takto:

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

Přejděte na svůj fork GitHubu ukázky a https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions ověřte akci sestavení a nasazení s názvem Azure Static Web Apps CI/CD, která se úspěšně dokončila. Dokončení může trvat několik minut.
Přejděte na web Azure Portal pro vaši aplikaci a prohlédněte si část rozhraní API Nastavení. Název back-endového prostředku v produkčním prostředí (managed) znamená, že vaše rozhraní API byla úspěšně nasazena.
Výběrem (spravovaného) zobrazíte seznam rozhraní API načtených v aplikaci:
- list
- Sas
- stav
Přejděte na stránku Přehled a vyhledejte adresu URL nasazené aplikace.
Nasazení aplikace je hotové.

14. Konfigurace rozhraní API s názvem a klíčem prostředku úložiště

Aplikace potřebuje název a klíč prostředku Azure Storage, aby rozhraní API správně fungovalo.

V Azure Exploreru klikněte pravým tlačítkem na prostředek Statické webové aplikace a vyberte Otevřít na portálu.
V části Nastavení vyberte Konfigurace.

Přidejte nastavení aplikace pomocí následující tabulky.

Vlastnost	Hodnota	Popis
Azure_Storage_AccountName	Název účtu služby Azure Storage, například: `fileuploadstor`.	Používá se ve zdrojovém kódu pro připojení k prostředku úložiště.
Azure_Storage_AccountKey	Klíč účtu služby Azure Storage	Používá se ve zdrojovém kódu pro připojení k prostředku úložiště.

Na stránce Konfigurace vyberte Uložit a uložte obě nastavení.

Poznámka:

Proměnnou env klientské aplikace nemusíte nastavovat VITE_API_SERVER , protože klientská aplikace a rozhraní API jsou hostované ze stejné domény.

15. Použití statické webové aplikace nasazené v Azure

Pomocí webu ověřte úspěšné nasazení a konfiguraci.

V editoru Visual Studio Code klikněte pravým tlačítkem na statickou webovou aplikaci z Průzkumníka Azure a vyberte Procházet web.
V novém okně webového prohlížeče vyberte Zvolit soubor a pak vyberte soubor obrázku (*.png nebo *.jpg), který chcete nahrát.
Vyberte Získat token SAS. Tato akce předá název souboru rozhraní API a obdrží adresu URL tokenu SAS potřebnou k nahrání souboru.
Vyberte Nahrát soubor , abyste k nahrání souboru použili adresu URL tokenu SAS. Prohlížeč zobrazí miniaturu a adresu URL nahraného souboru.

16. Vyčištění prostředků

V editoru Visual Studio Code použijte Průzkumníka azure pro skupiny prostředků, klikněte pravým tlačítkem na skupinu prostředků a pak vyberte Odstranit.

Tím se odstraní všechny prostředky ve skupině, včetně prostředků služby Storage a Static Web App.

Řešení problému

Oznamte problémy s touto ukázkou v úložišti GitHubu, které jste si poznamenali níže. Uveďte následující informace o problému:

Adresa URL článku
Krok nebo kontext v článku, který byl problematický
Vaše vývojové prostředí

Ukázkový kód

Úložiště GitHub: azure-upload-file-to-storage

Pokud chcete pokračovat v používání této aplikace, zjistěte, jak nasadit aplikaci do Azure pro hostování pomocí jedné z následujících možností:

Dokumentace ke službě Azure Blob Storage
@azure/storage-blob
- balíček npm
Webová aplikace Azure Static

Nahrání obrázku do objektu blob služby Azure Storage pomocí JavaScriptu

Požadavky

Architektura aplikace

Místní a sestavení prostředí

1. Fork sample application repository with GitHub

2. Konfigurace vývojového prostředí

3. Instalace závislostí

4. Vytvoření prostředku úložiště s rozšířením sady Visual Studio

5. Konfigurace CORS úložiště

6. Udělení anonymního přístupu k úložišti

7. Vytvoření kontejneru pro nahrání

8. Udělení přístupu k datům objektů blob

9. Získání přihlašovacích údajů k prostředku úložiště

10. Spuštění aplikace API

11. Konfigurace a spuštění klientské aplikace

12. Potvrzení změn kódu

13. Nasazení statické webové aplikace do Azure

14. Konfigurace rozhraní API s názvem a klíčem prostředku úložiště

15. Použití statické webové aplikace nasazené v Azure

16. Vyčištění prostředků

Řešení problému

Ukázkový kód

Váš názor

Váš názor

Další materiály

Nahrání obrázku do objektu blob služby Azure Storage pomocí JavaScriptu

Požadavky

Architektura aplikace

Místní a sestavení prostředí

1. Fork sample application repository with GitHub

2. Konfigurace vývojového prostředí

3. Instalace závislostí

4. Vytvoření prostředku úložiště s rozšířením sady Visual Studio

5. Konfigurace CORS úložiště

6. Udělení anonymního přístupu k úložišti

7. Vytvoření kontejneru pro nahrání

8. Udělení přístupu k datům objektů blob

9. Získání přihlašovacích údajů k prostředku úložiště

10. Spuštění aplikace API

11. Konfigurace a spuštění klientské aplikace

12. Potvrzení změn kódu

13. Nasazení statické webové aplikace do Azure

14. Konfigurace rozhraní API s názvem a klíčem prostředku úložiště

15. Použití statické webové aplikace nasazené v Azure

16. Vyčištění prostředků

Řešení problému

Ukázkový kód

Související obsah

Váš názor

Váš názor

Další materiály