在 Azure 网站上启用 CDN 端点

  • Article

Ben Cohen Azure 网站项目经理

Azure 内容分发网络 (CDN) 是一款使您能够向全球客户更快、更可靠地发送音频、图像和其它静态文件的服务。它通过全球服务器网络实现这一点，这些服务器能够从与每个用户相关的最近节点提供内容（有关目前所有节点位置的更新列表，请单击此处）。这样能够大大提升速度和可用性，显著改善用户体验。CDN 通常用于为网站提供图像和脚本，而现在，Azure 网站已经支持与 CDN 的直接集成。本博客文章将向您演示基本网站的设置、CDN 支持的集成以及使用开发人员工具观测CDN效果，从而说明如何操作 CDN。

在门户中创建网站

  • 登录 Azure 管理门户
  • 单击仪表板左下方的 +New（+新建）图标
  • 选择 Compute -  Web Site -  Quick Create（计算 - 网站 - 快速创建）
  • 在 URL 框中，为您的网站提供一个唯一的名称
  • 单击 Create Web Site（创建网站）按钮

 

现在网站创建成功，并可从门户的 Web Sites（网站）选项卡下看到

创建 CDN

网站建立完成后，您还需要创建一个关联的 CDN

  • 再次单击 +New（+新建）图标
  • 选择 App Services -  CDN -  Quick Create（应用程序服务 - CDN - 快速创建）
  • 从下拉列表中选择与您的网站关联的 Subscription（订阅）
  • 单击 Origin Domain（源域）下拉列表
  • 在下拉列表下，您应该能看到 Web Sites（网站）类别以及您关联的站点 URL
  • 选择您的站点并单击 Create（创建）

将创建 CDN 并可在门户的 CDN 选项卡下查看

注意：原始站点 URL 位于最右端，关联 CND 的 URL 在其左侧。

现在，尝试单击链接访问 CDN

哦，糟糕！哪里出错了？实际上没有错误。CDN 网络传播最多需要 60 分钟，所以在上线之前您可能会收到状态代码 400（请求错误）或 404（未找到）。

但别担心，您仍能够完成此教程并可以随后在 CDN 可用时回来查看结果。

注意：通常，没有理由要直接访问 CDN（只须在您网页的源中引用 CDN），但直接单击链接是查看 URL 是否已上线的简单方法。

从 CDN 中提取，更新网站内容

在本部分，我们将需要在我们的站点上托管一个简单的网页。本教程不涉及在 Azure 站点部署您自己的内容的详细过程，但您可以从此处详细介绍的各种方法中选择一种。

不过，如果您想完全跟随本教程，下面是我的示例页面的文件结构 + 源。

文件结构

root-site-folder

  | index.html

  | Images

    | panda.jpg

index.html

<!DOCTYPE
html>

<html lang="en">

    <head>

        <meta charset="utf-8"/>

        <title>Hello Panda</title>

    </head>

    <body>

        <h1>Hello Panda</h1>

        <p>Web Server Hosted Image:</p>

        <img src="Images/panda.jpg" alt="panda pic goes here" height=400 width=266>

        <p>CDN Hosted Image:</p>

        <!--Replace the image source with the same file location but relevant to the CDN address-->

        <img src="https://az664986.vo.msecnd.net/Images/panda.jpg" alt="panda pic goes here" height=400 width=266>

    </body>

 </html>

我们的基本页对同一图像加载两次，一次直接从 Web 服务器加载，另一次从 CDN 加载。

要访问 CDN 上的缓存内容，请使用门户中提供的 CDN URL。地址可以从 URL 列下门户的 CDN 选项卡中找到，如下所示：

https://<CDNNamespace>.vo.msecnd.net/

此外，请注意从 CDN 访问静态内容的模式。由于 CDN 已相对于您的网站进行了自动配置，其文件结构相同。因此，如果您想要通过 CDN 而非 Web 服务器访问静态内容，您只需将源标记中站点相关的 URL 替换成类似的 CDN 相关的 URL，如：

站点相关：

<img src="path/to/file">

CDN 相关：

<img src="https:// <my CDN URL> /path/to/file">

现在就可以发布网站了。

如果一切正常，您应该能看到两张图像加载，如下所示：

但是，如果您看到的界面如下所示：

可能是您的 CDN 仍没有完成上线，您将需要等待上线完成然后刷新页面。

 查看结果

通过在开发人员工具中监控网络活动，即可看到两张图像加载时间的差异。此教程将使用 Internet Explorer，但所有主要浏览器中的步骤应该相同。

  • 打开 IE
  • 导航到您的站点 URL
  • 按 F12 打开开发人员工具
  • 单击 Network（网络）选项卡
  • 将记录按钮切换至 Capture Network Traffic（捕获网络流量）
  • 刷新页面

注意服务器托管和 CDN 托管图像加载时间的差异：

注意：根据 Web 服务器位置、最终用户位置以及常规服务器加载，这些数字会有很大差异

结论

您现在应该清楚地了解了如何建立 CDN 端点并将其与您的 Azure 网站集成，以及如何使用基本的浏览器工具衡量其有效性。有关 CDN 自定义和使用的详细信息，请查看此处的文档。

本文翻译自：https://azure.microsoft.com/blog/2014/09/18/enabling-cdn-for-azure-websites/