자습서: Azure App Service 웹앱에 Azure CDN 추가Tutorial: Add Azure CDN to an Azure App Service web app

이 자습서에서는 Azure CDN(Content Delivery Network)Azure App Service의 웹앱에 추가하는 방법을 보여줍니다.This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. 웹앱은 웹 애플리케이션, REST API 및 모바일 백 엔드를 호스팅하는 서비스입니다.Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

사용하게 될 샘플 정적 HTML 사이트의 홈 페이지는 다음과 같습니다.Here's the home page of the sample static HTML site that you'll work with:

샘플 앱 홈 페이지

학습할 내용:What you'll learn:

  • CDN 엔드포인트 만들기Create a CDN endpoint.
  • 캐시된 자산 새로 고침Refresh cached assets.
  • 쿼리 문자열을 사용하여 캐시된 버전 제어Use query strings to control cached versions.

필수 구성 요소Prerequisites

이 자습서를 완료하려면 다음이 필요합니다.To complete this tutorial:

Azure 구독이 아직 없는 경우 시작하기 전에 체험 계정을 만듭니다.If you don't have an Azure subscription, create a free account before you begin.

웹앱 만들기Create the web app

사용할 웹앱을 만들려면 앱 찾아보기 단계를 통해 정적 HTML 빠른 시작을 수행합니다.To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

Azure Portal에 로그인Log in to the Azure portal

브라우저를 열고 Azure Portal로 이동합니다.Open a browser and navigate to the Azure portal.

동적 사이트 가속 최적화Dynamic site acceleration optimization

DSA(동적 사이트 가속)에 대한 CDN 엔드포인트를 최적화하려는 경우 CDN 포털을 사용하여 프로필 및 엔드포인트를 만들어야 합니다.If you want to optimize your CDN endpoint for dynamic site acceleration (DSA), you should use the CDN portal to create your profile and endpoint. DSA(동적 사이트 가속) 최적화를 사용하여 동적 콘텐츠가 포함된 웹 페이지의 성능이 크게 향상되었습니다.With DSA optimization, the performance of web pages with dynamic content is measurably improved. CDN 포털에서 DSA에 대한 CDN 엔드포인트를 최적화하는 방법에 대한 지침은 동적 파일의 전송을 가속화하도록 CDN 엔드포인트 구성을 참조하세요.For instructions about how to optimize a CDN endpoint for DSA from the CDN portal, see CDN endpoint configuration to accelerate delivery of dynamic files. 그렇지 않으면 새 엔드포인트를 최적화하지 않으려는 경우 다음 섹션의 단계를 수행하여 만들려는 웹앱 포털을 사용할 수 있습니다.Otherwise, if you don't want to optimize your new endpoint, you can use the web app portal to create it by following the steps in the next section. Verizon의 Azure CDN 프로필의 경우 CDN 엔드포인트를 만든 후에 최적화를 변경할 수 없습니다.Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

CDN 프로필 및 엔드포인트 만들기Create a CDN profile and endpoint

왼쪽 탐색 영역에서 App Services 를 선택한 다음 정적 HTML 빠른 시작에서 만든 앱을 선택합니다.In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

포털에서 App Service 앱 선택

App Service 페이지의 설정 섹션에서 네트워킹 > 앱에서 Azure CDN 구성 을 선택합니다.In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

포털에서 CDN 선택

Azure Content Delivery Network 페이지에서 테이블에 지정된 대로 새 엔드포인트 설정을 제공합니다.In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

포털에서 프로필 및 엔드포인트 만들기

설정Setting 제안 값Suggested value DescriptionDescription
CDN 프로필CDN profile myCDNProfilemyCDNProfile CDN 프로필은 동일한 가격 책정 계층을 가진 CDN 엔드포인트의 컬렉션입니다.A CDN profile is a collection of CDN endpoints with the same pricing tier.
가격 책정 계층Pricing tier Standard AkamaiStandard Akamai 가격 책정 계층은 공급자 및 사용 가능한 기능을 지정합니다.The pricing tier specifies the provider and available features. 이 자습서에서는 Standard Akamai 를 사용합니다.This tutorial uses Standard Akamai.
CDN 엔드포인트 이름CDN endpoint name azureedge.net 도메인에서 고유한 이름Any name that is unique in the azureedge.net domain 도메인 <endpointname> .azureedge.net에서 캐시된 리소스에 액세스합니다.You access your cached resources at the domain <endpointname>.azureedge.net.

