Руководство по Передача данных изображений в облако с помощью службы хранилища Azure

Это руководство представляет первую часть цикла. В этом руководстве описано, как развернуть веб-приложение. Веб-приложение использует клиентскую библиотеку Хранилища BLOB-объектов Azure для отправки изображений в учетную запись хранения. По окончании у вас будет веб-приложение, которое хранит и показывает изображения из службы хранилища Azure.

NET (пакет SDK версии 12).

Приложение для изменения размера изображений на платформе .NET

В первой части цикла вы узнаете, как выполнять такие задачи:

  • Создание учетной записи хранения
  • Создание контейнера и настройка разрешений.
  • Получение ключа доступа.
  • Развертывание веб-приложения в Azure.
  • Настройка параметров приложения
  • Взаимодействие с веб-приложением.

Предварительные требования

Для работы с этим руководством вам потребуется подписка Azure. Перед началом работы создайте бесплатную учетную запись.

Использование Azure Cloud Shell

В Azure есть Azure Cloud Shell, интерактивная оболочка среды, с которой можно работать в браузере. Для работы со службами Azure можно использовать Bash или PowerShell с Cloud Shell. Для запуска кода из этой статьи можно использовать предварительно установленные команды Cloud Shell. Ничего дополнительного в локальной среде устанавливать не нужно.

Начало работы с Azure Cloud Shell

Параметр Пример и ссылка
Нажмите кнопку Попробовать в правом верхнем углу блока с кодом. При нажатии кнопки Попробовать код не копируется в Cloud Shell автоматически. Открытие Azure Cloud Shell с помощью кнопки "Попробовать"
Перейдите по адресу https://shell.azure.com или нажмите кнопку Запуск Cloud Shell, чтобы открыть Cloud Shell в браузере. Запуск Cloud Shell в новом окне
Нажмите кнопку Cloud Shell в строке меню в правом верхнем углу окна портала Azure. Кнопка "Cloud Shell" на портале Azure

Чтобы выполнить код из этой статьи в Azure Cloud Shell, выполните следующие действия:

  1. Запустите Cloud Shell.

  2. В блоке кода нажмите кнопку Копировать, чтобы скопировать код.

  3. Вставьте код в окно сеанса Cloud Shell, нажав клавиши CTRL+SHIFT+V в Windows и Linux или CMD+SHIFT+V в macOS.

  4. Нажмите клавишу ВВОД, чтобы выполнить код.

Чтобы установить и использовать интерфейс командной строки локально, запустите Azure CLI 2.0.4 или более поздней версии. Чтобы узнать версию, выполните команду az --version. Если вам необходимо выполнить установку или обновление, см. статью Установка Azure CLI.

Создание группы ресурсов

В следующем примере создается группа ресурсов myResourceGroup.

Создайте группу ресурсов с помощью команды New-AzResourceGroup. Группа ресурсов Azure является логическим контейнером, в котором происходит развертывание ресурсов Azure и управление ими.

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

Создание учетной записи хранения

В примере изображения отправляются в контейнер больших двоичных объектов в учетной записи хранения Azure. Учетная запись хранения предоставляет уникальное пространство имен для хранения ваших объектов данных в службе хранилища Azure и доступа к ним.

Важно!

Во второй части этого руководства используется Сетка событий Azure для хранилища BLOB-объектов. Убедитесь в том, что созданная учетная запись хранения в регионе Azure поддерживает Сетку событий. Список поддерживаемых регионов см. в разделе Доступность продуктов по регионам.

В следующей команде замените глобально уникальное имя учетной записи хранения больших двоичных объектов там, где встречается заполнитель <blob_storage_account>.

Создайте учетную запись хранения в созданной вами группе ресурсов с помощью команды New-AzStorageAccount.

$blobStorageAccount="<blob_storage_account>"

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

Создание контейнеров хранилища BLOB-объектов

Приложение использует два типа контейнеров в учетной записи хранилища больших двоичных объектов. Контейнеры похожи на папки и используются для хранения больших двоичных объектов. Контейнер изображений — это контейнер, в который отправляются изображения с высоким разрешением. В одной из последующих статей этого цикла приложение-функция Azure будет передавать эскизы изображений измененного размера в контейнер thumbnails.

Общему доступу к контейнеру Изображения присваивается значение off. Общему доступу к контейнеру Эскизы присваивается значение container. Параметр общего доступа container позволяет пользователям веб-страницы просматривать эскизы.

Получите ключи учетной записи хранения с помощью команды Get-AzStorageAccountKey. Затем используйте этот ключ для создания двух контейнеров командой 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

Запишите имя и ключ учетной записи хранения больших двоичных объектов. В этом примере приложения эти параметры используются для подключения к учетной записи хранения и отправки изображений.

Создание плана службы приложений

План службы приложений указывает расположение, размер и функции фермы веб-серверов, в которой размещается приложение.

В следующем примере создается план службы приложений с именем myAppServicePlan и ценовой категорией Бесплатный.

Создайте план Службы приложений, выполнив команду New-AzAppServicePlan.

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

Создание веб-приложения

Веб-приложение предоставляет пространство для размещения примера кода приложения, развернутого из примера репозитория GitHub.

В следующей команде замените <web_app> уникальным именем. Допустимые символы: a-z, 0-9 и -. Если <web_app> не является уникальным, отобразится сообщение об ошибке: Веб-сайт с именем <web_app> уже существует. URL-адрес приложения по умолчанию: https://<web_app>.azurewebsites.net.

