Upload obrázku do objektu Azure Storage blob

  • Článek
  • 11 min ke čtení

Pomocí klientské aplikace React nahrát soubor obrázku do objektu blob Azure Storage pomocí balíčku npm Azure Storage @azure/storage-blob.

Programování TypeScriptu se provádí za vás. Tento kurz se zaměřuje na úspěšné používání místních a vzdálených prostředí Azure z Visual Studio Code s rozšířeními Azure.

Architektura a funkce aplikací

Tento článek obsahuje několik nejlepších úloh Azure pro vývojáře v JavaScriptu:

  • Místní spuštění React/TypeScriptu pomocí Visual Studio Code
  • Vytvoření prostředku Azure Storage Blob a konfigurace pro nahrávání souborů
    • Konfigurace CORS
    • Vytvoření tokenu sdíleného přístupového podpisu (SAS)
  • Konfigurace kódu pro klientskou knihovnu sady Azure SDK pro použití tokenu SAS k ověření ve službě

Ukázková React, která je k dispozici GitHub, se skládá z následujících prvků:

Jednoduchá React aplikace připojená k Azure Storage objektům blob.

1. Nastavení vývojového prostředí

2. Fork a klonování ukázkové aplikace

  1. Otevřete tuto ukázkovou GitHub URL ve webovém prohlížeči:

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

  2. Vyberte Fork a vytvořte si vlastní fork tohoto ukázkového projektu. Vlastní GitHub fork je potřeba k nasazení této ukázky do Azure jako statické webové aplikace.

  3. Vyberte tlačítko Code (Kód) a zkopírujte clone URL (Adresa URL pro klonování).

  4. V terminálu Bash naklonování forku úložiště nahraďte názvem vašeho REPLACE-WITH-YOUR-ACCOUNT-NAME GitHub účtu:

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

  5. Přechádte se do nového adresáře a otevřete Visual Studio Code.

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

