자습서: Azure Storage를 사용하여 클라우드에 이미지 데이터 업로드Tutorial: Upload image data in the cloud with Azure Storage

이 자습서는 시리즈의 1부입니다.This tutorial is part one of a series. 이 자습서에서는 Azure Storage 클라이언트 라이브러리를 사용하여 이미지를 스토리지 계정에 업로드하는 웹앱을 배포하는 방법에 대해 알아봅니다.In this tutorial, you will learn how to deploy a web app that uses the Azure Storage Client Library to upload images to a storage account. 완료되면 Azure Storage에서 이미지를 저장 및 표시하는 웹앱이 갖추어집니다.When you're finished, you'll have a web app that stores and displays images from Azure storage.

시리즈 1부에서는 다음 방법에 대해 알아봅니다.In part one of the series, you learn how to:

  • 스토리지 계정 만들기Create a storage account
  • 컨테이너 만들기 및 사용 권한 설정Create a container and set permissions
  • 액세스 키 가져오기Retrieve an access key
  • Azure에 웹앱 배포Deploy a web app to Azure
  • 앱 설정 구성Configure app settings
  • 웹앱과 상호 작용Interact with the web app

필수 조건Prerequisites

이 자습서를 완료하려면 Azure 구독이 필요합니다.To complete this tutorial, you need an Azure subscription. 시작하기 전에 체험 계정을 만듭니다.Create a free account before you begin.

Azure Cloud Shell 사용Use Azure Cloud Shell

Azure는 브라우저를 통해 사용할 수 있는 대화형 셸 환경인 Azure Cloud Shell을 호스트합니다.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell에서 Bash 또는 PowerShell을 사용하여 Azure 서비스 작업을 수행할 수 있습니다.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. 로컬 환경에 아무 것도 설치할 필요 없이 Azure Cloud Shell의 미리 설치된 명령을 사용하여 이 문서의 코드를 실행할 수 있습니다.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell을 시작하려면 다음을 수행합니다.To start Azure Cloud Shell:

옵션Option 예제/링크Example/Link
코드 블록의 오른쪽 위 모서리에서 사용을 선택합니다.Select Try It in the upper-right corner of a code block. 사용해보기를 선택하면 코드가 Cloud Shell에 자동으로 복사되지 않습니다.Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell에 대한 사용 예제
https://shell.azure.com으로 이동하거나 Cloud Shell 시작 버튼을 선택하여 브라우저에서 Cloud Shell을 엽니다.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. 새 창에서 Cloud Shell 시작Launch Cloud Shell in a new window
Azure Portal 오른쪽 위에 있는 메뉴 모음에서 Cloud Shell 단추를 선택합니다.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure Portal의 Cloud Shell 단추

이 문서의 코드를 Azure Cloud Shell에서 실행하려면 다음을 수행합니다.To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell을 시작합니다.Start Cloud Shell.

  2. 코드 블록의 복사 단추를 선택하여 코드를 복사합니다.Select the Copy button on a code block to copy the code.

  3. Windows 및 Linux에서 Ctrl+Shift+V를 선택하거나 macOS에서 Cmd+Shift+V를 선택하여 코드를 Cloud Shell 세션에 붙여넣습니다.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Enter를 선택하여 코드를 실행합니다.Select Enter to run the code.

CLI를 로컬로 설치하여 사용하려면 이 자습서에서 Azure CLI 버전 2.0.4 이상을 실행해야 합니다.To install and use the CLI locally, this tutorial requires that you run the Azure CLI version 2.0.4 or later. az --version을 실행하여 버전을 찾습니다.Run az --version to find the version. 설치 또는 업그레이드가 필요한 경우, Azure CLI 설치를 참조하세요.If you need to install or upgrade, see Install the Azure CLI.

리소스 그룹 만들기Create a resource group

az group create 명령을 사용하여 리소스 그룹을 만듭니다.Create a resource group with the az group create command. Azure 리소스 그룹은 Azure 리소스가 배포 및 관리되는 논리적 컨테이너입니다.An Azure resource group is a logical container into which Azure resources are deployed and managed.

다음 예제에서는 myResourceGroup이라는 리소스 그룹을 만듭니다.The following example creates a resource group named myResourceGroup.

az group create --name myResourceGroup --location southeastasia

