Kurz: Upload dat obrázků v cloudu pomocí Azure Storage

Vytvořte skupinu prostředků pomocí příkazu New-AzResourceGroup. Skupina prostředků Azure je logický kontejner, ve kterém se nasazují a spravují prostředky Azure.

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

Vytvořte skupinu prostředků pomocí příkazu az group create. Skupina prostředků Azure je logický kontejner, ve kterém se nasazují a spravují prostředky Azure.

az group create --name myResourceGroup --location southeastasia

Ve skupině prostředků, kterou jste vytvořili, vytvořte účet úložiště pomocí příkazu New-AzStorageAccount.

$blobStorageAccount="<blob_storage_account>"

New-AzStorageAccount -ResourceGroupName myResourceGroup -Name $blobStorageAccount -SkuName Standard_LRS -Location southeastasia -Kind StorageV2 -AccessTier Hot

Ve skupině prostředků, kterou jste vytvořili vytvořte účet úložiště pomocí příkazu az storage account create.

blobStorageAccount="<blob_storage_account>"

az storage account create --name $blobStorageAccount --location southeastasia \
  --resource-group myResourceGroup --sku Standard_LRS --kind StorageV2 --access-tier hot

Získejte klíč účtu úložiště pomocí příkazu Get-AzStorageAccountKey. Pak pomocí tohoto klíče vytvořte dva kontejnery pomocí příkazu New-AzStorageContainer.

$blobStorageAccountKey = (Get-AzStorageAccountKey -ResourceGroupName myResourceGroup -Name $blobStorageAccount).Key1
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

New-AzStorageContainer -Name images -Context $blobStorageContext
New-AzStorageContainer -Name thumbnails -Permission Container -Context $blobStorageContext

Pomocí příkazu az storage account keys list zjistěte klíč účtu úložiště. Pak pomocí tohoto klíče vytvořte dva kontejnery pomocí příkazu az storage container create.

blobStorageAccountKey=$(az storage account keys list -g myResourceGroup \
  -n $blobStorageAccount --query "[0].value" --output tsv)

az storage container create --name images \
  --account-name $blobStorageAccount \
  --account-key $blobStorageAccountKey

az storage container create --name thumbnails \
  --account-name $blobStorageAccount \
  --account-key $blobStorageAccountKey --public-access container

Vytvořte plán App Service pomocí příkazu New-AzAppServicePlan.

New-AzAppServicePlan -ResourceGroupName myResourceGroup -Name myAppServicePlan -Tier "Free"

Pomocí příkazu az appservice plan create vytvořte plán služby App Service.

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free

Vytvořte webovou aplikaci v myAppServicePlan App Service pomocí příkazu New-AzWebApp.

$webapp="<web_app>"

New-AzWebApp -ResourceGroupName myResourceGroup -Name $webapp -AppServicePlan myAppServicePlan

Pomocí příkazu az webapp create vytvořte webovou aplikaci v plánu služby App Service myAppServicePlan.

webapp="<web_app>"

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan

Služba App Service podporuje několik způsobů nasazení obsahu do webové aplikace. V tomto kurzu nasadíte webovou aplikaci z veřejného úložiště ukázek GitHubu. Nakonfigurujte nasazení z GitHubu do webové aplikace pomocí příkazu az webapp deployment source config.

Ukázkový projekt obsahuje ASP.NET MVC. Aplikace přijme obrázek, uloží ho do účtu úložiště a zobrazí obrázky z kontejneru miniatur. Webová aplikace používá Azure.Storage, Azure.Storage. Objekty bloba Azure.Storage. Obory názvů Blobs.Models pro interakci s Azure Storage službou

az webapp deployment source config --name $webapp --resource-group myResourceGroup \
  --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

az webapp deployment source config --name $webapp --resource-group myResourceGroup `
  --branch master --manual-integration `
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

Služba App Service podporuje několik způsobů nasazení obsahu do webové aplikace. V tomto kurzu nasadíte webovou aplikaci z veřejného úložiště ukázek GitHubu. Nakonfigurujte nasazení z GitHubu do webové aplikace pomocí příkazu az webapp deployment source config.

az webapp deployment source config --name $webapp --resource-group myResourceGroup \
  --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/azure-sdk-for-js-storage-blob-stream-nodejs

az webapp deployment source config --name $webapp --resource-group myResourceGroup `
  --branch master --manual-integration `
  --repo-url https://github.com/Azure-Samples/azure-sdk-for-js-storage-blob-stream-nodejs

Ukázková webová aplikace k nahrávání obrázků Azure Storage rozhraní API pro .NET. Storage účtu jsou nastavené v nastavení aplikace pro webovou aplikaci. Pomocí příkazu az webapp config appsettings set nebo New-AzStaticWebAppSetting přidejte do nasazené aplikace nastavení aplikace.

az webapp config appsettings set --name $webapp --resource-group myResourceGroup \
  --settings AzureStorageConfig__AccountName=$blobStorageAccount \
    AzureStorageConfig__ImageContainer=images \
    AzureStorageConfig__ThumbnailContainer=thumbnails \
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

az webapp config appsettings set --name $webapp --resource-group myResourceGroup `
  --settings AzureStorageConfig__AccountName=$blobStorageAccount `
    AzureStorageConfig__ImageContainer=images `
    AzureStorageConfig__ThumbnailContainer=thumbnails `
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

Ukázková webová aplikace k nahrávání obrázků Azure Storage klientskou knihovnu pro JavaScript. Přihlašovací údaje účtu úložiště se nastaví v nastavení aplikace pro webovou aplikaci. Pomocí příkazu az webapp config appsettings set nebo New-AzStaticWebAppSetting přidejte do nasazené aplikace nastavení aplikace.