3. Instalace závislostí a spuštění místního projektu

  1. V Visual Studio Code integrovaný terminál Bash CtrlShift a spuštěním následujícího příkazu nainstalujte ` závislosti ukázky.

    npm install

  2. Ve stejném okně terminálu spusťte příkaz pro spuštění webové aplikace.

    npm start

  3. Otevřete webový prohlížeč a pomocí následující adresy URL zobrazte webovou aplikaci na místním počítači.

    http://localhost:3000/

    Pokud se v prohlížeči zobrazí jednoduchá webová aplikace s textem, že Storage není nakonfigurovaný, v této části kurzu jste uspěli.

    Jednoduchá Node.js aplikace připojená k databázi MongoDB.

  4. Zastavte kód stisknutím CtrlC v Visual Studio Code terminálu.

4. Vytvoření Storage s rozšířením Visual Studio

  1. Přejděte k Azure Storage rozšíření. Klikněte pravým tlačítkem na předplatné a pak vyberte Create Storage Account... .

    Přejděte k Azure Storage rozšíření. Klikněte pravým tlačítkem na předplatné a vyberte Create Storage Account... (Vytvořit Storage účet).

  2. Postupujte podle pokynů v následující tabulce a seznamte se s vytvořením prostředku Storage dat.

    Vlastnost Hodnota
    Zadejte globálně jedinečný název nové webové aplikace. Jako název prostředku zadejte hodnotu fileuploaddemo , Storage.

    Tento jedinečný název je název vašeho prostředku použitý v další části. Používejte pouze znaky a čísla o délce až 24 znaků. Tento název účtu budete potřebovat později.

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

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

5. Vygenerování tokenu sdíleného přístupového podpisu (SAS)

Vygenerování tokenu SAS před konfigurací CORS

  1. V rozšíření Visual Studio Code pro Storage klikněte pravým tlačítkem na prostředek a pak vyberte Otevřít na portálu. Tím se otevře Azure Portal vašeho konkrétního Storage prostředku.

  2. V části Zabezpečení a sítě vyberte Sdílený přístupový podpis.

  3. Nakonfigurujte token SAS s následujícím nastavením.

    Vlastnost Hodnota
    Povolené služby Objekt blob
    Povolené typy prostředků Služba, kontejner, objekt
    Povolená oprávnění Čtení, zápis, odstranění, zobrazení seznamu, přidání, vytvoření
    Oprávnění pro správu verzí objektů blob Zaškrtnuto
    Povolit oprávnění indexu objektů blob Je zaškrtnuté políčko Číst/Zapisovat a Filtr.
    Datum/čas začátku a konce platnosti Přijměte počáteční datum a čas a nastavte koncové datum a čas 24 hodin v budoucnosti. Token SAS je dobrý jenom 24 hodin.
    Pouze HTTPS Vybráno
    Upřednostňovaná úroveň směrování Basic
    Podpisový klíč vybraný klíč 1

    Nakonfigurujte token SAS tak, jak je na obrázku. Nastavení jsou vysvětlena pod obrázkem.

  4. Vyberte Vygenerovat SAS a připojovací řetězec.

  5. Okamžitě zkopírujte token SAS. Tento token nebudete moct zobrazit, takže pokud ho nemáte zkopírovaný, budete muset vygenerovat nový token SAS.

6. Nastavení Storage v souboru .env

Token SAS se používá při vytváření dotazů na cloudový prostředek.

  1. V kořenovém .env adresáři projektu vytvořte název souboru.

  2. Přidejte dvě požadované proměnné s jejich hodnotami úložiště:

    REACT_APP_STORAGESASTOKEN=
REACT_APP_STORAGERESOURCENAME=

    React sestaví statické soubory s těmito proměnnými.

  3. Pokud token začíná otazníkem, odeberte ? . Soubor kódu vám poskytuje ? , takže ho v tokenu nepotřebujete.

7. Konfigurace CORS pro Azure Storage prostředků

Nakonfigurujte CORS pro váš prostředek tak, aby kód React na straně klienta mohl přistupovat k vašemu účtu úložiště.

  1. Na portálech Azure Portal v části Nastavení vyberte Sdílení prostředků (CORS).

  2. Nakonfigurujte Blob service CORS tak, jak je na obrázku. Nastavení jsou vysvětlena pod obrázkem.

    Vlastnost Hodnota
    Povolené zdroje *
    Povolené metody Všechny kromě patch.
    Povolené hlavičky *
    Zveřejněné hlavičky *
    Max age (Maximální věk) 86400

    Nakonfigurujte CORS tak, jak je na obrázku. Nastavení jsou vysvětlena pod obrázkem.

  3. Nad nastavením vyberte Uložit a uložte je do prostředku. Kód nevyžaduje žádné změny, aby fungoval s těmito nastaveními CORS.

8. Místní spuštění projektu pro ověření připojení Storage účtu

Token SAS a název účtu úložiště jsou nastavené v src/azure-storage-blob.ts souboru , takže jste připraveni aplikaci spustit.

  1. Pokud aplikace není spuštěná, spusťte ji znovu:

    npm start

  2. Otevřete v prohlížeči následující adresu URL:

    http://localhost:3000

    Web React připojený k Azure Storage by se měl zobrazit s tlačítkem pro výběr souboru a tlačítkem pro nahrání souboru.

  3. Ve složce vyberte images obrázek, který chcete nahrát, a pak vyberte images

  4. Front-endový kód klienta React zavolá soubor ./src/azure-storage-blob.ts pro ověření v Azure a pak vytvoří kontejner Storage (pokud ještě neexistuje), a pak soubor nahraje do tohoto kontejneru.

9. Nasazení statické webové aplikace do Azure

  1. V Visual Studio Code vyberte Průzkumník Azure.

  2. Pokud se zobrazí automaticky otevírané okno s žádostí o potvrzení změn, nedělejte to. Ukázka by měla být připravená k nasazení beze změn.

    Pokud chcete změny vrátit zpět, Visual Studio Code panelu aktivit vyberte ikonu Správy zdrojového kódu. Pak vyberte každý změněný soubor v seznamu Změny a vyberte ikonu Zahodit změny.

  3. Klikněte pravým tlačítkem na název předplatného a pak vyberte Create Static Web App (Advanced) (Vytvořit statickou webovou aplikaci (upřesnit).

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

    Výzva Enter
    Zadejte název nové statické webové aplikace. Vytvořte jedinečný název prostředku. Můžete například před název úložiště připravit své jméno, například upload-file-to-storage .
    Vyberte skupinu prostředků pro nové prostředky. Použijte skupinu prostředků, kterou jste vytvořili pro prostředek úložiště.
    Výběr SKU Pro tento kurz vyberte bezplatnou SKU. Pokud už máte bezplatný použitý prostředek statické webové aplikace, vyberte další cenovou úroveň.
    Zvolte předvolbu sestavení a nakonfigurujte výchozí strukturu projektu. Vyberte React.
    Vyberte umístění kódu aplikace. / – Označuje, že soubor package.json je v kořenovém adresáři úložiště.
    Vyberte umístění vašeho Azure Functions kódu. Přijměte výchozí hodnotu. I když tato ukázka rozhraní API používat nebude, můžete ho přidat později.
    Zadejte cestu k výstupu sestavení... build

    Toto je cesta z vaší aplikace ke statickým (generovaným) souborům.
    Vyberte umístění pro nové prostředky. Vyberte oblast blízko od vás.

  5. Po dokončení procesu se zobrazí automaticky otevírané okno s oznámením. Vyberte Zobrazit/upravit pracovní postup.

    Částečný snímek obrazovky Visual Studio Code automaticky otevírané okno s oznámením o zobrazení nebo úpravě pracovního postupu se zvýrazněnou možností Zobrazit/upravit pracovní postup

10. Přidání tajných Azure Storage do GitHub tajných kódů

  1. Ve webovém prohlížeči se vraťte GitHub forku ukázkového projektu a přidejte tyto dva tajné kódy a jejich hodnoty:

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

    Snímek obrazovky webového prohlížeče se zobrazenou stránkou Nastavení – Tajné kódy se zvýrazněnou tlačítkem New repository secret (Nový tajný kód úložiště)

11. Konfigurace statické webové aplikace pro připojení k prostředku úložiště

Upravte pracovní GitHub a tajné kódy pro připojení k Azure Storage.

  1. V Visual Studio Code otevřete soubor YAML pracovního postupu a přidejte dvě proměnné prostředí úložiště .github/workflowswith za část do build_and_deploy_job .

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

    Tím se tajné kódy přetáhne do procesu sestavení.

  2. V Visual Studio Code Vyberte Source Control, CtrlShift G a pak výběrem ikony sčítání přidejte změněný soubor *.yml.

  3. Zadejte komentář k potvrzení, například Adding Storage secrets .

  4. Push to your GitHub fork by selecting the Synchronize changes icon on the status bar( (Synchronizovat změny) na stavovém řádku.

    Částečný snímek obrazovky Visual Studio Code stavovém řádku

  5. V automaticky otevíra otevřeném okně potvrďte, jestli chcete do vzdáleného úložiště nasahat a vyžádat je, a vyberte OK.

    Pokud v tomto kroku dojde k chybě, projděte si vzdálené úložiště Git a ujistěte se, že jste naklonovali fork: .

  6. Toto nasazování aktivuje nové sestavení a nasazení pro statickou webovou aplikaci.

12. Ověření dokončení úlohy sestavení a nasazení

  1. Ve webovém prohlížeči se vraťte GitHub forku ukázkového projektu.

  2. Vyberte Actions (Akce)a pak Azure Static Web Apps CI/CD.

  3. Vyberte úlohu Sestavení a nasazení a sledujte dokončení procesu.

    Snímek obrazovky webového prohlížeče se GitHub akcí

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

  1. V Visual Studio Code v Průzkumníku Azure klikněte pravým tlačítkem na statickou webovou aplikaci a vyberte

    Částečný snímek obrazovky s výběrem možnosti Procházet web z webu Azure Static

  2. V novém okně webového prohlížeče zvolte soubor a nahrajte ho.

Řešení potíží s místním připojením Storage účtu

Pokud se vám zobrazí chyba nebo se váš soubor nenahraje do kontejneru, zkontrolujte následující:

  • Znovu vytvořte token SAS a ujistěte se, že je váš token vytvořený Storage úrovni prostředku, a ne na úrovni kontejneru. Zkopírujte nový token do kódu ve správném umístění.
  • Zkontrolujte, že řetězec tokenu, který jste zkopíroval do kódu, neobsahuje ? (otazník) na začátku řetězce.
  • Ověřte nastavení CORS pro váš Storage prostředků.

Upload tlačítka

Soubor src/App.tsx TypeScriptu je součástí vytváření aplikace pomocí create-react-app. Soubor byl upraven tak, aby poskytoval tlačítko pro výběr souboru, tlačítko pro nahrání a podpůrný kód pro poskytnutí této funkce.

Kód, který se připojuje ke zdrojovému kódu Storage Azure Blob, je zvýrazněný. Volání vrátí uploadFileToBlob všechny objekty blob (soubory) v kontejneru jako plochý seznam. Tento seznam se zobrazí s DisplayImagesFromContainer funkcí .

// ./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;

Upload souboru k Azure Storage blob pomocí klientské knihovny sady Azure SDK

Kód pro nahrání souboru do Azure Storage je bez architektury. Vzhledem k tomu, že je kód sestavený pro kurz, byly provedeny volby pro jednoduchost a porozumění. Tyto volby jsou vysvětleny. Měli byste zkontrolovat záměrné použití, zabezpečení a efektivitu vlastního projektu.

Ukázka vytvoří a použije veřejně přístupný kontejner a soubory. Pokud chcete zabezpečit soubory ve vlastním projektu, máte mnoho vrstev, ve kterých můžete řídit, že od vyžadování celkového ověřování k prostředku až po velmi specifická oprávnění pro každý objekt blob.

Závislosti a proměnné

Soubor TypeScriptu azure-storage-blob.ts načte závislosti a načte požadované proměnné pomocí proměnných prostředí nebo řetězců s pevným kódem.

Proměnná Popis
sasToken Token SAS vytvořený pomocí Azure Portal se předá s ? . Před nastavením v proměnné ho sasToken odeberte.
container Název kontejneru v úložišti objektů blob. Můžete si to myslít jako ekvivalent ke složce nebo adresáři pro systém souborů.
storageAccountName Název vašeho prostředku. 
// 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;

Vytvoření Storage klienta a správa kroků

Funkce uploadFileToBlob je hlavní funkcí souboru. Vytvoří objekt klienta pro službu Storage, pak vytvoří klienta do objektu kontejneru, nahraje soubor a pak získá seznam všech objektů blob v kontejneru.

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);
};

Upload souboru do objektu blob

Funkce createBlobInContainer nahraje soubor do kontejneru pomocí třídy createBlobInContainer metody uploadData. Pokud chcete používat funkce prohlížeče, které závisí na typu souboru, například zobrazení obrázku, musí se s požadavkem odeslat typ obsahu.

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);
}

Získání seznamu objektů blob

Funkce získá seznam adres URL pro objekty blob v kontejneru pomocí třídy getBlobsInContainergetBlobsInContainer metody listBlobsFlat. Adresy URL jsou vytvořeny tak, aby se použily jako src obrázek v HTML: <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;
}

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

V Visual Studio Code azure explorer pro skupiny prostředků, klikněte pravým tlačítkem na skupinu prostředků a vyberte Odstranit.

Tím se odstraní všechny prostředky ve skupině, včetně prostředků Storage a statické webové aplikace.

Další kroky

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