스토리지 계정 만들기Create a storage account

이 샘플은 Azure Storage 계정의 blob 컨테이너에 이미지를 업로드합니다.The sample uploads images to a blob container in an Azure Storage account. 저장소 계정은 Azure Storage 데이터 개체의 저장 및 액세스를 위한 고유한 네임스페이스를 제공합니다.A storage account provides a unique namespace to store and access your Azure storage data objects. az storage account create 명령을 사용하여 만든 리소스 그룹에 저장소 계정을 만듭니다.Create a storage account in the resource group you created by using the az storage account create command.

중요

자습서의 2부에서는 Blob 스토리지에서 Azure Event Grid를 사용합니다.In part 2 of the tutorial, you use Azure Event Grid with Blob storage. 스토리지 계정은 Event Grid를 지원하는 Azure 지역에 만듭니다.Make sure to create your storage account in an Azure region that supports Event Grid. 지원되는 지역 목록은 지역별 Azure 제품을 참조하세요.For a list of supported regions, see Azure products by region.

다음 명령에서 <blob_storage_account> 자리 표시자가 표시되는 Blob Storage 계정에 대해 글로벌로 고유한 이름으로 바꿉니다.In the following command, replace your own globally unique name for the Blob storage account where you see the <blob_storage_account> placeholder.

$blobStorageAccount="<blob_storage_account>"

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

Blob 스토리지 컨테이너 만들기Create Blob storage containers

앱은 Blob Storage 계정에서 두 컨테이너를 사용합니다.The app uses two containers in the Blob storage account. 컨테이너는 폴더와 비슷하며 Blob을 저장합니다.Containers are similar to folders and store blobs. images 컨테이너는 앱이 고해상도 이미지를 업로드하는 위치입니다.The images container is where the app uploads full-resolution images. 시리즈의 뒷부분에서 Azure 함수 앱은 크기가 조정된 이미지 썸네일을 썸네일 컨테이너에 업로드합니다.In a later part of the series, an Azure function app uploads resized image thumbnails to the thumbnails container.

az storage account keys list 명령을 사용하여 저장소 계정 키를 가져옵니다.Get the storage account key by using the az storage account keys list command. 그런 다음, 이 키를 사용하여 az storage container create 명령으로 두 개의 컨테이너를 만듭니다.Then, use this key to create two containers with the az storage container create command.

images 컨테이너의 공용 액세스는 off로 설정되고,The images container's public access is set to off. thumbnails 컨테이너의 공용 액세스는 container로 설정됩니다.The thumbnails container's public access is set to container. container 공용 액세스 설정을 사용하면 웹 페이지를 방문하는 사용자가 썸네일을 볼 수 있습니다.The container public access setting permits users who visit the web page to view the thumbnails.

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

az storage container create -n images --account-name $blobStorageAccount --account-key $blobStorageAccountKey --public-access off

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

echo "Make a note of your Blob storage account key..."
echo $blobStorageAccountKey

Blob 스토리지 계정 이름과 키를 적어 두세요.Make a note of your Blob storage account name and key. 샘플 앱에서 이러한 설정을 통해 스토리지 계정에 연결하여 이미지를 업로드합니다.The sample app uses these settings to connect to the storage account to upload the images.

App Service 플랜 만들기Create an App Service plan

App Service 계획은 위치, 크기 및 앱을 호스트하는 웹 서버 팜의 기능을 지정합니다.An App Service plan specifies the location, size, and features of the web server farm that hosts your app.

az appservice plan create 명령으로 App Service 계획을 만듭니다.Create an App Service plan with the az appservice plan create command.

다음 예에서는 체험 가격 책정 계층에서 myAppServicePlan이라는 App Service 계획을 만듭니다.The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

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

웹앱 만들기Create a web app

웹앱은 GitHub 샘플 리포지토리에서 배포되는 샘플 앱 코드에 대한 호스팅 공간을 제공합니다.The web app provides a hosting space for the sample app code that's deployed from the GitHub sample repository. az webapp create 명령을 사용하여 myAppServicePlan App Service 계획에 웹앱을 만듭니다.Create a web app in the myAppServicePlan App Service plan with the az webapp create command.

