1단계: Azure Storage를 사용하여 클라우드에 이미지 데이터 업로드

  • 아티클

이 자습서는 시리즈의 1부입니다. 이 자습서에서는 웹앱을 배포하는 방법을 알아봅니다. 웹앱은 Azure Blob Storage 클라이언트 라이브러리를 사용하여 이미지를 스토리지 계정에 업로드합니다.

시리즈의 1부에서는 다음 작업을 수행합니다.

  • 저장소 계정 만들기
  • 컨테이너 만들기 및 사용 권한 설정
  • 액세스 키 가져오기
  • Azure에 웹앱 배포
  • 앱 설정 구성
  • 웹앱과 상호 작용

필수 조건

이 자습서를 완료하려면 Azure 구독이 필요합니다. 시작하기 전에 체험 계정을 만듭니다.

Azure Cloud Shell

Azure는 브라우저를 통해 사용할 수 있는 대화형 셸 환경인 Azure Cloud Shell을 호스트합니다. Cloud Shell에서 Bash 또는 PowerShell을 사용하여 Azure 서비스 작업을 수행할 수 있습니다. 로컬 환경에 아무 것도 설치할 필요 없이 Azure Cloud Shell의 미리 설치된 명령을 사용하여 이 문서의 코드를 실행할 수 있습니다.

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

옵션 예제/링크
코드 또는 명령 블록의 오른쪽 상단에서 시도를 선택합니다. 시도를 선택해도 코드 또는 명령이 Cloud Shell에 자동으로 복사되지 않습니다. Screenshot that shows an example of Try It for Azure Cloud Shell.
https://shell.azure.com으로 이동하거나 Cloud Shell 시작 단추를 선택하여 브라우저에서 Cloud Shell을 엽니다. Button to launch Azure Cloud Shell.
Azure Portal의 오른쪽 위에 있는 메뉴 모음에서 Cloud Shell 단추를 선택합니다. Screenshot that shows the Cloud Shell button in the Azure portal

Azure Cloud Shell을 사용하려면:

  1. Cloud Shell을 시작합니다.

  2. 코드 블록(또는 명령 블록)에서 복사 단추를 선택하여 코드 또는 명령을 복사합니다.

  3. Windows 및 Linux에서 Ctrl+Shift+V를 선택하거나 macOS에서 Cmd+Shift+V를 선택하여 코드 또는 명령을 Cloud Shell 세션에 붙여넣습니다.

  4. Enter를 선택하여 코드 또는 명령을 실행합니다.

리소스 그룹 만들기

Important

자습서의 2단계에서는 이 단계에서 만든 Blob Storage와 함께 Azure Event Grid를 사용합니다. Event Grid를 지원하는 Azure 지역에 스토리지 계정을 만듭니다. 지원되는 지역 목록은 지역별 Azure 제품을 참조하세요.

  1. Azure Cloud Shell에서 아직 선택하지 않은 경우 왼쪽 상단에 있는 Bash를 선택합니다.

    Screenshot showing the Azure Cloud Shell with the Bash option selected.

  2. az group create 명령을 사용하여 리소스 그룹을 만듭니다. Azure 리소스 그룹은 Azure 리소스가 배포 및 관리되는 논리적 컨테이너입니다.

    참고 항목

    region 및 rgName(리소스 그룹 이름)에 대해 적절한 값을 설정합니다.

    region="eastus"
rgName="egridtutorialrg"
az group create --name $rgName --location $region

저장소 계정 만들기

이 샘플은 Azure 스토리지 계정의 Blob 컨테이너에 이미지를 업로드합니다.

az storage account create 명령을 사용하여 만든 리소스 그룹에 스토리지 계정을 만듭니다.

blobStorageAccount="myblobstorage$RANDOM"

az storage account create --name $blobStorageAccount --location $region \
  --resource-group $rgName --sku Standard_LRS --kind StorageV2 --access-tier hot --allow-blob-public-access true

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

앱은 Blob Storage 계정에서 두 컨테이너를 사용합니다. images 컨테이너는 앱이 고해상도 이미지를 업로드하는 위치입니다. 시리즈의 두 번째 단계에서는 Azure 함수 앱이 크기가 조정된 이미지 썸네일을 thumbnails 컨테이너에 업로드합니다.

images 컨테이너의 공용 액세스는 off로 설정되고, thumbnails 컨테이너의 공용 액세스는 container로 설정됩니다. container 공용 액세스 설정을 사용하면 웹 페이지를 방문하는 사용자가 썸네일을 볼 수 있습니다.

az storage account keys list 명령을 사용하여 스토리지 계정 키를 가져옵니다. 그런 다음, 이 키를 사용하여 az storage container create 명령으로 두 개의 컨테이너를 만듭니다.

