랩: Azure PaaS(Platform-as-a-Service)에서 웹 애플리케이션 빌드

학생 랩 답변 키

Microsoft Azure 사용자 인터페이스

Microsoft 클라우드 도구의 동적 특성을 감안할 때 이 교육 콘텐츠를 개발한 후 Azure 사용자 인터페이스(UI) 변경 사항이 발생할 수 있습니다. 이러한 변경으로 인해 랩 지침 및 단계가 일치하지 않을 수 있습니다.

Microsoft 전 세계 학습 팀은 커뮤니티에서 필요한 변경 사항을 가져오는 즉시 이 교육 과정을 업데이트합니다. 그러나 클라우드 업데이트가 자주 이루어지기 때문에 이 교육 콘텐츠가 업데이트되기 전에 UI가 변경될 수 있습니다. 이 경우 변경 사항에 적응하고 필요에 따라 랩에서 작업합니다.

지침

시작하기 전에

랩 가상 머신에 로그인

다음 자격 증명을 사용하여 Windows 10 가상 머신에 로그인합니다.

• 사용자 이름: Admin

• 암호: Pa55w.rd

참고: 랩 가상 머신 로그인 지침은 강사가 제공합니다.

설치된 응용 프로그램 검토

Windows 10 바탕 화면 하단에 있는 작업 표시줄을 살펴봅니다. 작업 표시줄에는 이 랩에서 사용할 응용 프로그램에 대한 아이콘이 포함되어 있습니다.

• Microsoft Edge

• 파일 탐색기

• Windows PowerShell

• Visual Studio Code

랩 파일 다운로드

1. 작업 표시줄에서 Windows PowerShell 아이콘을 선택합니다.

2. PowerShell 명령 프롬프트에서 현재 작업 디렉터리를 Allfiles(F):\ 경로로 변경합니다.

    cd F:

1. 명령 프롬프트 내에서 다음 명령을 입력하고 Enter 키를 눌러 GitHub에서 호스트되는 microsoftlearning/AZ-203-DevelopingSolutionsforMicrosoftAzure 프로젝트를 Allfiles (F):\ 드라이브로 복제합니다.

    git clone --depth 1 --no-checkout https://github.com/microsoftlearning/AZ-203-DevelopingSolutionsForMicrosoftAzure.