다음 명령에서 <web_app>을 고유한 이름으로 바꿉니다.In the following command, replace <web_app> with a unique name. 유효한 문자는 a-z, 0-9-입니다.Valid characters are a-z, 0-9, and -. <web_app>이 고유하지 않으면 다음 오류 메시지가 표시됩니다. 이름이 <web_app>인 웹 사이트가 이미 있습니다.If <web_app> is not unique, you get the error message: Website with given name <web_app> already exists. 웹앱의 기본 URL은 https://<web_app>.azurewebsites.net입니다.The default URL of the web app is https://<web_app>.azurewebsites.net.

$webapp="<web_app>"

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

GitHub 리포지토리에서 샘플 앱 배포Deploy the sample app from the GitHub repository

App Service는 웹앱에 콘텐츠를 배포하는 여러 가지 방법을 지원합니다.App Service supports several ways to deploy content to a web app. 이 자습서에서는 공용 GitHub 샘플 리포지토리에서 웹앱을 배포합니다.In this tutorial, you deploy the web app from a public GitHub sample repository. az webapp deployment source config 명령을 사용하여 웹앱에 대한 Git 배포를 구성합니다.Configure GitHub deployment to the web app with the az webapp deployment source config command.

샘플 프로젝트에는 ASP.NET MVC 앱이 포함되어 있습니다.The sample project contains an ASP.NET MVC app. 이 앱은 이미지를 받아들이고, 스토리지 계정에 저장하고, 썸네일 이미지 컨테이너에서 이미지를 표시합니다.The app accepts an image, saves it to a storage account, and displays images from a thumbnail container. 웹앱은 Azure Storage 클라이언트 라이브러리의 Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blob 및 Microsoft.Azure.Storage.Auth 네임스페이스를 사용하여 Azure 스토리지와 상호 작용합니다.The web app uses the Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blob, and the Microsoft.Azure.Storage.Auth namespaces from the Azure Storage client library to interact with Azure storage.

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

웹앱 설정 구성Configure web app settings

샘플 웹앱은 Azure Storage 클라이언트 라이브러리를 사용하여 이미지 업로드에 사용되는 액세스 토큰을 요청합니다.The sample web app uses the Azure Storage Client Library to request access tokens, which are used to upload images. Storage SDK에서 사용되는 스토리지 계정 자격 증명은 웹앱에 대한 앱 설정에 설정됩니다.The storage account credentials used by the Storage SDK are set in the app settings for the web app. az webapp config appsettings set 명령을 사용하여 배포된 앱에 앱 설정을 추가합니다.Add app settings to the deployed app with the az webapp config appsettings set command.

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

웹앱이 배포되고 구성되면 앱에서 이미지 업로드 기능을 테스트할 수 있습니다.After you deploy and configure the web app, you can test the image upload functionality in the app.

이미지 업로드Upload an image

웹앱을 테스트하려면 게시된 앱의 URL로 이동합니다.To test the web app, browse to the URL of your published app. 웹앱의 기본 URL은 https://<web_app>.azurewebsites.net입니다.The default URL of the web app is https://<web_app>.azurewebsites.net.

사진 업로드 지역을 선택하여 파일을 선택 및 업로드하거나 파일을 해당 지역으로 끌어갑니다.Select the Upload photos region to select and upload a file, or drag a file onto the region. 성공적으로 업로드되면 이미지가 사라집니다.The image disappears if successfully uploaded. 생성된 썸네일 섹션은 이 항목의 뒷부분에서 테스트할 때까지 비어 있습니다.The Generated Thumbnails section will remain empty until we test it later in this topic.

.NET 사진 업로드

샘플 코드에서 Storagehelper.cs 파일의 UploadFiletoStorage 작업은 UploadFromStreamAsync 메서드를 통해 이미지를 스토리지 계정 내의 images 컨테이너에 업로드하는 데 사용됩니다.In the sample code, the UploadFiletoStorage task in the Storagehelper.cs file is used to upload the images to the images container within the storage account using the UploadFromStreamAsync method. 다음 코드 샘플에는 UploadFiletoStorage 작업이 포함되어 있습니다.The following code sample contains the UploadFiletoStorage task.

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName, AzureStorageConfig _storageConfig)
{
    // Create storagecredentials object by reading the values from the configuration (appsettings.json)
    StorageCredentials storageCredentials = new StorageCredentials(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create cloudstorage account by passing the storagecredentials
    CloudStorageAccount storageAccount = new CloudStorageAccount(storageCredentials, true);

    // Create the blob client.
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    // Get reference to the blob container by passing the name by reading the value from the configuration (appsettings.json)
    CloudBlobContainer container = blobClient.GetContainerReference(_storageConfig.ImageContainer);

    // Get the reference to the block blob from the container
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);

    // Upload the file
    await blockBlob.UploadFromStreamAsync(fileStream);

    return await Task.FromResult(true);
}

