자습서 2단계: Event Grid를 사용하여 업로드된 이미지 크기 조정 자동화

이 자습서는 Azure Event GridAzure Functions를 사용하여 서버리스 자동 축소판 세대를 추가하기 위해 Azure Storage를 사용하여 클라우드에 이미지 데이터 업로드 자습서를 확장합니다. 개략적인 워크플로는 다음과 같습니다.

이 자습서에서 수행하는 단계는 다음과 같습니다.

  • Azure Storage 계정 만들기
  • 함수 앱 만들기, 구성 및 배포
  • 스토리지 이벤트에 대한 이벤트 구독 만들기
  • 샘플 앱 테스트

필수 조건

이 자습서를 완료하려면 다음이 필요합니다.

Azure Storage 계정 만들기

Azure Functions에는 일반 스토리지 계정이 필요합니다. 이전 자습서에서 만든 Blob Storage 계정 외에도 리소스 그룹에 별도의 일반 스토리지 계정을 만듭니다. Storage 계정 이름은 3자에서 24자 사이여야 하고 숫자 및 소문자만 포함할 수 있습니다.

이전 자습서에서 만든 리소스 그룹의 이름, 만들 리소스의 위치 및 Azure Functions에 필요한 새 스토리지 계정의 이름을 저장할 변수를 설정합니다. 그런 후 Azure 함수에 대한 스토리지 계정을 만듭니다.

az storage account create 명령을 사용합니다.

참고 항목

Cloud Shell의 Bash 셸에서 다음 명령을 실행합니다. 필요한 경우 Cloud Shell의 왼쪽 위 구석에 있는 드롭다운 목록을 사용하여 Bash 셸로 전환합니다.

다음 명령을 실행하여 Azure Storage 계정을 만듭니다.

functionstorage="funcstorage$RANDOM"
az storage account create --name $functionstorage --location $region --resource-group $rgName --sku Standard_LRS --kind StorageV2  --allow-blob-public-access true

함수 앱 만들기

함수 실행을 호스트하는 함수 앱이 있어야 합니다. 함수 앱은 서버를 사용하지 않는 함수 코드 실행을 위한 환경을 제공합니다. 다음 명령에서 사용자 고유의 함수 앱 이름을 제공합니다. 함수 앱은 함수 앱의 기본 DNS 도메인으로 사용되므로 이름이 Azure의 모든 앱에서 고유해야 합니다. 만들려는 함수 앱의 이름을 지정하고 Azure 함수를 만듭니다.

az functionapp create 명령을 사용하여 함수 앱을 만듭니다.

functionapp="funcapp$RANDOM"
az functionapp create --name $functionapp --storage-account $functionstorage --resource-group $rgName --consumption-plan-location $region --functions-version 4

이제 이전 자습서에서 만든 Blob 스토리지에 연결하도록 함수 앱을 구성합니다.

함수 앱 구성

이 함수는 az functionapp config appsettings set 또는 Update-AzFunctionAppSetting 명령을 사용하여 함수 앱의 애플리케이션 설정에 추가된 Blob Storage 계정에 대한 자격 증명이 필요합니다.

storageConnectionString=$(az storage account show-connection-string --resource-group $rgName --name $blobStorageAccount --query connectionString --output tsv)

az functionapp config appsettings set --name $functionapp --resource-group $rgName --settings AzureWebJobsStorage=$storageConnectionString THUMBNAIL_CONTAINER_NAME=thumbnails THUMBNAIL_WIDTH=100 FUNCTIONS_EXTENSION_VERSION=~2 FUNCTIONS_WORKER_RUNTIME=dotnet

FUNCTIONS_EXTENSION_VERSION=~2 설정은 함수 앱을 Azure Functions 런타임의 버전 2.x에서 실행하게 만듭니다. 이제 이 함수 앱에 함수 코드 프로젝트를 배포할 수 있습니다.

함수 코드 배포

샘플 C# 크기 조정 기능은 GitHub에서 사용할 수 있습니다. 이 코드 프로젝트를 az functionapp deployment source config 명령을 사용하여 함수 앱에 배포합니다.

az functionapp deployment source config --name $functionapp --resource-group $rgName --branch master --manual-integration --repo-url https://github.com/Azure-Samples/function-image-upload-resize

이미지 크기 조정 함수는 Event Grid 서비스에서 전송된 HTTP 요청에 의해 트리거됩니다. 이벤트 구독을 만들어 Event Grid가 함수의 URL에서 이러한 알림을 가져오도록 지시합니다. 이 자습서에서 Blob 생성 이벤트를 구독합니다.

