Scribd Logo
Upload

Welcome to Scribd!

  • 45 views

    Integrating Azure CDN With Web Apps

    Uploaded by

    scribd
    The document provides steps to integrate an Azure CDN with a Web App. It includes tasks to create a Web App, download a sample site, configure the CDN with the Web App, purge the CDN cache, use query strings to version content, and restrict CDN content by country or region. The steps guide the user through publishing a sample site to Azure as a Web App, then configuring an Azure CDN endpoint for the Web App to cache and deliver content.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Integrating Azure CDN With Web Apps

    Uploaded by

    scribd
    45 views30 pages
    The document provides steps to integrate an Azure CDN with a Web App. It includes tasks to create a Web App, download a sample site, configure the CDN with the Web App, purge the CDN cache, use query strings to version content, and restrict CDN content by country or region. The steps guide the user through publishing a sample site to Azure as a Web App, then configuring an Azure CDN endpoint for the Web App to cache and deliver content.

    Original Title

    Integrating Azure CDN with Web Apps

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides steps to integrate an Azure CDN with a Web App. It includes tasks to create a Web App, download a sample site, configure the CDN with the Web App, purge the CDN cache, use query strings to version content, and restrict CDN content by country or region. The steps guide the user through publishing a sample site to Azure as a Web App, then configuring an Azure CDN endpoint for the Web App to cache and deliver content.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    45 views30 pages

    Integrating Azure CDN With Web Apps

    Uploaded by

    scribd
    The document provides steps to integrate an Azure CDN with a Web App. It includes tasks to create a Web App, download a sample site, configure the CDN with the Web App, purge the CDN cache, use query strings to version content, and restrict CDN content by country or region. The steps guide the user through publishing a sample site to Azure as a Web App, then configuring an Azure CDN endpoint for the Web App to cache and deliver content.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 30

    Integrating Azure CDN with Web Apps

    Task 1: Create Web App


    Task 2: Download Sample Site from GitHub
    Task 3: Configure Azure CDN with Web App
    Task 4: Purge the CDN
    Task 5: Query String to version Content
    Task 6: Restrict Azure CDN Content by Country/Region
    Task 1: Create Web App

    Step 1: Open Microsoft Azure Portal


    https://portal.azure.com

    Step 2: Create Web App


    + Create a resource -> Web App
    Step 3: Create New Web App
    Subscription: Choose active Subscription

    Resource Group: Create New Ex. CDNDemoRG


    Name: Enter web app unique name

    Publish: Code

    Runtime stack: ASP.NET 4.7

    Region: Choose any nearest location

    Click on Review and Create button


    Step 4: Review and Create tab will be there
    Click on Create button.
    Step 5: Click on Resource Group -> CDNDemoRG

    Step 6: Select App Service.


    Step 7: Click on Browse option

    Default Page of Web App will run


    Task 2: Download Sample Site from GitHub
    Step 8: Download sample project from below link:
    https://github.com/romilbheda/azure-cdn-webdemo

    Click on Clone or download -> Download ZIP

    Step 9: Browse zip file and Extract that folder


    Site content will look as below:

    Step 10: Download Visual Studio Code


    https://code.visualstudio.com/download

    Click on Download for Windows option


    Step 11: Start Visual Studio Code
    To work with Microsoft Azure, require few extensions: Azure Account, Azure App Service

    Click on Extensions -> Search for “Azure sign in” -> Select Azure Account and click on Install button

    Click on Extensions -> Search for “Azure App Service” -> Select Azure App Service and click on Install
    button
    Step 12: First we need to Sign with Azure account in Visual Studio Code
    View Menu -> Command Palette…

    Type “azure sign in” (without quote)

    Select Azure: Sign in command

    Automatic browser will open with Azure login. Enter Azure Credentials
    Within few second it will load as below: You are signed in now and can close this page.

    Step 13: File Menu -> Open Folder…


    Browse that Sample project location and click on Select Folder

    Step 14: Open index.html page


    Step 15: Time to publish sample site on Microsoft Azure as a Web App
    Select Azure logo (Left side)

    Expand Azure Subscription

    Select Web App and click on Publish option

    Select sample site folder

    Select Azure Web App from list


    Click on Deploy button

    Right side bottom status available. Wait for few seconds to deploy on Azure

    Click on Browse Website

    Sample site running on Azure


    Task 3: Configure Azure CDN with Web App
    Step 16: Configure with Azure CDN
    Select Networking under Settings option

    Click on Configure Azure CDN for your app


    Step 17: Create New endpoint of Azure CDN

    Create New: Enter CDN profile name Ex. cdnwebdemoprofile

    Pricing tier: Select Standard Akamai

    Note: based on pricing tier it will configure

     For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.


     For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
     For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles,
    propagation usually completes within 90 minutes.

    CDN Endpoint Name: Enter unique name of CDN endpoint

    Click on Create button.


    Wait for few seconds to create CDN Endpoint.

    After creation of Endpoint click on that.

    Review CDN Endpoint and Origin hostname

    Step 18: First Copy Origin Hostname


    Open Browser and paste Origin Hostname URL. Also add /index.html and run site

    Step 19: Navigate to Azure Portal once again.


    Copy CDN Endpoint hostname

    Open another Browser and paste CDN Endpoint hostname URL. Also add /index.html and run site
    Also try with different files such as jpg, js, css

    /css/bootstrap.css

    Step 20: Open Visual Studio Code and modify content.


    Navigate to line number 19 or check Azure CDN Demo Site header.

    <h1>Azure CDN Demo Site</h1>

    Replace with

    <h1>Azure CDN Demo Site – v2</h1>


    Step 21: Follow the same steps to Publish Web App on Azure

    Select sample site folder

    Select Azure Web App from list

    Click on Deploy button


    Right side bottom status available. Wait for few seconds to deploy on Azure

    Click on Browse Website

    Now review both URLs: Site address and CDN Endpoint address

    Normal site updated with V2 but CDN Endpoint site not updated.
    Task 4: Purge the CDN
    We can resolve this issue by below functionality

    The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL)
    configuration. The default TTL is seven days. At times you might need to refresh the CDN before the TTL
    expiration; for example, when you deploy updated content to the web app. To trigger a refresh,
    manually purge the CDN resources.

    Step 22: Click on Purge option

    Step 23: Enter Content path details and click on Purge option

    Content path

    /index.html

    /img/

    /css/

    /js/
    Step 24: Now refresh CDN Endpoint URL. Changes will be done.
    Task 5: Query String to version Content

    Azure CDN offers the following caching behavior options:

     Ignore query strings


     Bypass caching for query strings
     Cache every unique 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.

    Step 25: Select Caching Rules


    Change Custom caching rules to Cache every unique URL and click on Save button.
    Step 26: You can verify by unique URL cached
    Open CDN Endpoint URL with page name and add query string

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

    Step 27: Once again navigate to Visual Studio Code and update version from v2 to v3.
    <h1>Azure CDN Demo Site – v2</h1>

    Replace with below:

    <h1>Azure CDN Demo Site - v3</h1>


    Step 28: Again, publish the updated content as previous steps of publish content on Azure.

    Step 29: Review Site URL


    Step 30: This output shows that each query string is treated differently:

    http://cdnwebdemo.azureedge.net/index.html?q=1 -> q=1 was used before, so cached contents are


    returned (v2)

    http://cdnwebdemo.azureedge.net/index.html?q=2 -> q=2 is new, so the latest web app contents are
    retrieved and returned (v3)
    Task 6: Restrict Azure CDN Content by Country/Region
    When a user requests your content, by default, the content is served regardless of the location
    of the user making the request. However, in some cases, you may want to restrict access to your
    content by country/region. With the geo-filtering feature, you can create rules on specific paths
    on your CDN endpoint to allow or block content in selected countries/regions.

    Step 31: Select Geo-filtering

    Enter below details:

    Path: /img/

    Action: Block

    Country Codes: India, IN

    Click on Save option

    Output of Restrict country/region CDN Endpoint

    You might also like