다음 클래스 및 메서드는 이전 작업에서 사용됩니다.The following classes and methods are used in the preceding task:

클래스Class 방법Method
StorageCredentialsStorageCredentials
CloudStorageAccountCloudStorageAccount CreateCloudBlobClientCreateCloudBlobClient
CloudBlobClientCloudBlobClient GetContainerReferenceGetContainerReference
CloudBlobContainerCloudBlobContainer GetBlockBlobReferenceGetBlockBlobReference
CloudBlockBlobCloudBlockBlob UploadFromStreamAsyncUploadFromStreamAsync

스토리지 계정에서 이미지가 표시되는지 확인합니다.Verify the image is shown in the storage account

Azure Portal에 로그인합니다.Sign in to the Azure portal. 왼쪽 메뉴에서 스토리지 계정을 선택하고 스토리지 계정의 이름을 선택합니다.From the left menu, select Storage accounts, then select the name of your storage account. 컨테이너를 선택한 다음, 이미지 컨테이너를 선택합니다.Select Containers, then select the images container.

컨테이너에 이미지가 표시되는지 확인합니다.Verify the image is shown in the container.

Azure Portal 이미지 컨테이너 목록

썸네일 보기 테스트Test thumbnail viewing

썸네일 보기를 테스트하려면 이미지를 thumbnails 컨테이너에 업로드하여 앱에서 thumbnails 컨테이너를 읽을 수 있는지 확인합니다.To test thumbnail viewing, you'll upload an image to the thumbnails container to check whether the app can read the thumbnails container.

Azure Portal에 로그인합니다.Sign in to the Azure portal. 왼쪽 메뉴에서 스토리지 계정을 선택하고 스토리지 계정의 이름을 선택합니다.From the left menu, select Storage accounts, then select the name of your storage account. 컨테이너를 선택한 다음, 썸네일 컨테이너를 선택합니다.Select Containers, then select the thumbnails container. 업로드를 선택하여 blob 업로드 창을 엽니다.Select Upload to open the Upload blob pane.

파일 선택기를 사용하여 파일을 선택하고, 업로드를 선택합니다.Choose a file with the file picker and select Upload.

앱으로 다시 이동하여 썸네일 컨테이너에 업로드된 이미지가 보이는지 확인합니다.Navigate back to your app to verify that the image uploaded to the thumbnails container is visible.

시리즈의 2부에서는 썸네일 이미지를 자동으로 만들므로 이 이미지가 필요하지 않습니다.In part two of the series, you automate thumbnail image creation so you don't need this image. Azure Portal의 썸네일 컨테이너에서 업로드한 이미지를 선택하고 삭제를 선택하여 이미지를 삭제합니다.In the thumbnails container in the Azure portal, select the image you uploaded and select Delete to delete the image.

CDN을 사용하도록 설정하여 Azure 스토리지 계정의 콘텐츠를 캐시할 수 있습니다.You can enable CDN to cache content from your Azure storage account. Azure 스토리지 계정으로 CDN을 사용하도록 설정하는 방법에 대한 자세한 내용은 Azure CDN과 Azure 스토리지 계정 통합을 참조하세요.For more information about how to enable CDN with your Azure storage account, see Integrate an Azure storage account with Azure CDN.

다음 단계Next steps

시리즈의 1부에서는 스토리지와 상호 작용하도록 웹앱을 구성하는 방법을 알아보았습니다.In part one of the series, you learned how to configure a web app to interact with storage.

Event Grid를 사용하여 이미지의 크기를 조정하는 Azure 함수를 트리거하는 방법을 알아보려면 시리즈의 2부로 계속 진행하세요.Go on to part two of the series to learn about using Event Grid to trigger an Azure function to resize an image.