Event Grid 알림에서 함수에 전달되는 데이터에는 Blob의 URL이 포함됩니다. 차례로 URL을 입력 바인딩에 전달하여 Blob Storage에서 업로드된 이미지를 가져옵니다. 이 함수는 미리 보기 이미지를 생성하고 Blob Storage에서 결과 스트림을 별도의 컨테이너에 기록합니다.

이 프로젝트에서는 트리거 형식에 EventGridTrigger를 사용합니다. 일반 HTTP 트리거보다는 Event Grid 트리거를 사용하는 것이 좋습니다. Event Grid는 Event Grid Function 트리거의 유효성을 자동으로 검사합니다. 일반 HTTP 트리거를 사용하면 유효성 검사 응답을 구현해야 합니다.

이 함수에 대해 자세히 알아보려면 function.json 및 run.csx 파일을 참조하세요.

함수 프로젝트 코드는 공개 샘플 리포지토리에서 직접 배포됩니다. Azure Functions의 배포 옵션에 대한 자세한 내용은 Azure Functions에 대한 지속적인 배포를 참조하세요.

이벤트 구독 만들기

이벤트 구독은 특정 엔드포인트로 보내려는 공급자 생성 이벤트를 나타냅니다. 이 경우 해당 함수에서 엔드포인트가 노출됩니다. Azure Portal에서 함수에 알림을 전송하는 이벤트 구독을 만들려면 다음 단계를 사용합니다.

  1. Azure Portal의 페이지 상단에서 Function App을 검색하여 선택하고 만든 함수 앱을 선택합니다. Functions를 선택하고 썸네일 함수를 선택합니다.

    Choose the Thumbnail function in the portal

  2. 통합을 선택한 다음, Event Grid 트리거를 선택하고 Event Grid 구독 만들기를 선택합니다.

    Navigate to Add Event Grid subscription in the Azure portal

  3. 표에 지정된 대로 이벤트 구독 설정을 사용합니다.

    Create event subscription from the function in the Azure portal

    설정 제안 값 Description
    이름 imageresizersub 새 이벤트 구독을 식별하는 이름입니다.
    항목 유형 스토리지 계정 스토리지 계정 이벤트 공급자를 선택합니다.
    구독 Azure 구독 기본적으로 현재 Azure 구독을 선택합니다.
    리소스 그룹 myResourceGroup 기존 항목 사용을 선택하고 이 자습서에서 사용한 리소스 그룹을 선택합니다.
    리소스 Blob Storage 계정 Azure 함수 앱에서 사용하는 계정이 아니라 이미지가 저장되는 Blob Storage 계정을 선택합니다.
    시스템 토픽 이름 imagestoragesystopic 시스템 항목의 이름을 지정합니다. 시스템 항목에 대한 자세한 내용은 시스템 토픽 개요를 참조하세요.
    이벤트 유형 만든 Blob 만든 BLOB 이외의 모든 유형을 선택 취소합니다. Microsoft.Storage.BlobCreated 이벤트 유형만 함수에 전달됩니다.
    엔드포인트 유형 autogenerated Azure 함수로 미리 정의되었습니다.
    엔드포인트 autogenerated 함수의 이름입니다. 이 경우 썸네일입니다.
  4. 필터 탭으로 전환하고 다음 작업을 수행합니다.

    1. 제목 필터링 사용 옵션을 선택합니다.

    2. 제목 시작 문자/blobServices/default/containers/images/ 값을 입력합니다.

      Specify filter for the event subscription

  5. 만들기를 선택하여 이벤트 구독을 추가하여 Blob이 images 컨테이너에 추가될 때 Thumbnail 함수를 트리거하는 이벤트 구독을 만듭니다. 함수는 이미지의 크기를 조정하고 thumbnails 컨테이너에 추가합니다.

이제 백엔드 서비스가 구성되었으므로 샘플 웹앱에서 이미지 크기 조정 기능을 테스트할 수 있습니다.

샘플 앱 테스트

웹앱에서 이미지 크기 조정을 테스트하려면 게시된 앱의 URL로 이동합니다. 웹앱의 기본 URL은 https://<web_app>.azurewebsites.net입니다.

사진 업로드를 선택하여 파일을 선택하고 업로드합니다. 이 영역에 사진을 끌어갈 수도 있습니다.

업로드된 이미지가 사라진 후에는 업로드된 이미지의 사본이 생성된 미리 보기 카루셀에 표시됩니다. 이 이미지는 함수를 통해 크기 조정되어 썸네일 컨테이너에 추가되었으며 웹 클라이언트가 다운로드한 것입니다.

Screenshot that shows a published web app titled

다음 단계

목차(TOC)의 자습서 섹션에서 다른 자습서를 참조하세요.