blobStorageAccountKey=$(az storage account keys list -g $rgName \
  -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

샘플 앱은 이름과 액세스 키를 사용하여 스토리지 계정에 연결합니다.

App Service 플랜 만들기

App Service 계획은 위치, 크기 및 앱을 호스트하는 웹 서버 팜의 기능을 지정합니다. 다음 예에서는 체험 가격 책정 계층에서 myAppServicePlan이라는 App Service 계획을 만듭니다.

az appservice plan create 명령으로 App Service 계획을 만듭니다.

planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free

웹앱 만들기

웹앱은 GitHub 샘플 리포지토리에서 배포되는 샘플 앱 코드에 대한 호스팅 공간을 제공합니다.

az webapp create 명령을 사용하여 myAppServicePlan App Service 계획에 웹앱을 만듭니다.

webapp="mywebapp$RANDOM"

az webapp create --name $webapp --resource-group $rgName --plan $planName

GitHub 리포지토리에서 샘플 앱 배포

App Service는 웹앱에 콘텐츠를 배포하는 여러 가지 방법을 지원합니다. 이 자습서에서는 공용 GitHub 샘플 리포지토리에서 웹앱을 배포합니다. az webapp deployment source config 명령을 사용하여 웹앱에 대한 Git 배포를 구성합니다.

샘플 프로젝트에는 ASP.NET MVC 앱이 포함되어 있습니다. 이 앱은 이미지를 받아들이고, 스토리지 계정에 저장하고, 썸네일 이미지 컨테이너에서 이미지를 표시합니다. 웹앱은 Azure.Storage, Azure.Storage.Blobs 및 Azure.Storage.Blobs.Models 네임스페이스를 사용하여 Azure Storage 서비스와 상호 작용합니다.

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

웹앱 설정 구성

샘플 웹앱은 .NET용 Azure Storage API를 사용하여 이미지를 업로드합니다. 스토리지 계정 자격 증명은 웹앱에 대한 앱 설정에 설정됩니다. az webapp config appsettings set 또는 New-AzStaticWebAppSetting 명령을 사용하여 배포된 앱에 앱 설정을 추가합니다.

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

웹앱이 배포되고 구성되면 앱에서 이미지 업로드 기능을 테스트할 수 있습니다.

이미지 업로드

웹앱을 테스트하려면 게시된 앱의 URL로 이동합니다. 웹앱의 기본 URL은 https://<web_app>.azurewebsites.net입니다. 그런 다음 사진 업로드 지역을 선택하여 파일을 지정 및 업로드하거나 파일을 해당 지역으로 끌어갑니다. 성공적으로 업로드되면 이미지가 사라집니다. 생성된 썸네일 섹션은 이 자습서의 후반부에서 테스트할 때까지 비어 있습니다.

참고 항목

다음 명령을 실행하여 웹앱의 이름을 가져옵니다. echo $webapp

Screenshot of the page to upload photos in the Image Resizer .NET app.

샘플 코드에서 Storagehelper.cs 파일의 UploadFileToStorage 작업은 UploadAsync 메서드를 통해 이미지를 스토리지 계정 내의 images 컨테이너에 업로드하는 데 사용됩니다. 다음 코드 샘플에는 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);
}

다음 클래스 및 메서드는 이전 작업에서 사용됩니다.

클래스 메서드
URI Uri constructor
StorageSharedKeyCredential StorageSharedKeyCredential(String, String) constructor
BlobClient UploadAsync

스토리지 계정에서 이미지가 표시되는지 확인합니다.

  1. Azure Portal에 로그인합니다. 왼쪽 메뉴에서 스토리지 계정을 선택하고 스토리지 계정의 이름을 선택합니다.

    참고 항목

    다음을 실행하여 스토리지 계정의 이름을 가져옵니다. echo $blobStorageAccount.

  2. 왼쪽 메뉴의 데이터 스토리지 섹션에서 컨테이너를 선택합니다.

  3. images Blob 컨테이너를 선택합니다.

  4. 컨테이너에 이미지가 표시되는지 확인합니다.

    Screenshot of the Container page showing the list of uploaded images.

썸네일 보기 테스트

썸네일 보기를 테스트하려면 이미지를 thumbnails 컨테이너에 업로드하여 앱에서 thumbnails 컨테이너를 읽을 수 있는지 확인합니다.

  1. Azure Portal에 로그인합니다. 왼쪽 메뉴에서 스토리지 계정을 선택하고 스토리지 계정의 이름을 선택합니다. 컨테이너를 선택한 다음, 썸네일 컨테이너를 선택합니다. 업로드를 선택하여 blob 업로드 창을 엽니다.

  2. 파일 선택기를 사용하여 파일을 선택하고, 업로드를 선택합니다.

  3. 앱으로 다시 이동하여 썸네일 컨테이너에 업로드된 이미지가 보이는지 확인합니다.

    Screenshot of the web app showing the thumbnail image.

  4. 시리즈의 2부에서는 썸네일 이미지를 자동으로 만들므로 이 이미지가 필요하지 않습니다. 썸네일 컨테이너에서 업로드한 이미지를 선택하고 삭제를 선택하여 이미지를 제거합니다.

다음 단계

Event Grid를 사용하여 업로드된 이미지의 크기를 조정하도록 Azure 함수 트리거