|
| 1 | +--- |
| 2 | +title: Integrate a static website with Azure CDN - Azure Storage |
| 3 | +description: Learn how to cache static website content from an Azure Storage account by using Azure Content Delivery Network (CDN). |
| 4 | +author: normesta |
| 5 | +ms.service: storage |
| 6 | +ms.subservice: blobs |
| 7 | +ms.topic: conceptual |
| 8 | +ms.author: normesta |
| 9 | +ms.date: 01/22/2020 |
| 10 | +--- |
| 11 | + |
| 12 | +# Integrate a static website with Azure CDN |
| 13 | + |
| 14 | +You can enable [Azure Content Delivery Network (CDN)](../../cdn/cdn-overview.md) to cache content from a [static website](storage-blob-static-website.md) that is hosted in an Azure storage account. You can use Azure CDN to configure the custom domain endpoint for your static website, provision custom SSL certificates, and configure custom rewrite rules. Configuring Azure CDN results in additional charges, but provides consistent low latencies to your website from anywhere in the world. Azure CDN also provides SSL encryption with your own certificate. |
| 15 | + |
| 16 | +For information on Azure CDN pricing, see [Azure CDN pricing](https://azure.microsoft.com/pricing/details/cdn/). |
| 17 | + |
| 18 | +## Enable Azure CDN for your static website |
| 19 | + |
| 20 | +You can enable Azure CDN for your static website directly from your storage account. If you want to specify advanced configuration settings for your CDN endpoint, such as [large file download optimization](../../cdn/cdn-optimization-overview.md#large-file-download), you can instead use the [Azure CDN extension](../../cdn/cdn-create-new-endpoint.md) to create a CDN profile and endpoint. |
| 21 | + |
| 22 | +1. Locate your storage account in the Azure portal and display the account overview. |
| 23 | + |
| 24 | +2. Select **Azure CDN** under the **Blob Service** menu to configure Azure CDN. |
| 25 | + |
| 26 | + The **Azure CDN** page appears. |
| 27 | + |
| 28 | +  |
| 29 | + |
| 30 | +3. In the **CDN profile** section, specify a new or existing CDN profile. |
| 31 | + |
| 32 | +4. Specify a pricing tier for the CDN endpoint. To learn more about pricing, see [Content Delivery Network pricing](https://azure.microsoft.com/pricing/details/cdn/). For more information about the features available with each tier, see [Compare Azure CDN product features](../../cdn/cdn-features.md). |
| 33 | + |
| 34 | +5. In the **CDN endpoint name** field, specify a name for your CDN endpoint. The CDN endpoint must be unique across Azure. |
| 35 | + |
| 36 | +6. Specify your the static website endpoint in the **Origin hostname** field. |
| 37 | + |
| 38 | + To find your static website endpoint, navigate to the **Static website** settings for your storage account. Copy the primary endpoint and paste it into the CDN configuration. |
| 39 | + |
| 40 | + > [!IMPORTANT] |
| 41 | + > Make sure to remove the protocol identifier (*e.g.*, HTTPS) and the trailing slash in the URL. For example, if the static website endpoint is |
| 42 | + > `https://mystorageaccount.z5.web.core.windows.net/`, then you would specify `mystorageaccount.z5.web.core.windows.net` in the **Origin hostname** field. |
| 43 | +
|
| 44 | + The following image shows an example endpoint configuration: |
| 45 | + |
| 46 | +  |
| 47 | + |
| 48 | +7. Select **Create**, and then wait for it to propagate. After the endpoint is created, it appears in the endpoint list. |
| 49 | + |
| 50 | +8. To verify that the CDN endpoint is configured correctly, click on the endpoint to navigate to its settings. From the CDN overview for your storage account, locate the endpoint hostname, and navigate to the endpoint, as shown in the following image. The format of your CDN endpoint will be similar to `https://staticwebsitesamples.azureedge.net`. |
| 51 | + |
| 52 | +  |
| 53 | + |
| 54 | +9. Once the CDN endpoint propagation is complete, navigating to the CDN endpoint displays the contents of the index.html file that you previously uploaded to your static website. |
| 55 | + |
| 56 | +10. To review the origin settings for your CDN endpoint, navigate to **Origin** under the **Settings** section for your CDN endpoint. You will see that the **Origin type** field is set to *Custom Origin* and that the **Origin hostname** field displays your static website endpoint. |
| 57 | + |
| 58 | +  |
| 59 | + |
| 60 | +## Remove content from Azure CDN |
| 61 | + |
| 62 | +If you no longer want to cache an object in Azure CDN, you can take one of the following steps: |
| 63 | + |
| 64 | +* Make the container private instead of public. For more information, see [Manage anonymous read access to containers and blobs](storage-manage-access-to-resources.md). |
| 65 | +* Disable or delete the CDN endpoint by using the Azure portal. |
| 66 | +* Modify your hosted service to no longer respond to requests for the object. |
| 67 | + |
| 68 | +An object that's already cached in Azure CDN remains cached until the time-to-live period for the object expires or until the endpoint is [purged](../../cdn/cdn-purge-endpoint.md). When the time-to-live period expires, Azure CDN determines whether the CDN endpoint is still valid and the object is still anonymously accessible. If they are not, the object will no longer be cached. |
| 69 | + |
| 70 | +## Next steps |
| 71 | + |
| 72 | +(Optional) Add a custom domain to your Azure CDN endpoint. See [Tutorial: Add a custom domain to your Azure CDN endpoint](../../cdn/cdn-map-content-to-custom-domain.md). |
0 commit comments