az webapp config appsettings set --name $webapp --resource-group myResourceGroup \
  --settings AZURE_STORAGE_ACCOUNT_NAME=$blobStorageAccount \
    AZURE_STORAGE_ACCOUNT_ACCESS_KEY=$blobStorageAccountKey

az webapp config appsettings set --name $webapp --resource-group myResourceGroup `
  --settings AZURE_STORAGE_ACCOUNT_NAME=$blobStorageAccount `
  AZURE_STORAGE_ACCOUNT_ACCESS_KEY=$blobStorageAccountKey

Vyberte oblast Upload photos a určete a nahrajte soubor, nebo přetáhněte soubor do oblasti. Obrázek po úspěšném nahrání zmizí. Část Generated Thumbnails (Vygenerované miniatury) zůstane prázdná, dokud ji později v tomto kurzu nebudeme testovat.

V ukázkovém kódu se úloha v souboru UploadFileToStorage Storagehelper.cs používá k nahrání obrázků do kontejneru images v rámci účtu úložiště pomocí metody UploadAsync. Úlohu UploadFileToStorage obsahuje následující vzorek kódu.

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName,
                                                    AzureStorageConfig _storageConfig)
{
    // Create a URI to the blob
    Uri blobUri = new Uri("https://" +
                          _storageConfig.AccountName +
                          ".blob.core.windows.net/" +
                          _storageConfig.ImageContainer +
                          "/" + fileName);

    // Create StorageSharedKeyCredentials object by reading
    // the values from the configuration (appsettings.json)
    StorageSharedKeyCredential storageCredentials =
        new StorageSharedKeyCredential(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create the blob client.
    BlobClient blobClient = new BlobClient(blobUri, storageCredentials);

    // Upload the file
    await blobClient.UploadAsync(fileStream);

    return await Task.FromResult(true);
}

Předchozí úloha využívá následující třídy a metody:

Vyberte Zvolit soubor a vyberte soubor a potom klikněte na Upload Image. Část Generated Thumbnails (Vygenerované miniatury) zůstane prázdná, dokud ji později v tomto kurzu nebudeme testovat.

Ve vzorovém kódu je za nahrání obrázku do kontejneru objektů blob zodpovědná trasa post. Tato trasa při zpracování nahrávání využívá následující moduly:

• multer implementuje strategii nahrávání pro obslužnou rutinu trasy.
• into-stream převede vyrovnávací paměť na datový proud podle požadavků uploadStream.

Při posílání souboru do trasy zůstane obsah souboru v paměti, dokud se soubor nenahraje do kontejneru objektů blob.

if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}

const {
  BlobServiceClient,
  StorageSharedKeyCredential,
  newPipeline
} = require('@azure/storage-blob');

const express = require('express');
const router = express.Router();
const containerName1 = 'thumbnails';
const multer = require('multer');
const inMemoryStorage = multer.memoryStorage();
const uploadStrategy = multer({ storage: inMemoryStorage }).single('image');
const getStream = require('into-stream');
const containerName2 = 'images';
const ONE_MEGABYTE = 1024 * 1024;
const uploadOptions = { bufferSize: 4 * ONE_MEGABYTE, maxBuffers: 20 };

const sharedKeyCredential = new StorageSharedKeyCredential(
  process.env.AZURE_STORAGE_ACCOUNT_NAME,
  process.env.AZURE_STORAGE_ACCOUNT_ACCESS_KEY);
const pipeline = newPipeline(sharedKeyCredential);

const blobServiceClient = new BlobServiceClient(
  `https://${process.env.AZURE_STORAGE_ACCOUNT_NAME}.blob.core.windows.net`,
  pipeline
);

const getBlobName = originalName => {
  // Use a random number to generate a unique file name, 
  // removing "0." from the start of the string.
  const identifier = Math.random().toString().replace(/0\./, '');
  return `${identifier}-${originalName}`;
};

router.get('/', async (req, res, next) => {

  let viewData;

  try {
    const containerClient = blobServiceClient.getContainerClient(containerName1);
    const listBlobsResponse = await containerClient.listBlobFlatSegment();

    for await (const blob of listBlobsResponse.segment.blobItems) {
      console.log(`Blob: ${blob.name}`);
    }

    viewData = {
      title: 'Home',
      viewName: 'index',
      accountName: process.env.AZURE_STORAGE_ACCOUNT_NAME,
      containerName: containerName1
    };

    if (listBlobsResponse.segment.blobItems.length) {
      viewData.thumbnails = listBlobsResponse.segment.blobItems;
    }
  } catch (err) {
    viewData = {
      title: 'Error',
      viewName: 'error',
      message: 'There was an error contacting the blob storage container.',
      error: err
    };
    res.status(500);
  } finally {
    res.render(viewData.viewName, viewData);
  }
});

router.post('/', uploadStrategy, async (req, res) => {
  const blobName = getBlobName(req.file.originalname);
  const stream = getStream(req.file.buffer);
  const containerClient = blobServiceClient.getContainerClient(containerName2);;
  const blockBlobClient = containerClient.getBlockBlobClient(blobName);

  try {
    await blockBlobClient.uploadStream(stream,
      uploadOptions.bufferSize, uploadOptions.maxBuffers,
      { blobHTTPHeaders: { blobContentType: "image/jpeg" } });
    res.render('success', { message: 'File uploaded to Azure Blob Storage.' });
  } catch (err) {
    res.render('error', { message: err.message });
  }
});

module.exports = router;