1. 명령 프롬프트 내에서 다음 명령을 입력하고 Enter 키를 눌러 AZ-203T02 랩을 완료하는 데 필요한 랩 파일을 체크 아웃합니다.

    git checkout master -- Allfiles/*

1. 현재 실행 중인 Windows PowerShell 명령 프롬프트 응용 프로그램을 닫습니다.

연습 1: Azure Storage 및 API Apps를 사용하여 백엔드 API 빌드

작업 1: Azure Portal 열기

1. 작업 표시줄에서 Microsoft Edge 아이콘을 선택합니다.

2. 열린 브라우저 창에서 Azure Portal(portal.azure.com)로 이동합니다.

3. 로그인 페이지에서 Microsoft 계정의 전자 메일 주소를 입력합니다.

4. 다음을 선택합니다.

5. Microsoft 계정의 비밀번호를 입력합니다.

6. 로그인을 선택합니다.

   참고: Azure 포털에 처음 로그인하는 경우 포털 둘러보기를 제공하는 대화 박스가 표시됩니다. 둘러보기를 건너뛰고 포털 사용을 시작하려면 시작하기를 선택합니다.

작업 2: Azure 저장소 계정 만들기

1. Azure 포털의 왼쪽 네비게이션 페인에서 모든 서비스를 선택합니다.

2. 모든 서비스 블레이드에서 저장소 계정을 선택합니다.

3. 저장소 계정 블레이드에서 저장소 인스턴스 목록을 봅니다.

4. 저장소 계정 블레이드 상단에서 추가를 선택합니다.

5. 저장소 계정 만들기 블레이드에서 기본 태그 및 검토+만들기와 같은 블레이드 상단의 탭을 관찰합니다.

   참고: 각 탭은 새 저장소 계정을 만드는 워크플로의 단계를 나타냅니다. 언제든지 검토 + 만들기를 선택하여 나머지 탭을 건너뛸 수 있습니다.

6. 기본 탭을 선택하고 탭 영역 내에서 다음 작업을 수행합니다.

   1. 구독 필드를 기본값으로 설정합니다.

   2. 리소스 그룹 섹션에서 새 만들기를 선택하고 관리 플랫폼을 입력한 다음 OK를 선택합니다.

   3. 저장소 계정 이름 필드에서 imgstor[your name in lowercase]를 입력합니다.

   4. 위치 목록에서 (미국) 미국 동부 지역을 선택합니다.

   5. 성능 섹션에서 표준을 선택합니다.

   6. 계정 종류 목록에서 StorageV2(일반용 v2)를 선택합니다.

   7. 복제 목록에서 로컬 중복 저장소(LRS)를 선택합니다.

   8. 액세스 계층(기본값) 섹션에서 핫이 선택되어 있는지 확인합니다.

   9. 검토 + 만들기를 선택합니다.

7. 검토+ 만들기탭에서 이전 단계에서 지정한 옵션을 검토합니다.

8. 지정된 구성을 사용하여 저장소 계정을 만들려면 만들기를 선택합니다.

9. 배포 블레이드에서 이 랩을 진행하기 전에 만들기 작업이 완료될 때까지 기다립니다.

10. 배포 블레이드에서 리소스로 이동 단추를 클릭하여 새로 만든 스토리지 계정으로 이동합니다.

11. 저장소 계정 블레이드에서 블레이드 왼쪽에 있는 설정 섹션을 찾아 액세스 키를 선택합니다.

12. 엑세스 키 블레이드에서 키 중 하나를 선택하고 연결 문자열 필드 중 하나의 값을 기록합니다. 이 랩에서 나중에 이 값을 사용합니다.

    참고: 어떤 연결 문자열을 선택하든 상관없습니다. 서로 교환할 수 있습니다.

작업 3: 샘플 블랍 업로드

1. Azure 포털 왼쪽 네비게이션 페인에서 리소스 그룹을 선택합니다.

2. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 선택합니다.

3. 관리 플랫폼 블레이드에서 이전엔 랩에서 만든 imgstor* 저장소 계정을 선택합니다.

4. 스토리지 계정 블레이드의 왼쪽에 있는 Blob service 섹션에서 컨테이너 링크를 선택합니다.

5. 컨테이너 섹션에서 + 컨테이너를 선택합니다.

6. 새 컨테이너 창에서 다음 작업을 수행합니다.

   1. 이름 필드에 이미지를 입력합니다.

   2. 공용 액세스 수준 목록에서 B블랍(블랍에 대해서만 익명 읽기 액세스)을 선택합니다.

   3. 확인을 선택합니다.

7. 컨테이너 섹션에서 + 컨테이너를 다시 선택합니다.

8. 새 컨테이너 창에서 다음 작업을 수행합니다.

   1. 이름 필드에 images-thumbnails를 입력합니다.

   2. 공용 액세스 수준 목록에서 B블랍(블랍에 대해서만 익명 읽기 액세스)을 선택합니다.

   3. 확인을 선택합니다.

9. 컨테이너 섹션에서 새로 만든 이미지 컨테이너를 선택합니다.

10. 컨테이너 블레이드에서 업로드를 선택합니다.

11. 표시되는 블랍 업로드 창에서 다음 작업을 수행합니다.

    1. 파일 섹션에서 폴더 아이콘을 선택합니다.

    2. 표시되는 파일 탐색기 대화 상자에서 Allfiles (F):\Allfiles\Labs\02\Starter\Images로 이동하여 grilledcheese.jpg 파일을 선택한 다음 열기를 선택합니다.

    3. 파일이 이미 있는 경우 덮어쓰기 확인란이 선택되어 있는지 확인합니다.

    4. 업로드 선택

12. 이 랩을 계속하기 전에 블랍이 업로드될 때까지 기다립니다.

작업 4: API 앱 만들기

1. 포털의 왼쪽 탐색 창에서 + 리소스 만들기를 선택합니다.

2. 새 블레이드 상단에서 마켓플레이스 검색 필드를 찾습니다.

3. 검색 필드에 API를 입력하고 Enter 를 누릅니다.

4. 모든 항목 검색 결과 블레이드에서 API 앱 결과를 선택합니다.

5. API 어플블레이드에서 만들기를 선택합니다.

6. 두 번째 API 어플 블레이드에서 다음 작업을 수행합니다.

   1. 어플 이름 필드에 i mgapi[your name in lowercase]를 입력합니다.

   2. 구독 필드를 기본값으로 설정합니다.

   3. 리소스 그룹 섹션에서 기존 사용 을 선택한 다음 관리되는 플랫폼을 선택합니다.

   4. 앱 서비스 계획/위치 필드를 기본값으로 설정합니다.

   5. 응용 프로그램 인사이트 필드를 기본값으로 설정합니다.

   6. 만들기를 선택합니다.

7. 이 랩을 진행하기 전에 만들기 작업이 완료될 때까지 기다립니다.

작업 5: API 앱 구성

1. 포털의 왼쪽 탐색창에서 리소스 그룹을 선택합니다.

2. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 선택합니다.

3. 관리 플랫폼 블레이드에서 이전에 랩에서 만든 imgapi*API 어플을 선택합니다.

4. API 앱 블레이드의 왼쪽에 있는 설정 섹션에서 구성 링크를 선택합니다.

5. 구성 섹션에서 다음 작업을 수행합니다.

   1. 애플리케이션 설정 탭을 선택합니다.

   2. + 새 애플리케이션 설정을 선택합니다.

   3. 표시되는 애플리케이션 설정 추가/편집 팝업 창의 이름 필드에 StorageConnectionString을 입력합니다.

   4. 값 필드에 이 랩의 앞에서 복사한 스토리지 연결 문자열을 입력합니다.

   5. 배포 슬롯 설정 필드를 기본값으로 설정합니다.

   6. 확인을 선택하여 팝업 창을 닫고 구성 섹션으로 돌아갑니다.

   7. 블레이드 상단에 있는 저장을 선택하여 설정을 유지합니다.

6. 랩을 진행하기 전에 애플리케이션 설정이 저장될 때까지 기다립니다.

7. API 어플 블레이드에서 설정 섹션의 블레이드 왼쪽에 속성 링크를 선택합니다.

8. 속성 섹션에서 URL 필드의 값을 복사합니다. 이 값은 랩에서 나중에 사용합니다.

작업 6: API 앱에 ASP.NET Core 웹 애플리케이션 배포

1. 작업 표시줄에서 Visual Studio Code 아이콘을 선택합니다.

2. 파일 메뉴에서 폴더 열기를 선택합니다.

3. 열리는 파일 탐색기 창에서 Allfiles (F):\Allfiles\Labs\02\Starter\API로 이동하여 폴더 선택을 선택합니다.

4. Visual Studio Code 창의 탐색기 창에서 Controllers 폴더를 확장하고 ImagesController.cs 파일을 두 번 클릭하여 편집기에서 파일을 엽니다.

5. 편집기에서 ImagesController 클래스에서 27 줄의 GetCloudBlobContainer 메서드 및 컨테이너를 검색하는 경우 사용한 코드를 관찰합니다.

6. ImagesController 클래스에서 38 줄에서 Get 메서드 및 이미지 컨테이너에서 모든 블랍을 비동기적으로 검색하는 경우 사용한 코드를 관찰합니다.

7. ImagesController 클래스에서 74 줄의 Post 메서드와 업로드된 이미지를 Azure Storage 에 유지하는 경우 사용한 코드를 관찰합니다.

8. 작업 표시줄에서 Windows PowerShell 아이콘을 선택합니다.

9. 열린 명령 프롬프트에서 다음 명령을 입력하고 Enter 를 눌러 Azure CLI 에 로그인합니다.

    az login

1. 표시되는 Microsoft Edge 브라우저 창에서 다음 작업을 수행합니다.

   1. Microsoft 계정의 전자 메일 주소를 입력합니다.

   2. 다음을 선택합니다.

   3. Microsoft 계정의 비밀번호를 입력합니다.

   4. 로그인을 선택합니다.

2. 현재 열려 있는 명령 프롬프트 응용 프로그램으로 돌아갑니다. 로그인 프로세스가 완료될 때까지 기다립니다.

3. 명령 프롬프트에서 다음 명령을 입력하고 Enter 를 눌러 ManagedPlatform 리소스 그룹에 모든 어플을 나열합니다.

    az webapp list --resource-group ManagedPlatform

1. 다음 명령을 입력하고 Enter 키를 눌러 접두사 imgapi*가 있는 앱을 찾습니다.

    az webapp list --resource-group ManagedPlatform --query "[?starts_with(name, 'imgapi')]"

1. 다음 명령을 입력하고 Enter 키를 눌러 접두사 imgapi*가 있는 단일 앱의 이름만 출력합니다.

    az webapp list --resource-group ManagedPlatform --query "[?starts_with(name, 'imgapi')].{Name:name}" --output tsv

1. 다음 명령을 입력하고 Enter 키를 눌러 현재 디렉터리를 랩 파일이 포함된 Allfiles (F):\Allfiles\Labs\02\Starter\API 디렉터리로 변경합니다.

    cd F:\Labfiles\02\Starter\API\

1. 다음 명령을 입력하고 Enter 키를 눌러 이 랩의 앞에서 만든 API 앱에 api.zip 파일을 배포합니다.

    az webapp deployment source config-zip --resource-group ManagedPlatform --src api.zip --name <name-of-your-api-app>

> **참고**: **\<name-of-your-api-app\>** 자리 표시자를 이 랩의 앞에서 만든 API 앱의 이름으로 바꿉니다. 최근에 이전 단계에서 이 앱의 이름을 쿼리했습니다.

1. 이 랩을 진행하기 전에 배포가 완료될 때까지 기다립니다.

2. 포털의 왼쪽에서 리소스 그룹 링크를 선택합니다.

3. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 찾아 선택합니다.

4. 관리 플랫폼 블레이드에서 이전에 랩에서 만든 imgapi* API 어플을 선택합니다.

5. API 어플 블레이드에서 찾아보기 버튼을 선택합니다.

6. 웹사이트의 루트로 GET 요청을 수행하고 반환되는 JSON 배열을 관찰합니다. 이 배열에는 Azure Storage 계정에 업로드된 싱글 이미지의 URL이 포함되어야 합니다.

7. Azure portal을 표시하는 브라우저 창으로 돌아갑니다.

검토

이 연습에서는 Azure에서 API 앱을 만든 다음 Azure CLI 및 Kudu의 zip 배포 유틸리티를 사용하여 ASP.NET Core 웹 애플리케이션을 API 앱에 배포했습니다.

연습 2: Azure 웹 어플을 사용하여 프런트 엔드 웹 응용 프로그램 빌듭니다.

작업 1: 웹 어플 만들기

1. Azure 포털에서 왼쪽 네비게이션 페인에서 + 리소스 만들기를 선택합니다.

2. 새 블레이드 상단에서 마켓플레이스 검색 필드를 찾습니다.

3. 검색 필드에 웹을 입력하고 Enter 를 누릅니다.

4. 모든 항목 검색 결과 블레이드에서 웹앱 결과를 선택합니다.

5. 웹앱 블레이드에서 만들기를 선택합니다.

6. 두 번째 웹앱 블레이드에서 다음 작업을 수행합니다.

   1. 앱 이름 필드에서 imgweb[소문자로 된 사용자 이름]를 입력합니다.

   2. 구독 필드를 기본값으로 설정합니다.

   3. 리소스 그룹 섹션에서 기존 사용 을 선택한 다음 관리되는 플랫폼을 선택합니다.

   4. 공용 섹션에서 코드를 선택합니다.

   5. 런타임 스택 섹션에서 NET 코어 2.2를 선택합니다.

   6. OS 섹션에서 Windows를 선택합니다.

   7. 지역 드롭다운 목록에서 미국 동부를 선택합니다.

   8. 플랜(미국 동부) 필드를 기본값으로 설정합니다.

   9. SKU 및 크기 필드를 기본값으로 설정합니다.

   10. 검토 후 만들기를 선택합니다.

7. 검토 후 만들기 탭에서 설정을 검토한 다음 만들기를 클릭합니다.

8. 이 랩을 진행하기 전에 만들기 작업이 완료될 때까지 기다립니다.

작업 2: 웹 어플 구성

1. 포털의 왼쪽 네비게이션 페인에서 리소스 그룹을 선택합니다.

2. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 선택합니다.

3. 관리 플랫폼 블레이드에서 이전엔 랩에서 만든 imgweb* 웹 어플을 선택합니다.

4. 웹앱 블레이드의 왼쪽에 있는 설정 섹션에서 구성 링크를 선택합니다.

5. 구성 섹션에서 다음 작업을 수행합니다.

   1. 애플리케이션 설정 탭을 선택합니다.

   2. + 새 애플리케이션 설정을 선택합니다.

   3. 표시되는 애플리케이션 설정 추가/편집 팝업 창의 이름 필드에 ApiUrl을 입력합니다.

   4. 값 필드에 이 랩의 앞에서 복사한 API 앱 URL을 입력합니다.

      참고: 이 애플리케이션 설정의 값 필드에 복사하는 URL에 프로토콜(예: https://)을 포함해야 합니다.

   5. 배포 슬롯 설정 필드를 기본값으로 설정합니다.

   6. 확인을 선택하여 팝업 창을 닫고 구성 섹션으로 돌아갑니다.

   7. 블레이드 상단에 있는 저장을 선택하여 설정을 유지합니다.

6. 랩을 진행하기 전에 애플리케이션 설정이 저장될 때까지 기다립니다.

작업 3: ASP.NET 코어 웹 응용 프로그램을 웹 어플에 배치합니다.

1. 작업 표시줄에서 비주얼 스튜디오 코드 아이콘을 선택합니다.

2. 파일 메뉴에서 폴더 열기를 선택합니다.

3. 열리는 파일 탐색기 창에서 Allfiles (F):\Allfiles\Labs\02\Starter\Web으로 이동하여 폴더 선택을 선택합니다.

4. Visual Studio Code 창의 탐색기 창에서 Pages 폴더를 확장하고 Index.cshtml.cs 파일을 두 번 클릭하여 편집기에서 파일을 엽니다.

5. 편집기에서 IndexModel 클래스에서 30줄의 OnGetAsync 메서드 및 API에서 이미지 목록을 검색하는 경우 사용하는 코드를 관찰합니다.

6. IndexModel클래스에서 52줄에 있는 OnPostAsync 메서드 및 업로드된 이미지를 백 엔드 API로 스트리하는 경우 사용하는 코드를 관찰합니다.

7. 작업 표시줄에서 Windows PowerShell 아이콘을 선택합니다.

8. 열린 명령 프롬프트에서 다음 명령을 입력하고 Enter 를 눌러 Azure CLI 에 로그인합니다.

    az login

1. 표시되는 브라우저 창에서 다음 작업을 수행합니다.

   1. Microsoft 계정의 전자 메일 주소를 입력합니다.

   2. 다음을 선택합니다.

   3. Microsoft 계정의 비밀번호를 입력합니다.

   4. 로그인을 선택합니다.

2. 현재 열려 있는 명령 프롬프트 응용 프로그램으로 돌아갑니다. 로그인 프로세스가 완료될 때까지 기다립니다.

3. 다음 명령을 입력하고 Enter 를 눌러 ManagedPlatform 리소스 그룹의 모든어플을 나열합니다.

    az webapp list --resource-group ManagedPlatform

1. 다음 명령을 입력하고 Enter 키를 눌러 접두사 imgweb*가 있는 앱을 찾습니다.

    az webapp list --resource-group ManagedPlatform --query "[?starts_with(name, 'imgweb')]"

1. 다음 명령을 입력하고 Enter 키를 눌러 접두사 imgweb*가 있는 단일 앱의 이름만 출력합니다.

    az webapp list --resource-group ManagedPlatform --query "[?starts_with(name, 'imgweb')].{Name:name}" --output tsv

1. 다음 명령을 입력하고 Enter 키를 눌러 현재 디렉터리를 랩 파일이 포함된 Allfiles (F):\Allfiles\Labs\02\Starter\Web 디렉터리로 변경합니다.

    cd F:\Labfiles\02\Starter\Web\

1. 다음 명령을 입력하고 Enter 키를 눌러 이 랩의 앞에서 만든 웹앱에 web.zip 파일을 배포합니다.

    az webapp deployment source config-zip --resource-group ManagedPlatform --src web.zip --name <name-of-your-web-app>

> **참고**: **\<Web-ing-your-web-app\>** 플레이스 홀더를 이전에 랩에서 만든 웹 어플의 이름으로 바꿉니다. 최근에 이전 단계에서 이 어플의 이름을 쿼리했습니다.

1. 이 랩을 진행하기 전에 배치가 완료될 때까지 기다립니다.

2. 포털의 왼쪽 네비게이션 페인에서 리소스 그룹을 선택합니다.

3. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 선택합니다.

4. 관리 플랫폼 블레이드에서 이전엔 랩에서 만든 imgweb* 웹 어플을 선택합니다.

5. 웹 어플 블레이드에서 찾아보기를 선택합니다.

6. 갤러리의 이미지 목록을 관찰합니다. 갤러리는 랩의 초기에 Azure Storage 에 업로드된 싱글 이미지를 나열해야 합니다.

7. Contoso 포토 갤러리 웹 페이지 상단에서 새 이미지 업로드 섹션을 찾아 다음 작업을 수행합니다.

   1. 찾아보기를 선택합니다.

   2. 열리는 파일 탐색기 대화 상자에서 Allfiles (F):\Allfiles\Labs\02\Starter\Images로 이동하여 bahnmi.jpg 파일을 선택한 다음 열기를 선택합니다.

   3. 업로드를 선택합니다.

8. 갤러리 이미지 목록이 새 이미지로 업데이트되었는지 확인합니다.

   참고: 드문 경우지만 새 이미지가 표시되도록 브라우저 창을 새로 고쳐야 할 수도 있습니다.

9. Azure portal을 표시하는 브라우저 창으로 돌아갑니다.

검토

이 연습에서는 Azure Web App 을 만들고 기존 웹 응용 프로그램의 코드를 클라우드의 리소스에 배치했습니다.

연습 3: Azure 저장소 및 Azure 함수를 사용하여 백그라운드 처리 작업을 만듭니다.

작업 1: 함수 어플 만들기

1. Azure 포털 왼쪽 탐색네비게이션 페인에서 + 리소스 만들기를 선택합니다.

2. 새 블레이드 상단에서 마켓플레이스 검색 필드를 찾습니다.

3. 검색 필드에 함수를 입력하고 Enter 를 누릅니다.

4. 모든 항목 검색 결과 블레이드에서 함수 앱 결과를 선택합니다.

5. 함수 어플 블레이드에서만들기를 선택합니다.

6. 두 번째 함수 앱 블레이드에서 다음 작업을 수행합니다.

   1. 앱 이름 필드에 imgfunc[소문자로 된 사용자 이름]를 입력합니다.

   2. 구독 필드를 기본값으로 설정합니다.

   3. 리소스 그룹 섹션에서 기존 사용 을 선택한 다음 관리되는 플랫폼을 선택합니다.

   4. OS 섹션에서 Windows를 선택합니다.

   5. 호스팅 계획 목록에서 소비 계획을 선택합니다.

   6. 위치 목록에서 미국 동부를 선택합니다.

   7. 런타임 스택 목록에서 NET Core를 선택합니다.

   8. 저장소 섹션에서기존 사용을 선택한 다음 이전에 랩에서 만든 imgstor* 저장소 계정을 선택합니다.

   9. 응용 프로그램 인사이트 필드를 기본값으로 설정합니다.

   10. 만들기를 선택합니다.

7. 이 랩을 진행하기 전에 만들기 태스크 완료될 때까지 기다립니다.

작업 2: .NET Core 애플리케이션 설정 만들기

1. 포털의 왼쪽에 있는 탐색 메뉴에서 리소스 그룹 링크를 선택합니다.

2. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 찾아 선택합니다.

3. 관리 플랫폼 블레이드에서 이 랩의 앞에서 만든 imgfunc* 함수 앱을 선택합니다.

4. 함수 앱 블레이드에서 플랫폼 기능 탭을 선택합니다.

5. 플랫폼 기능 탭에서 일반 설정 섹션에 있는 구성 링크를 선택합니다.

6. 구성 섹션에서 다음 작업을 수행합니다.

   1. 애플리케이션 설정 탭을 선택합니다.

   2. + 새 애플리케이션 설정을 선택합니다.

   3. 표시되는 애플리케이션 설정 추가/편집 팝업 창의 이름 필드에 DOTNET_SKIP_FIRST_TIME_EXPERIENCE를 입력합니다.

   4. 값 필드에 true를 입력합니다.

      참고: ‘DOTNET_SKIP_FIRST_TIME_EXPERIENCE’ 애플리케이션 설정은 .NET Core가 기본 제공 NuGet 패키지 캐시 메커니즘을 사용하지 않도록 지정합니다. 임시 컴퓨팅 인스턴스에서는 이로 인해 시간이 낭비되고 Azure Function의 빌드 문제가 발생합니다.

   5. 배포 슬롯 설정 필드를 기본값으로 설정합니다.

   6. 확인을 선택하여 팝업 창을 닫고 구성 섹션으로 돌아갑니다.

   7. 블레이드 상단에 있는 저장을 선택하여 설정을 유지합니다.

7. 랩을 진행하기 전에 애플리케이션 설정이 저장될 때까지 기다립니다.

작업 3: 블랍을 처리하는 함수를 작성합니다.

1. 포털의 왼쪽 네비게이션 페인에서 리소스 그룹을 선택합니다.

2. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 찾아 선택합니다.

3. 관리 플랫폼 블레이드에서 이 랩의 앞에서 만든 imgfunc* 함수 앱을 선택합니다.

4. 함수 어플 블레이드에서 + 새 함수을 선택합니다.

5. 새 Azure 함수 빠른 시작에서 다음 작업을 수행합니다.

   1. 개발 환경 선택 헤더에서 포털 에서를 선택합니다.

   2. 계속을 선택합니다.

   3. 함수 만들기 헤더에서 더 많은 템플릿…을 선택합니다.

   4. 템플릿 완료 및 보기를 선택합니다.

   5. 템플릿 목록에서 Azure Blob Storage 트리거를 선택합니다.

   6. 확장이 설치되지 않음 창에서 설치를 선택합니다.

      참고: Azure Storage Blob을 사용하여 작업하기 위한 확장을 설치할 때 최대 2분이 걸릴 수 있습니다. 포털이 새로 고쳐지지 않으면 확장이 설치되지 않음 팝업 창을 닫고 Azure 블랍 스토리지 트리거를 다시 선택하기만 하면 됩니다.

   7. 설치가 성공하면 계속을 선택합니다.

   8. 새 함수 창에서 이름 필드에 ImageManager를 입력합니다.

   9. 새 함수 창에서 경로 필드에 이미지/{이름}을 입력합니다.

   10. 새 함수 창에서 저장소 계정 연결 목록에서 AzureWebJobsStorage을 선택합니다.

   11. 새 함수 창에서 만들기를 선택합니다.

6. 함수 편집기의 오른쪽에서 파일 보기를 선택하여 탭을 엽니다.

7. 파일 보기 탭에서 추가를 선택합니다.

8. 표시되는 파일 이름 대화 상자에서 function.proj를 입력합니다.

9. 파일 편집기에서 이 구성 내용을 삽입합니다.

    <Project Sdk="Microsoft.NET.Sdk">
        <PropertyGroup>
            <TargetFramework>netstandard2.0</TargetFramework>
        </PropertyGroup>
        <ItemGroup>
            <PackageReference Include="SixLabors.ImageSharp" Version="1.0.0-beta0006" />
        </ItemGroup>
    </Project>

1. 편집기에서 저장 단추를 선택하여 구성 변경 내용을 저장합니다.

   참고: 이 proj 파일에는 SixLabors.ImageSharp 패키지를 가져오는 데 필요한 NuGet 패키지 참조가 포함되어 있습니다.

2. 파일 보기 탭에서 function.json 파일을 선택하여 함수 구성의 편집기를 봅니다.

3. JSON 편집기에서 현재 구성을 관찰합니다.

    {
      "bindings": [
        {
          "name": "myBlob",
          "type": "blobTrigger",
          "direction": "in",
          "path": "images/{name}",
          "connection": "AzureWebJobsStorage"
        }
      ],
      "disabled": false
    }

1. JSON 구성 파일의 전체 콘텐츠를 다음 JSON 콘텐츠로 교체합니다:

    {
      "bindings": [
        {
          "name": "inputBlob",
          "type": "blobTrigger",
          "direction": "in",
          "path": "images/{name}",
          "connection": "AzureWebJobsStorage"
        },
        {
          "type": "blob",
          "name": "outputBlob",
          "path": "images-thumbnails/{name}",
          "connection": "AzureWebJobsStorage",
          "direction": "out"
        }
      ]
    }

1. 편집기에서 저장을 선택하여 구성 변경 내용을 저장합니다.

2. 파일 보기 탭에서 run.csx파일을 선택하여 ImageManager 함수의 편집기로 돌아갑니다.

3. 파일 보기 탭을 최소화합니다.

   참고: 탭 헤더의 오른쪽에 있는 화살표를 즉시 선택하여 탭을 최소화할 수 있습니다.

4. 함수 편집기에서 예시 함수 스크립트를 관찰합니다.

    public static void Run(Stream myBlob, string name, ILogger log)
    {
        log.LogInformation($"C# Blob trigger function Processed blob\n Name:{name} \n Size: {myBlob.Length} Bytes");
    }

1. 예시 코드를 모두 삭제합니다.

2. 편집기 내에서 다음 플레이스 홀더 함수를 복사하여 붙여넣습니다.

    using SixLabors.ImageSharp;
    using SixLabors.ImageSharp.PixelFormats;
    using SixLabors.ImageSharp.Processing;
    using SixLabors.ImageSharp.Formats.Jpeg;
    using SixLabors.Primitives;
    
    public static void Run(Stream inputBlob, Stream outputBlob, string name, ILogger log)
    {
    }

1. 저장을 선택하여 스크립트를 저장하고 코드를 컴파일합니다.

2. 실행 메서드 내에 다음 코드 줄을 추가하여 함수 실행에 대한 정보를 기록합니다.

    log.LogInformation($"C# Blob trigger function Processed blob\n Name:{name} \n Size: {inputBlob.Length} Bytes");

1. 입력 blob에 대한 스트림을 이미지 라이브러리에 로드하려면 다음 using 블록을 추가합니다.

    using (Image<Rgba32> image = Image.Load(inputBlob))
    {
    }

1. using 문 내에 다음 코드 줄을 추가하여 이미지 크기를 조정하고 그레이스케일 필터를 적용하여 이미지를 변경합니다.

    image.Mutate(i => 	
        i.Resize(new ResizeOptions { Size = new Size(250, 250), Mode = ResizeMode.Max }).Grayscale()
    );

1. 다음 코드 줄을 추가하여 출력 Blob의 스트림에 새 이미지를 저장합니다.

    image.Save(outputBlob, new JpegEncoder());

1. 이제 Run 메서드는 다음과 같습니다.

    using SixLabors.ImageSharp;
    using SixLabors.ImageSharp.PixelFormats;
    using SixLabors.ImageSharp.Processing;
    using SixLabors.ImageSharp.Formats.Jpeg;
    using SixLabors.Primitives;
    
    public static void Run(Stream inputBlob, Stream outputBlob, string name, ILogger log)
    {
        log.LogInformation($"C# Blob trigger function Processed blob\n Name:{name} \n Size: {inputBlob.Length} Bytes");
        using (Image<Rgba32> image = Image.Load(inputBlob))
        {
            image.Mutate(i => 	
                i.Resize(new ResizeOptions { Size = new Size(250, 250), Mode = ResizeMode.Max }).Grayscale()
            );
            image.Save(outputBlob, new JpegEncoder());
        }
    }

1. 저장을 선택하여 스크립트를 저장하고 코드를 다시 컴파일합니다.

작업 4: 웹 솔루션 검증

1. 포털의 왼쪽 탐색 창에서 리소스 그룹을 선택합니다.

2. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 선택합니다.

3. 관리플랫폼 블레이드에서 이전에 랩에서 만든 imgstor* 저장소 계정을 선택합니다.

4. 스토리지 계정 블레이드의 왼쪽에 있는 Blob service 섹션에서 컨테이너 링크를 선택합니다.

5. 컨테이너 섹션에서 이미지 컨테이너를 선택합니다.

6. 컨테이너 블레이드에서 업로드를 선택합니다.

7. 표시되는 블랍 업로드 창에서 다음 작업을 수행합니다.

   1. 파일 섹션에서 폴더 아이콘을 선택합니다.

   2. 열리는 파일 탐색기 대화 상자에서 Allfiles (F):\Allfiles\Labs\02\Starter\Images로 이동하여 veggie.jpg 파일을 선택한 다음 열기를 선택합니다.

   3. 파일이 이미 있는 경우 덮어쓰기 확인란이 선택되어 있는지 확인합니다.

   4. 업로드를 선택힙니다.

8. 이 랩을 계속하기 전에 Blob이 업로드될 때까지 기다립니다.

9. 컨테이너 블레이드를 닫습니다.

10. 컨테이너 섹션으로 돌아가서 images-thumbnails 컨테이너를 선택합니다.

11. 컨테이너 블레이드에서 images-thumbnails 컨테이너에서 새로 만든 veggie.jpg파일을 확인합니다.

    참고: 새 이미지가 표시되려면 1~5분 정도 걸릴 수 있습니다.

12. images-thumbnails 컨테이너에서 veggie.jpg Blob을 선택합니다.

13. 블랍 블레이드에서 블랍 편집 탭을 선택합니다.

14. 블랍의 내용을 관찰합니다. 웹 페이지는 컨테이너에 업로드된 이미지를 렌더링합니다.

15. 포털의 왼쪽 네비게이션 페인에서 리소스 그룹을 선택합니다.

16. 리소스 그룹 블레이드에서 이전에 랩에서 만든 ManagedPlatform 리소스 그룹을 선택합니다.

17. 관리 플랫폼 블레이드에서 이전엔 랩에서 만든 imgweb* 웹 어플을 선택합니다.

18. 웹 어플 블레이드에서 찾아보기를 선택합니다.

19. 갤러리의 이미지 목록을 관찰합니다. 이제 새 섬네일 이미지로 섬네일 그림 목록을 업데이트해야 합니다.

20. Contoso 포토 갤러리 웹 페이지 상단에서 새 이미지 업로드 섹션을 찾아 다음 작업을 수행합니다.

    1. 찾아보기를 선택합니다.

    2. 열리는 파일 탐색기 대화 상자에서 Allfiles (F):\Allfiles\Labs\02\Starter\Images로 이동하여 blt.jpg 파일을 선택한 다음 열기를 선택합니다.

    3. 업로드를 선택합니다.

21. Contoso 포토 갤러리 웹 페이지 상단에서 새 이미지 업로드 섹션을 찾아 다음 작업을 수행합니다.

    1. 찾아보기를 선택합니다.

    2. 열리는 파일 탐색기 대화 상자에서 Allfiles (F):\Allfiles\Labs\02\Starter\Images로 이동하여 sub.jpg 파일을 선택한 다음 열기를 선택합니다.

    3. 업로드를 선택합니다.

22. Contoso 포토 갤러리 웹 페이지 상단에서 새 이미지 업로드 섹션을 찾아 다음 작업을 수행합니다.

    1. 찾아보기를 선택합니다.

    2. 열리는 파일 탐색기 대화 상자에서 Allfiles (F):\Allfiles\Labs\02\Starter\Images로 이동하여 burger.jpg 파일을 선택한 다음 열기를 선택합니다.

    3. 업로드를 선택합니다.

23. 갤러리 이미지 목록이 새 이미지로 업데이트되었는지 확인합니다.

24. 페이지 상단의 미리보기 이미지 목록을 관찰합니다. 미리 보기 이미지가 모두 생성될 때까지 1분마다 페이지를 새로 고칩니다.

복습

이 연습에서는 Azure Functions에서 컴퓨팅 집약적인 이미지 수정 및 크기 조정 작업을 수행하기 위해 백그라운드 처리 작업을 만들었습니다.

연습 4: 구독 정리

작업 1: Cloud Shell 열기

1. 포털 상단에서 Cloud Shell 아이콘을 선택하여 새 셸 인스턴스를 엽니다.

   참고: Cloud Shell 아이콘은 기호보다 큰 기호 및 밑줄 문자로 표시됩니다.

2. 구독을 사용하여 Cloud Shell을 처음 여는 경우 처음 사용 시 Cloud Shell을 구성할 수 있는 Azure Cloud Shell 마법사 시작 화면이 나타납니다. 마법사에서 다음 작업을 수행합니다.

   1. 셸 사용을 시작하도록 새 스토리지 계정을 만들라는 메시지가 대화 상자에 표시됩니다. 기본 설정을 수락하고 저장소 만들기를 선택합니다.

   2. 랩으로진행하기 전에 Cloud Shell이 첫 번째 설치 절차를 완료할 때까지 기다립니다.

   참고: Cloud Shell에 대한 구성 옵션이 표시되지 않으면 이 과정의 랩에서 기존 구독을 사용하고 있기 때문일 수 있습니다. 랩은 새 구독을 사용 한다는 가정에서 작성됩니다.

3. 포털 하단의 Cloud Shell 명령 프롬프트에서 다음 명령을 입력하고 Enter 키를 눌러 구독의 모든 리소스 그룹을 나열합니다.

    az group list

1. 다음 명령을 입력하고 Enter 키를 눌러 리소스 그룹을 삭제하는 데 사용할 수 있는 명령 목록을 봅니다.

    az group delete --help

작업 2: 리소스 그룹 삭제

1. 다음 명령을 입력하고 Enter 를 눌러 ManagedPlatform 리소스 그룹을 삭제합니다.

    az group delete --name ManagedPlatform --no-wait --yes

1. 포털 하단의 Cloud Shell 창을 닫습니다.

작업 3: 활성 애플리케이션 닫기

1. 현재 실행 중인 Microsoft Edge 응용 프로그램을 닫습니다.

2. 현재 실행 중인 Visual Studio Code 응용 프로그램을 닫습니다.

검토

이 연습에서는 이 랩에 사용된 리소스 그룹을 제거하여 구독을 정리했습니다.