랩 12: Azure Content Delivery Network를 사용하여 웹 애플리케이션 향상

Microsoft Azure 사용자 인터페이스

Microsoft 클라우드 도구의 동적 특성을 고려할 때 이 교육 콘텐츠를 개발한 후 발생하는 Azure UI 변경이 발생할 수 있습니다. 따라서 랩 지침 및 랩 단계가 올바르게 정렬되지 않을 수 있습니다.

Microsoft는 커뮤니티에서 변경해야 할 사항이 있음을 알려줄 때 이 학습 과정을 업데이트합니다. 그러나 클라우드 업데이트가 자주 이루어지기 때문에 이 학습 콘텐츠가 업데이트되기 전에 UI가 변경될 수 있습니다. 이 경우 변경 사항에 적응하고 필요에 따라 랩에서 작업합니다.

Instructions

시작하기 전에

랩 환경에 로그인

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

  • 사용자 이름: Admin
  • 암호: Pa55w.rd

참고: 강사가 가상 랩 환경 연결에 대한 지침을 제공합니다.

설치된 애플리케이션 검토

Windows 11 데스크톱에서 작업 표시줄을 찾습니다. 작업 표시줄에 이 랩에서 사용할 애플리케이션의 아이콘이 포함되어 있습니다.

  • Microsoft Edge

랩 시나리오

이 랩에서는 Azure Content Delivery Network 기능을 구현하여 고객 위치에 따라 캐싱 솔루션을 제공합니다. 랩은 대기 시간 문제로 가장 큰 영향을 받는 이미지 및 비디오 파일에 대한 스토리지 계정을 구성합니다. Azure Content Delivery Network를 사용하여 이러한 이미지 및 비디오 파일의 대기 시간을 줄이는 데 도움이 되는 캐싱 솔루션을 구현합니다.

아키텍처 다이어그램

Azure Content Delivery Network를 사용하여 웹 애플리케이션을 향상시키는 사용자를 보여 주는 아키텍처 다이어그램

연습 1: Azure 리소스 만들기