만들기 를 선택하여 CDN 프로필을 만듭니다.Select Create to create a CDN profile.

Azure에서는 프로필 및 엔드포인트를 만듭니다.Azure creates the profile and endpoint. 새 엔드포인트는 Endpoints 목록에서 표시되고 프로비전될 때 상태가 Running 입니다.The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

목록의 새 엔드포인트

CDN 엔드포인트 테스트Test the CDN endpoint

등록이 전파되는 등록에 시간이 걸리기 때문에, 엔드포인트를 즉시 사용할 수는 없습니다.Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • Microsoft의 Azure CDN 표준 프로필의 경우 일반적으로 10분 이내에 전파가 완료됩니다.For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • Akamai의 Azure CDN Standard 프로필의 경우, 일반적으로 1분 이내에 전파가 완료됩니다.For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • Verizon의 Azure CDN 표준Verizon의 Azure CDN 프리미엄 프로필의 경우 일반적으로 90분 이내에 전파가 완료됩니다.For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 90 minutes.

샘플 앱에는 index.html 파일 및 다른 정적 자산을 포함하는 css, imgjs 폴더가 있습니다.The sample app has an index.html file and css, img, and js folders that contain other static assets. 이러한 파일에 대한 콘텐츠 경로는 CDN 엔드포인트와 동일합니다.The content paths for all of these files are the same at the CDN endpoint. 예를 들어 다음 URL은 모두 css 폴더의 bootstrap.css 파일에 액세스합니다.For example, both of the following URLs access the bootstrap.css file in the css folder:

http://<appname>.azurewebsites.net/css/bootstrap.css
http://<endpointname>.azureedge.net/css/bootstrap.css

브라우저를 다음 URL로 이동합니다.Navigate a browser to the following URL:

http://<endpointname>.azureedge.net/index.html

CDN에서 제공되는 샘플 앱 홈 페이지

Azure 웹앱에서 이전에 실행한 것과 동일한 페이지가 표시됩니다.You see the same page that you ran earlier in an Azure web app. Azure CDN에서 원본 웹앱의 자산을 검색하고 CDN 엔드포인트에서 제공하고 있습니다.Azure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

이 페이지가 CDN에서 캐시된다는 것을 보장하기 위해 페이지를 새로 고칩니다.To ensure that this page is cached in the CDN, refresh the page. 동일한 자산에 대한 두 개의 요청에서 CDN은 요청된 콘텐츠를 캐시해야 합니다.Two requests for the same asset are sometimes required for the CDN to cache the requested content.

Azure CDN 프로필 및 엔드포인트를 만드는 방법에 대한 자세한 내용은 Azure CDN 시작을 참조하세요.For more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

CDN 제거Purge the CDN

CDN은 TTL(time-to-live) 구성을 기반으로 원본 웹앱의 자원을 주기적으로 새로 고칩니다.The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. 기본 TTL은 7일입니다.The default TTL is seven days.

예를 들어 때때로 웹앱에 업데이트된 콘텐츠를 배포할 때 TTL이 만료되기 전에 CDN을 새로 고쳐야 합니다.At times you might need to refresh the CDN before the TTL expiration; for example, when you deploy updated content to the web app. 새로 고침을 트리거하기 위해 CDN 리소스를 수동으로 제거합니다.To trigger a refresh, manually purge the CDN resources.

자습서의 이 섹션에서는 웹앱에 대한 변경 내용을 배포하고 CDN을 삭제하여 캐시를 새로 고치기 위해 CDN을 트리거합니다.In this section of the tutorial, you deploy a change to the web app and purge the CDN to trigger the CDN to refresh its cache.

