在 Azure 网站上启用 CDN 端点


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="http://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 选项卡中找到,如下所示:

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

站点相关:

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

CDN 相关:

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

现在就可以发布网站了。

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

但是,如果您看到的界面如下所示:

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

 查看结果

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

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

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

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

结论

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

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

Comments (0)

Skip to main content