작업 1: Azure Portal 열기

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

  2. 열린 브라우저 창에서 Azure Portal(https://portal.azure.com)로 이동한 다음, 이 랩에 사용할 계정으로 로그인합니다.

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

작업 2: Storage 계정 만들기

  1. Azure Portal에서 리소스, 서비스 및 문서 검색 텍스트 상자를 사용하여 스토리지 계정을 검색한 다음, 결과 목록에서 스토리지 계정을 선택합니다.

  2. 스토리지 계정 블레이드에서 + 만들기를 선택합니다.

  3. 스토리지 계정 만들기 블레이드의 기본 사항 탭에서 다음 작업을 수행하고 다음: 고급 > 을 선택합니다.

    설정 작업
    구독 드롭다운 목록 기본값을 유지합니다.
    리소스 그룹 섹션 새로 만들기를 선택하고 MarketingContent를 입력한 다음, 확인을 선택합니다.
    스토리지 계정 이름 텍스트 상자 contenthost [사용자 이름] 을 입력합니다.
    지역 드롭다운 목록 (미국) 미국 동부를 선택합니다.
    성능 섹션 표준 옵션을 선택합니다.
    중복도 드롭다운 목록 LRS(로컬 중복 스토리지) 를 선택합니다.

    다음 스크린샷은 스토리지 계정 만들기 창에 구성된 설정을 보여 줍니다.

    스토리지 계정 만들기 창에 구성된 설정이 표시된 스크린샷

  4. 고급 탭에서 개별 컨테이너에 대한 익명 액세스 허용이 사용하도록 설정되어 있는지 확인합니다. 사용하도록 설정되지 않은 경우 확인란을 선택합니다.

  5. 검토 탭에서 이전 단계 중 선택한 옵션을 검토합니다.

  6. 지정된 구성을 사용하여 스토리지 계정을 만들려면 만들기를 선택합니다.

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

작업 3: Azure App Service를 사용하여 웹앱 만들기

  1. Azure Portal 탐색 창에서 리소스 만들기를 선택합니다.

  2. 리소스 만들기 창의 검색 서비스 및 마켓플레이스 텍스트 상자에 웹앱을 입력한 다음, Enter 키를 선택합니다.

  3. 검색 결과 창에서 웹앱 결과를 선택한 다음, 만들기를 선택합니다.

  4. 웹앱 만들기 창의 기본 사항 탭에서 다음 작업을 수행하고 다음: Docker를 선택합니다.

    설정 작업
    구독 드롭다운 목록 기본값을 유지합니다.
    리소스 그룹 드롭다운 목록 목록에서 MarketingContent를 선택합니다.
    이름 텍스트 상자 landingpage [사용자 이름] 을 입력합니다.
    게시 섹션 컨테이너를 선택합니다.
    운영 체제 섹션 Linux를 선택합니다.
    지역 드롭다운 목록 미국 동부를 선택합니다.
    Linux 플랜(미국 동부) 섹션 새로 만들기를 선택합니다. 이름 텍스트 상자에 MarketingPlan을 입력한 다음, 확인을 선택합니다.
    가격 책정 플랜 섹션 기본값을 유지합니다.

    다음 스크린샷은 웹앱 만들기 창에 구성된 설정을 보여 줍니다.

    웹앱 만들기 창에 구성된 설정이 표시된 스크린샷

  5. 컨테이너 탭에서 다음 작업을 수행한 후 검토 + 만들기를 선택합니다.

    설정 작업
    사이드카 지원(미리 보기) 사용 안 함 선택
    이미지 원본 Docker Hub 또는 기타 레지스트리를 선택합니다.
    옵션 단일 컨테이너를 선택합니다.
    액세스 유형 드롭다운 목록 Public을 선택합니다.
    레지스트리 서버 URL https://index.docker.io을 입력합니다.
    이미지 및 태그 텍스트 상자 microsoftlearning/edx-html-landing-page:latest를 입력합니다.

    다음 스크린샷은 컨테이너 탭에 구성된 설정을 보여 줍니다.

    웹앱 만들기 - Docker 탭에 구성된 설정이 표시된 스크린샷

  6. 검토 + 만들기 탭에서 이전 단계에서 선택한 옵션을 검토합니다.

  7. 지정된 구성을 사용하여 웹앱을 만들려면 만들기를 선택합니다.

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

  8. 배포 창에서 리소스로 이동을 선택합니다.

  9. App Service 개요 블레이드의 Essentials에서 기본 도메인 링크의 값을 기록합니다. 이 값은 랩에서 나중에 사용합니다.

검토

이 연습에서는 이 랩의 나중에 사용할 Azure Storage 계정과 Azure 웹앱을 만들었습니다.

연습 2: Content Delivery Network 및 엔드포인트 구성

작업 1: Azure Cloud Shell 열기

  1. Azure Portal에서 Cloud Shell 아이콘 Cloud Shell 아이콘을 선택하여 Cloud Shell을 엽니다. Cloud Shell이 기본적으로 PowerShell 세션을 사용하는 경우 Cloud Shell 메뉴에서 Bash로 전환을 선택한 다음 확인을 선택합니다.

    참고: Cloud Shell 아이콘은 더 큼 기호(>)와 밑줄 문자(_)로 표시됩니다.

    Cloud Shell을 처음 시작하는 경우 리소스를 만들라는 일련의 메시지가 표시됩니다. 다음 표에 제시된 작업을 수행합니다.

    프롬프트 작업
    Azure Cloud Shell을 시작합니다 Bash를 선택합니다.
    시작 스토리지 계정 탑재를 선택한 다음 드롭다운에서 스토리지 계정 구독을 선택하고 마지막으로 적용을 선택합니다.
    스토리지 계정 탑재 스토리지 계정을 만들어 드립니다를 선택한 후 다음을 선택합니다.

  2. Azure Portal의 Cloud Shell 명령 프롬프트에서 다음 명령을 실행하여 Azure CLI(Azure 명령줄 인터페이스) 도구의 버전을 가져옵니다.

     az --version

작업 2: Microsoft.CDN 공급자 등록

  1. Portal의 Cloud Shell 명령 프롬프트에서 다음 작업을 수행합니다.

    a. 다음 명령을 입력하여 Microsoft.CDN이 등록되었는지 확인합니다. Microsoft.CDN이 이미 등록되었다면 2단계로 진행합니다.

     az provider show --namespace Microsoft.CDN --query "registrationState"

    b. Microsoft.CDN이 등록되지 않았다면 다음 명령을 입력한 다음 Enter 키를 선택한 후 현재 구독에 Microsoft.CDN 네임스페이스를 등록합니다.

     az provider register --namespace Microsoft.CDN

  2. 포털에서 Cloud Shell 창을 닫습니다.

작업 3: Content Delivery Network 프로필 만들기

  1. Azure Portal 탐색 창에서 리소스 만들기를 선택합니다.

  2. 리소스 만들기 창의 검색 서비스 및 마켓플레이스 텍스트 상자에 CDN을 입력한 다음, Enter 키를 선택합니다.

  3. Marketplace 검색 결과 창에서 Front Door 및 CDN 프로필 결과를 선택한 다음, 만들기를 선택합니다.

  4. 제품 비교 페이지에서 기타 제품 살펴보기를 선택하고 Microsoft의 Azure CDN 표준(클래식) 을 선택한 다음, 계속을 선택합니다.

  5. CDN 프로필 창의 기본 사항 탭에서 다음 작업을 수행하고 검토 + 만들기를 선택합니다.

    설정 작업
    구독 드롭다운 목록 기본값을 유지합니다.
    리소스 그룹 드롭다운 목록 목록에서 MarketingContent를 선택합니다.
    이름 텍스트 상자 contentdeliverynetwork를 입력합니다.
    지역 텍스트 상자 기본값(글로벌)을 유지합니다.
    가격 책정 계층 드롭다운 목록 기본값인 Microsoft CDN(클래식) 을 보존합니다.
    새 CDN 엔드포인트 만들기 확인란 선택되지 않음

    다음 스크린샷은 CDN 프로필 창에 구성된 설정을 보여 줍니다.

    CDN 프로필 만들기 창에 구성된 설정이 표시된 스크린샷

  6. 검토 + 만들기 탭에서 이전 단계에서 선택한 옵션을 검토합니다.

  7. 지정된 구성을 사용하여 CDN 프로필을 만들려면 만들기를 선택합니다.

    참고: 랩을 진행하기 전에 Azure에서 CDN 프로필 만들기가 완료될 때까지 기다립니다. 프로필이 만들어지면 알림을 받게 됩니다.

작업 4: 스토리지 컨테이너 구성

  1. Azure Portal의 탐색 창에서 리소스 그룹을 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 contenthost [사용자 이름] 스토리지 계정을 선택합니다.

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

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

  6. 새 컨테이너 팝업 창에서 다음 작업을 수행하고 만들기를 선택합니다.

    설정 작업
    이름 텍스트 상자 media를 입력합니다.
    공용 액세스 수준 드롭다운 목록 Blob(Blob에 대해서만 익명 읽기 액세스) 을 선택합니다.

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

  8. 새 컨테이너 팝업 창에서 다음 작업을 수행하고 만들기를 선택합니다.

    설정 작업
    이름 텍스트 상자 /video를 입력합니다.
    공용 액세스 수준 드롭다운 목록 Blob(Blob에 대해서만 익명 읽기 액세스) 을 선택합니다.

  9. 업데이트된 컨테이너 목록을 살펴보고 미디어 및 비디오 컨테이너가 모두 나열되어 있는지 확인합니다.

작업 5: Content Delivery Network 엔드포인트 만들기

  1. Azure Portal의 탐색 창에서 리소스 그룹 링크를 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 contentdeliverynetwork CDN 프로필을 선택합니다.

  4. CDN 프로필 블레이드에서 + 엔드포인트를 선택합니다.

  5. 엔드포인트 추가 팝업 대화 상자에서 다음 작업을 수행하고 추가를 선택합니다.

    설정 작업
    이름 텍스트 상자 cdnmedia[사용자 이름]을 입력합니다.
    원본 형식 드롭다운 목록 스토리지를 선택합니다.
    원본 호스트 이름 드롭다운 목록 이 랩에서 이전에 만든 스토리지 계정에 대한 contenthost [사용자 이름] .blob.core.windows.net 옵션을 선택합니다.
    원본 경로 텍스트 상자 media를 입력합니다.
    원본 호스트 헤더 텍스트 상자 기본값을 유지합니다.
    프로토콜 및 원본 포트 섹션 기본값을 유지합니다.
    최적화 대상 드롭다운 목록 일반 웹 배달을 선택합니다.

    다음 스크린샷은 엔드포인트 추가 대화 상자에 구성된 설정을 보여 줍니다.

    엔드포인트 추가 대화 상자에서 구성된 설정이 표시된 스크린샷.

  6. CDN 프로필 창에서 + 엔드포인트를 다시 선택합니다.

  7. 엔드포인트 추가 팝업 대화 상자에서 다음 작업을 수행하고 추가를 선택합니다.

    설정 작업
    이름 텍스트 상자 cdnvideo[사용자 이름]을 입력합니다.
    원본 형식 드롭다운 목록 스토리지를 선택합니다.
    원본 호스트 이름 드롭다운 목록 이 랩에서 이전에 만든 스토리지 계정에 대한 contenthost [사용자 이름] .blob.core.windows.net 옵션을 선택합니다.
    원본 경로 텍스트 상자 /video를 입력합니다.
    원본 호스트 헤더 텍스트 상자 기본값을 유지합니다.
    프로토콜 및 원본 포트 섹션 기본값을 유지합니다.
    최적화 대상 드롭다운 목록 일반 웹 배달을 선택합니다.

    다음 스크린샷은 엔드포인트 추가 대화 상자에 구성된 설정을 보여 줍니다.

    엔드포인트 추가 대화 상자에서 구성된 설정이 표시된 스크린샷.

  8. CDN 프로필 창에서 + 엔드포인트를 다시 선택합니다.

  9. 엔드포인트 추가 팝업 대화 상자에서 다음 작업을 수행하고 추가를 선택합니다.

    설정 작업
    이름 텍스트 상자 cdnweb[사용자 이름]을 선택합니다.
    원본 형식 드롭다운 목록 웹앱을 선택합니다.
    원본 호스트 이름 드롭다운 목록 이 랩에서 이전에 만든 웹앱에 대한 landingpage [사용자 이름] .azurewebsites.net 옵션을 선택합니다.
    원본 경로 텍스트 상자 기본값을 유지합니다.
    원본 호스트 헤더 텍스트 상자 기본값을 유지합니다.
    프로토콜 및 원본 포트 섹션 기본값을 유지합니다.
    최적화 대상 드롭다운 목록 일반 웹 배달을 선택합니다.

    다음 스크린샷은 엔드포인트 추가 대화 상자에 구성된 설정을 보여 줍니다.

    엔드포인트 추가 대화 상자에서 구성된 설정이 표시된 스크린샷.

검토

이 연습에서는 CDN(Content Delivery Network)의 리소스 공급자를 등록하고 CDN 프로필과 엔드포인트 리소스를 모두 만드는 공급자를 사용했습니다.

연습 3: 정적 웹 콘텐츠 업로드 및 구성

작업 1: 방문 페이지 살펴보기

  1. Azure Portal의 탐색 창에서 리소스 그룹을 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 landingpage [사용자 이름] 웹앱을 선택합니다.

  4. 웹 서비스 블레이드에서 찾아보기를 선택합니다. 새 브라우저 탭이 열리고 현재 웹 사이트가 반환됩니다. 화면에 표시되는 오류 메시지를 살펴봅니다. 멀티미디어 콘텐츠를 참조하는 특정 설정을 구성할 때까지 웹 사이트가 작동하지 않습니다.

  5. Azure Portal을 표시하고 있고 현재 열려 있는 브라우저 창으로 돌아갑니다.

작업 2: 저장소 Blob 업로드

  1. Azure Portal의 탐색 창에서 리소스 그룹을 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 contenthost [사용자 이름] 스토리지 계정을 선택합니다.

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

  5. 컨테이너 섹션에서 미디어 컨테이너를 선택한 다음, 업로드를 선택합니다.

  6. Blob 업로드 팝업 창에서 다음 작업을 수행합니다.

    a. 파일 섹션에서 파일 찾아보기를 선택하거나 끌어서 놓기를 사용합니다.

    b. 파일 탐색기 창에서 Allfiles (F):\Allfiles\Labs\12\Starter로 이동하여 다음 파일을 선택하고 열기를 선택합니다.

    • campus.jpg

    • conference.jpg

    • poster.jpg

    다. 파일이 이미 있는 경우 덮어쓰기가 선택되어 있는지 확인하고 업로드를 선택합니다.

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

  7. 컨테이너 창에서 설정 섹션의 속성을 선택합니다.

  8. URL 텍스트 상자에 값을 기록합니다. 이 값은 랩에서 나중에 사용합니다.

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

  10. 컨테이너 창에서 비디오 컨테이너를 선택한 다음, 업로드를 선택합니다.

  11. Blob 업로드 팝업 창에서 다음 작업을 수행합니다.

    a. 파일 섹션에서 파일 찾아보기를 선택하거나 끌어서 놓기를 사용합니다.

    b. 파일 탐색기 창에서 Allfiles (F):\Allfiles\Labs\12\Starter로 이동하여 welcome.mp4 파일을 선택하고 열기를 선택합니다.

    다. 파일이 이미 있는 경우 덮어쓰기가 선택되어 있는지 확인하고 업로드를 선택합니다.

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

  12. 컨테이너 창에서 설정 섹션의 속성을 선택합니다.

  13. URL 텍스트 상자에 값을 기록합니다. 이 값은 랩에서 나중에 사용합니다.

작업 3: 웹앱 설정 구성

  1. Azure Portal의 탐색 창에서 리소스 그룹을 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 landingpage [사용자 이름] 웹앱을 선택합니다.

  4. App Service 블레이드의 설정 섹션에서 환경 변수 링크를 선택합니다.

  5. 앱 설정 탭에서 + 추가를 선택합니다. 애플리케이션 설정 추가/편집 팝업 대화 상자에 다음 정보를 입력합니다.

    설정 작업
    이름 텍스트 상자 CDNMediaEndpoint를 입력합니다.
    값 텍스트 상자 이전에 이 랩에서 기록해둔 contenthost [사용자 이름] 스토리지 계정에 미디어 컨테이너의 URI 값을 입력합니다.
    배포 슬롯 설정 확인란 기본값을 유지합니다.

  6. 적용을 선택하여 팝업 대화 상자를 닫고 앱 설정 섹션으로 돌아갑니다.

  7. 앱 설정 탭에서 + 추가를 선택합니다. 애플리케이션 설정 추가/편집 팝업 대화 상자에 다음 정보를 입력합니다.

    설정 작업
    이름 텍스트 상자 CDNVideoEndpoint를 입력합니다.
    값 텍스트 상자 이전에 이 랩에서 기록해둔 contenthost [사용자 이름] 스토리지 계정에 비디오 컨테이너의 URI 값을 입력합니다.
    배포 슬롯 설정 확인란 기본값을 유지합니다.

  8. 적용을 선택하여 팝업 대화 상자를 닫고 앱 설정 섹션으로 돌아갑니다.

  9. 앱 설정 섹션 하단에서 적용을 선택합니다.

    참고: 앱 설정을 업데이트할 때 앱이 다시 시작될 수 있다는 경고가 표시될 수 있습니다. 확인을 선택합니다. 랩을 계속하기 전에 애플리케이션 설정이 저장되기를 기다립니다.

작업 4: 수정된 방문 페이지의 유효성 검사

  1. Azure Portal의 탐색 창에서 리소스 그룹을 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 landingpage [사용자 이름] 웹앱을 선택합니다.

  4. App Service 창에서 다시 시작을 선택한 다음, 예를 선택하여 앱 다시 시작 프로세스를 확인합니다.

    참고: 이 랩을 진행하기 전에 다시 시작 작업이 완료될 때까지 기다립니다. 작업이 완료되면 알림이 표시됩니다.

  5. 웹 서비스 블레이드에서 찾아보기를 선택합니다. 새 브라우저 창 또는 탭이 열리고 현재 웹 사이트로 돌아갑니다. 다양한 유형의 멀티미디어 콘텐츠를 렌더링하는 업데이트된 웹 사이트를 살펴봅니다.

  6. Azure Portal을 표시하고 있고 현재 열려 있는 브라우저 창으로 돌아갑니다.

검토

이 연습에서는 멀티미디어 콘텐츠를 스토리지 컨테이너에 Blob으로 업로드한 후 웹앱을 업데이트하여 스토리지 Blob을 직접 가리켰습니다.

연습 4: Content Delivery Network 엔드포인트 사용

작업 1: 엔드포인트 URI(Uniform Resource Identifier) 검색

  1. Azure Portal의 탐색 창에서 리소스 그룹 링크를 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 contentdeliverynetwork CDN 프로필을 선택합니다.

  4. CDN 프로필 창에서 cdnmedia [사용자 이름] 엔드포인트를 선택합니다.

  5. 엔드포인트 창에서 엔드포인트 호스트 이름 링크의 값을 복사합니다. 이 값은 랩에서 나중에 사용합니다.

  6. 엔드포인트 블레이드를 닫습니다.

  7. CDN 프로필 창에서 cdnvideo [사용자 이름] 엔드포인트를 선택합니다.

  8. 엔드포인트 창에서 엔드포인트 호스트 이름 링크의 값을 복사합니다. 이 값은 랩에서 나중에 사용합니다.

  9. 엔드포인트 블레이드를 닫습니다.

작업 2: 멀티미디어 콘텐츠 테스트

  1. 랩에서 이전에 복사한 cdnmedia [사용자 이름] 엔드포인트에서 엔드포인트 호스트 이름 URL을 /campus.jpg의 상대 경로와 결합하여 campus.jpg 리소스용 URL을 만듭니다.

    참고: 예를 들어 엔드포인트 호스트 이름 URL이 https://cdnmediastudent.azureedge.net/인 경우 새로 생성된 URL은 https://cdnmediastudent.azureedge.net/campus.jpg이 됩니다.

  2. 랩에서 이전에 복사한 cdnmedia [사용자 이름] 엔드포인트에서 엔드포인트 호스트 이름 URL을 /conference.jpg의 상대 경로와 결합하여 conference.jpg 리소스용 URL을 만듭니다.

    참고: 예를 들어 엔드포인트 호스트 이름 URL이 https://cdnmediastudent.azureedge.net/인 경우 새로 생성된 URL은 https://cdnmediastudent.azureedge.net/conference.jpg이 됩니다.

  3. 랩에서 이전에 복사한 cdnmedia [사용자 이름] 엔드포인트에서 엔드포인트 호스트 이름 URL을 /poster.jpg의 상대 경로와 결합하여 poster.jpg 리소스용 URL을 만듭니다.

    참고: 예를 들어 엔드포인트 호스트 이름 URL이 https://cdnmediastudent.azureedge.net/인 경우 새로 생성된 URL은 https://cdnmediastudent.azureedge.net/poster.jpg이 됩니다.

  4. 랩에서 이전에 복사한 cdnvideo [사용자 이름] 엔드포인트에서 엔드포인트 호스트 이름 URL을 /welcome.mp4의 상대 경로와 결합하여 welcome.mp4 리소스용 URL을 만듭니다.

    참고: 예를 들어 엔드포인트 호스트 이름 URL이 https://cdnvideostudent.azureedge.net/인 경우 새로 생성된 URL은 https://cdnvideostudent.azureedge.net/welcome.mp4이 됩니다.

  5. 작업 표시줄에서 Microsoft Edge 아이콘의 바로 가기 메뉴를 활성화한 다음, 새 창을 선택합니다.

  6. 새 브라우저 창에서 campus.jpg 미디어 리소스용으로 구성한 URL을 참조한 다음, 리소스를 성공적으로 찾았는지 확인합니다.

    참고: 콘텐츠를 아직 사용할 수 없는 경우 CDN 엔드포인트가 계속 초기화되고 있습니다. 이 초기화 작업은 5~15분 정도 걸릴 수 있습니다.

  7. conference.jpg 미디어 리소스용으로 만든 URL을 참조한 다음, 리소스를 성공적으로 찾았는지 확인합니다.

  8. poster.jpg 미디어 리소스용으로 만든 URL을 참조한 다음, 리소스를 성공적으로 찾았는지 확인합니다.

  9. welcome.mp4 비디오 리소스용으로 만든 URL을 참조한 다음, 리소스를 성공적으로 찾았는지 확인합니다.

  10. 이 작업에서 생성했던 브라우저 창을 닫습니다.

작업 3: 웹앱 설정 업데이트

  1. Azure Portal의 탐색 창에서 리소스 그룹을 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 landingpage [사용자 이름] 웹앱을 선택합니다.

  4. App Service 블레이드의 설정 섹션에서 환경 변수 링크를 선택합니다.

  5. 애플리케이션 설정 탭에서 기존의 CDNMediaEndpoint 애플리케이션 설정을 선택합니다.

  6. 애플리케이션 설정 추가/편집 팝업 대화 상자에서 이전에 랩에서 복사한 cdnmedia[사용자 이름] 엔드포인트의 엔드포인트 호스트 이름 URL을 입력하여 값 텍스트 상자를 업데이트한 후 적용을 선택합니다.

  7. 기존의 CDNVideoEndpoint 애플리케이션 설정을 선택합니다.

  8. 애플리케이션 설정 추가/편집 팝업 대화 상자에서 이전에 랩에서 복사한 cdnvideo[사용자 이름] 엔드포인트의 엔드포인트 호스트 이름 URL을 입력하여 값 텍스트 상자를 업데이트한 후 적용을 선택합니다.

  9. 앱 설정 섹션 하단에서 적용을 선택합니다.

    참고: 앱 설정을 업데이트할 때 앱이 다시 시작될 수 있다는 경고가 표시될 수 있습니다. 확인을 선택합니다. 랩을 계속하기 전에 애플리케이션 설정이 저장되기를 기다립니다.

  10. 구성 섹션에서 개요를 선택합니다.

  11. 개요 섹션에서 다시 시작을 선택한 다음, 예를 선택하여 앱 다시 시작 프로세스를 확인합니다.

    참고: 랩을 계속하기 전에 다시 시작 작업이 완료될 때까지 기다립니다. 작업이 완료되면 알림이 표시됩니다.

작업 4: 웹 콘텐츠를 테스트합니다.

  1. Azure Portal의 탐색 창에서 리소스 그룹 링크를 선택합니다.

  2. 리소스 그룹 창에서 이전에 이 랩에서 만든 MarketingContent 리소스 그룹을 선택합니다.

  3. MarketingContent 창에서 이전에 이 랩에서 만든 contentdeliverynetwork CDN 프로필을 선택합니다.

  4. CDN 프로필 창에서 cdnweb [사용자 이름] 엔드포인트를 선택합니다.

  5. 엔드포인트 창에서 엔드포인트 호스트 이름 링크의 값을 복사합니다.

  6. 작업 표시줄에서 Microsoft Edge 아이콘의 바로 가기 메뉴를 활성화한 다음, 새 창을 선택합니다.

  7. 새 브라우저 창에서 cdnweb [사용자 이름] 엔드포인트용 엔드포인트 호스트 이름 URL을 참조합니다.

  8. Content Delivery Network를 사용하여 모두 제공되는 웹 사이트 및 멀티미디어 콘텐츠를 살펴봅니다.

검토

이 연습에서는 Content Delivery Network를 사용하여 멀티미디어 콘텐츠를 제공하고 웹 애플리케이션 자체를 서비스하도록 웹앱을 업데이트했습니다.