웹앱에 대한 변경 내용 배포Deploy a change to the web app

다음 예제와 같이 index.html 파일을 열고 - V2 를 H1 제목에 추가합니다.Open the index.html file and add - V2 to the H1 heading, as shown in the following example:

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

변경 내용을 커밋하고 웹앱에 배포합니다.Commit your change and deploy it to the web app.

git commit -am "version 2"
git push azure main

배포가 완료되면 웹앱 URL을 찾아 변경 사항을 확인합니다.Once deployment has completed, browse to the web app URL to see the change.

http://<appname>.azurewebsites.net/index.html

웹앱의 제목에서 V2

홈 페이지의 CDN 엔드포인트 URL로 이동한다면 CDN에서 캐시된 버전이 아직 만료되지 않았기 때문에 변경 내용을 표시하지 않습니다.If you browse to the CDN endpoint URL for the home page, you won't see the change because the cached version in the CDN hasn't expired yet.

http://<endpointname>.azureedge.net/index.html

CDN의 제목에서 V2 없음

포털에서 CDN 제거Purge the CDN in the portal

CDN을 트리거하여 캐시된 버전을 업데이트하려면 CDN을 제거합니다.To trigger the CDN to update its cached version, purge the CDN.

포털 왼쪽 탐색 영역에서 리소스 그룹 을 선택한 다음 웹앱(myResourceGroup)에 만든 리소스 그룹을 선택합니다.In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

리소스 그룹 선택

리소스의 목록에서 CDN 엔드포인트를 선택합니다.In the list of resources, select your CDN endpoint.

엔드포인트 선택

Endpoint 페이지의 맨 위에서 제거 를 선택합니다.At the top of the Endpoint page, select Purge.

제거 선택

제거하려는 콘텐츠 경로를 입력합니다.Enter the content paths you want to purge. 전체 파일 경로를 전달하여 개별 파일을 제거하거나 경로 세그먼트를 전달하여 폴더에서 모든 콘텐츠를 제거하고 새로 고칠 수 있습니다.You can pass a complete file path to purge an individual file, or a path segment to purge and refresh all content in a folder. index.html 을 변경했으므로 해당 경로 중 하나에 있는지 확인합니다.Because you changed index.html, ensure that is in one of the paths.

페이지 맨 아래에서 제거 를 선택합니다.At the bottom of the page, select Purge.

페이지 제거

CDN이 업데이트되었는지 확인Verify that the CDN is updated

제거 요청 처리가 완료될 때까지 일반적으로 몇 분 정도를 기다립니다.Wait until the purge request finishes processing, which is typically a couple of minutes. 현재 상태를 보려면 페이지 맨 아래에 있는 벨 아이콘을 선택합니다.To see the current status, select the bell icon at the top of the page.

제거 알림

index.html 의 CDN 엔드포인트 URL을 탐색할 때 홈 페이지의 제목에 추가한 V2 가 표시되는 데, 이는 CDN 캐시가 새로 고쳐졌음을 나타냅니다.When you browse to the CDN endpoint URL for index.html, you'll see the V2 that you added to the title on the home page, which indicates that the CDN cache has been refreshed.

http://<endpointname>.azureedge.net/index.html

CDN의 제목에서 V2

자세한 내용은 Azure CDN 엔드포인트 제거를 참조하세요.For more information, see Purge an Azure CDN endpoint.

버전 콘텐츠에 쿼리 문자열 사용Use query strings to version content

Azure CDN은 다음과 같은 캐싱 동작 옵션을 제공합니다.Azure CDN offers the following caching behavior options:

  • 쿼리 문자열 무시Ignore query strings
  • 쿼리 문자열에 대한 캐싱 우회Bypass caching for query strings
  • 모든 고유한 URL 캐시Cache every unique URL

첫 번째 옵션이 기본값입니다. 즉 액세스하는 URL의 쿼리 문자열에 관계없이 캐시된 자산의 버전이 하나뿐임을 나타냅니다.The first option is the default, which means there is only one cached version of an asset regardless of the query string in the URL.