Создайте веб-приложение в плане Службы приложений myAppServicePlan с помощью команды New-AzWebApp.

$webapp="<web_app>"

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

Развертывание примера приложения из репозитория GitHub

NET (пакет SDK версии 12).

Служба приложений поддерживает несколько способов развертывания содержимого для веб-приложения. В этом руководстве развертывается веб-приложение из общедоступного репозитория примеров GitHub. Настройте для веб-приложения развертывание GitHub с помощью команды az webapp deployment source config.

Пример проекта содержит приложение ASP.NET MVC. Оно принимает изображение, сохраняет его в учетную запись хранения и показывает изображения из контейнера эскизов. Веб-приложение использует пространства имен Azure.Storage, Azure.Storage.Blobs и Azure.Storage.Blobs.Models для взаимодействия со службой хранилища Azure.

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

Служба приложений поддерживает несколько способов развертывания содержимого для веб-приложения. В этом руководстве развертывается веб-приложение из общедоступного репозитория примеров GitHub. Настройте для веб-приложения развертывание GitHub с помощью команды 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

Настройка параметров веб-приложения

NET (пакет SDK версии 12).

В примере веб-приложения для отправки изображений используется API службы хранилища Azure для .NET. Учетные данные записи хранения задаются в параметрах приложения для веб-приложения. Добавить параметры в развернутое приложение можно с помощью команды az webapp config appsettings set или New-AzStaticWebAppSetting.

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

В примере веб-приложения для отправки изображений используется клиентская библиотека службы хранилища Azure для JavaScript. Учетные данные учетной записи хранения задаются в параметрах веб-приложения. Добавить параметры в развернутое приложение можно с помощью команды az webapp config appsettings set или New-AzStaticWebAppSetting.

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

После развертывания и настройки веб-приложения можно проверить возможность отправки изображений в приложении.

Передача образа

Чтобы проверить веб-приложение, перейдите по URL-адресу опубликованного приложения. URL-адрес приложения по умолчанию: https://<web_app>.azurewebsites.net.

NET (пакет SDK версии 12).

Выберите область Отправка фотографий, чтобы указать и отправить файл, или перетащите файлы в нее. При успешной отправке изображение исчезнет. Раздел Созданные эскизы будет оставаться пустым, пока мы не протестируем его позднее.

Отправка фотографий в .NET

В примере кода задача UploadFileToStorage в файле Storagehelper.cs используется для отправки изображений в контейнер Изображения в учетной записи хранения с помощью метода UploadAsync. В следующем примере кода содержится задача UploadFileToStorage.

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

В предыдущей задаче используются следующие классы и методы:

Class Метод
URI Uri constructor
StorageSharedKeyCredential StorageSharedKeyCredential(String, String) constructor
BlobClient UploadAsync

Чтобы выбрать файл, нажмите кнопку Выбрать файл, а затем Загрузить изображение. Раздел Созданные эскизы будет оставаться пустым, пока мы не протестируем его позднее.

Отправка фотографий в Node.js

В примере кода маршрут post отвечает за отправку изображения в контейнер BLOB-объектов. Маршрут использует модули для обработки отправки:

  • multer реализует стратегию отправки для обработчика маршрутов.
  • into-stream преобразует буфер в поток, как того требует uploadStream.

Когда файл отправляется в маршрут, содержимое файла остается в памяти до тех пор, пока файл не будет загружен в контейнер BLOB-объектов.

Важно!

Загрузка очень больших файлов в память может негативно повлиять на производительность вашего веб-приложения. Если вы ожидаете, что пользователи опубликуют большие файлы, можете просмотреть промежуточные файлы в файловой системе веб-сервера, а затем планировать загрузку в хранилище BLOB-объектов. После того как файлы попадают в хранилище 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;

Проверка отображения изображения в учетной записи хранения

Войдите на портал Azure. В меню слева выберите Учетные записи хранения, а затем имя своей учетной записи хранения. Выберите Контейнеры, а затем выберите контейнер изображений.

Убедитесь, что изображение отображается в контейнере.

Список контейнеров изображений на портале Azure

Тестирование просмотра эскизов

Для проверки просмотра эскизов отправьте изображение в контейнер Эскизы, чтобы убедиться, что приложение может считывать контейнер Эскизы.

Войдите на портал Azure. В меню слева выберите Учетные записи хранения, а затем имя своей учетной записи хранения. Выберите Контейнеры, а затем выберите контейнер эскизов. Щелкните Отправить, чтобы открыть область Передать BLOB-объект.

С помощью средства выбора файлов выберите файл и щелкните Отправить.

Вернитесь к своему приложению и убедитесь, что изображение, отправленное в контейнер эскизов, отображается.

NET (пакет SDK версии 12).

Приложение для изменения размера изображений .NET с новым изображением

Во второй части серии вы автоматизируете создание эскизных изображений, что позволит обойтись без этого изображения. В контейнере эскизов выберите отправленное изображение и щелкните Удалить, чтобы удалить его.

Включите сеть доставки содержимого, чтобы кэшировать содержимое учетной записи хранения. Дополнительные сведения см. в статье Интеграция учетной записи хранения Azure с Azure CDN.

Дальнейшие действия

В первой части серии вы узнали, как настроить веб-приложение для взаимодействия с хранилищем.

Перейдите ко второй части руководства, чтобы узнать об использовании Сетки событий для активации функции Azure, изменяющей размер изображения.

Automate resizing uploaded images using Event Grid (Автоматическое изменение размера отправленных изображений с помощью службы "Сетка событий")