使用 W3 总缓存 Azure CDN 和 WordPress

Azure storage CDN

这篇是前篇文 Optimizing WordPress hosted on Windows 的后续文章。

现在是假期所以我有一些空闲时间,我会在这篇文章补充前篇第一部份的数据,主要集中解释在 WordPress 的 Azure CDN 使用 W3 总缓存 WP 插件。

Azure CDN:在开始之前

设置 Azure CDN 和在 WordPress 包括参考文献的过程是十分简单的,只是由于 DNS 的更改和数据迁移所以有点费时,但这不是一个大问题。

建立 Azure 存储组件

为了把一切有组织地安排,我建议建立一个新的储存容器。存储账户和容器的名称将是访问存储服务端点和 CDN 的 URL 的一部分。

例子:

Blob存储网址:: http://[account_name].blob.core.windows.net/[container_name]
CDN 网址: : http://[id].vo.msecnd.net/[container_name]
CDN 网址自定义网域: : http://[sub_domain].[domain_name]/[container_name]

第 1 步 – 创建一个新的存储账户

打开 Azure 的网站,点击位于右边菜单的 NEW (新增)键。点击 Everything (所有),然后选择 Storage (存储),cache (缓存) + backup (备份)。在选择窗格中,选择 Storage (存储),然后点击位于页面底部的 Create (创建)按钮。

Azure-Storage-Setup-1

Azure-Storage-Setup-2

Azure-Storage-Setup-3

现在提供一个名字(我用我的博客名字)、等级、你的订阅和位置。我会建议你选择一个接近你的 WP 网站托管的位置,然后一切都将在 Azure CDN 发布。如果你在 Azure 内托管你的 WP 网站,你可以在现有的 Azure 资源组别保存你的存储账户。如果没有就需要创建一个新的存储账户。 Azure 的资源组别不能在旧的 Azure 网站使用。

第 2 步 – 创建一个新的存储容器

打开你刚才创建的存储账户和在页面中点击 Containers (容器)。点击位于新配置窗格顶部范围内的 ADD (添加)。提供一个名称(我使用博客名称),并选择访问类型。Blob:匿名请求访问 blobs

Azure-Storage-Setup-4

Azure-Storage-Setup-5

第 3 步 -为你的存储账户 创建一个新的 Azure CDN 端点

注: CDN 端点只能在旧Azure网站 manage.windowsazure.com 创建

打开旧 Azure 网站,并点击位于左侧的菜单中的 CDN 。然后点击 NEW » QUICK CREATE (快速创建)。选择你的订阅,并指定早前为 ORIGIN DOMAIN (原始域)创建的存储账户。点击 Create (创建)来创建新的端点。

Azure-CDN-Setup-1

一旦已创建端点,它会出现在订阅列表端点。列表视图显示用于访问缓存内容以及原始域的 URL。请务必复制该域,因为我们将需要与你的 DNS 供货商用于创建 CNAME 资源,从[subdomain].yourdomain.com[your_id].vo.msecnd.net

Azure-CDN-Setup-2

第 4 步 – 创建CNAME资源

登录到你的 DNS 服务供货商,打开 DNS 域名管理器。我使用 GoDaddy 的,但是 DNS 管理部分都会有类似的选项。点击 Add Record, (添加记录),指定 CNAME 的类型。提供托管域名(你的 CDN 子域名),并确保它指向 Azure CDN 端点。

Azure-CDN-Setup-3

第 5 步 – 为Azure端点注册一个自定义域

注: 任何在 DNS 上进行的更改都需要一些时间来解决。最好等待一个小时左右再继续。

打开旧的 Azure 网站,并导航到先前创建的 CDN。在下面的功能区,点击 Manage Domains (管理域名),以显示 Manage custom domains (管理自定义域)对话框。现在,在对话框中输入你的自定义域,包括子域。例如 cdn.mydomain.com。Azure 将在CNAME 记录中验证你输入的域名。如果CNAME 是正确的,你的自定义域便完成验证,并可以在 CDN 内容中使用

Azure-CDN-Setup-4

Azure-CDN-Setup-5

第 6 步 – 启用和配置W3总缓存

在你的WP中导航到 Plugins » Add New (插件>添加)和搜寻 W3 Total Cache (W3 的总缓存)。在详细信息窗格中,选择 Install now (立即安装)以启动安装过程。

安装插件后,一个名为 Performance (性能)新菜单将会出现。点击 Performance CDN (性能 CDN )。页面刷新后导航到 General (一般)选项,然后选择你想在 CDN 内存储的文件类型。我选择了所有 5 个选项。

Azure-CDN-WordPress-5
向下滚动到 Configuration (配置)部分。在这里,你需要提供在Azure中的配置信息 。Account name (账户名称)是你的存储账户名称,账号密钥可以在网站中的账户详细信息找出。

Azure-CDN-WordPress-6
Container (容器)只是之前创建存储容器的名称。保持 SSL 援助设置不变,并在第一个输入框中添加你的 CNAME;并更换网站的托管名。提供所有信息后,请务必按 Microsoft Azure Storage upload (微软 Azure 存储上传)按钮。

Azure-CDN-WordPress-7

第 7 步 – 配置浏览器高速缓存设置和压缩

这是配置过程非常重要的步骤,然而,这插件仅在 CDN 配置页面的最底部提及。如果没有配置以下的配件,CDN 不会有任何的性能提升。

在 Performance (性能)菜单中打开Browser Cache (浏览器缓存)页面。在这个页面,确保检查启用 HTTP (gzip) 压缩,设置实体卷标(eTag),设置期满标题,设置 W3 总缓存标题和取消固定文件的 cookie,然后保存更改。

注: 事实证明,CDN 的是相当愚蠢的,它不会 GZIP 或在默认情况下设置期满标题。所存储的数据需要包括允许在 CDN 处理文件与正确标题的信息。

在 W3 总缓存配置 CDN 之后,刷新WP主页。 W3 总缓存将在通知区域显示下列留言:影响由 CDN 承载的文件浏览器缓存设置已被更改。要应用新设置…

Azure-CDN-WordPress-8

注意,你只能在同一时间导出一个媒体类型。

第 8 步 – 测试和排除故障

完成第7步所提及的导出之后,你可以使用自定义域访问缓存在你的 CDN 端点的内容。只要导航到你的 WP 网站地址,并拖动图片到地址栏。图像的 URL 应该指向 Azure CDN。

http://cdn.devslice.net/blog/wp-content/uploads/2014/12/windows-logo.png
http://[custom_CDN_domain]/[container]/[WordPress_content_path]

如果不成功,确保项目是Blob存储中所提供的。
http://[account_name].blob.core.windows.net/[container_name]/[WordPress_content_path]

其他资源

Post Navigation