자습서의 이 섹션에서는 캐싱 동작을 변경하여 고유한 URL을 캐시합니다.In this section of the tutorial, you change the caching behavior to cache every unique URL.

캐시 동작 변경Change the cache behavior

Azure Portal의 CDN 엔드포인트 페이지에서 캐시 를 선택합니다.In the Azure portal CDN Endpoint page, select Cache.

쿼리 문자열 캐싱 동작 드롭다운 목록에서 모든 고유한 URL 캐시 를 선택합니다.Select Cache every unique URL from the Query string caching behavior drop-down list.

저장 을 선택합니다.Select Save.

쿼리 문자열 캐싱 동작 선택

고유 URL을 별도로 캐시했는지 확인Verify that unique URLs are cached separately

브라우저의 CDN 엔드포인트에서 홈 페이지로 이동하고, 쿼리 문자열을 포함합니다.In a browser, navigate to the home page at the CDN endpoint, and include a query string:

http://<endpointname>.azureedge.net/index.html?q=1

Azure CDN은 제목에 V2 를 포함하는 현재 웹앱 콘텐츠를 반환합니다.Azure CDN returns the current web app content, which includes V2 in the heading.

이 페이지가 CDN에서 캐시된다는 것을 보장하기 위해 페이지를 새로 고칩니다.To ensure that this page is cached in the CDN, refresh the page.

index.html 을 열고 V2V3 로 변경한 다음, 변경 사항을 배포합니다.Open index.html, change V2 to V3, then deploy the change.

git commit -am "version 3"
git push azure main

브라우저에서 q=2과 같은 새 쿼리 문자열이 있는 CDN 엔드포인트 URL로 이동합니다.In a browser, go to the CDN endpoint URL with a new query string, such as q=2. Azure CDN은 현재 index.html 파일을 가져오고 V3 를 표시합니다.Azure CDN gets the current index.html file and displays V3. 그러나 q=1 쿼리 문자열을 사용하여 CDN 엔드포인트로 이동하는 경우 V2 를 참조하세요.However, if you navigate to the CDN endpoint with the q=1 query string, you see V2.

http://<endpointname>.azureedge.net/index.html?q=2

CDN에서 제목에 V3, 쿼리 문자열 2

http://<endpointname>.azureedge.net/index.html?q=1

CDN에서 제목에 V2, 쿼리 문자열 1

이 출력에서는 각 쿼리 문자열이 다르게 처리됨을 보여 줍니다.This output shows that each query string is treated differently:

  • 이전에는 q=1이 사용되어 캐시된 내용(V2)을 반환합니다.q=1 was used before, so cached contents are returned (V2).
  • q=2는 새로운 쿼리 문자열이므로 최신 웹앱 내용(V3)을 검색하여 반환합니다.q=2 is new, so the latest web app contents are retrieved and returned (V3).

자세한 내용은 쿼리 문자열을 사용하여 Azure CDN 캐싱 동작 제어를 참조하세요.For more information, see Control Azure CDN caching behavior with query strings.

리소스 정리Clean up resources

이전 단계에서 Azure 리소스를 리소스 그룹에 만들었습니다.In the preceding steps, you created Azure resources in a resource group. 나중에 이러한 리소스가 필요하지 않을 것 같으면 Cloud Shell에서 다음 명령을 실행하여 리소스 그룹을 삭제합니다.If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

이 명령을 실행하는 데 1분 정도 걸릴 수 있습니다.This command may take a minute to run.

다음 단계Next steps

학습한 내용은 다음과 같습니다.What you learned:

  • CDN 엔드포인트 만들기Create a CDN endpoint.
  • 캐시된 자산 새로 고침Refresh cached assets.
  • 쿼리 문자열을 사용하여 캐시된 버전 제어Use query strings to control cached versions.

다음 문서에서 CDN 성능을 최적화하는 방법에 대해 알아봅니다.Learn how to optimize CDN performance in the following articles: