介绍
实施一个 CDN,或一个 Cent Delivery Nnetwork,以提供您的WordPress网站的静态资产可以大大降低您的服务器的带宽使用,以及加速地理分布的用户的页面加载时间。WordPress静态资产包括图像,CSS风格表和JavaScript文件。利用世界各地分布的边缘服务器系统,CDN(https://andsky.com/tech/tutorials/using-a-cdn-to-speed-up-static-content-delivery)在其网络上缓存您的网站的静态资产的副本,以减少最终用户和这种带宽密集的内容之间的距离。
在之前的解决方案指南中,我们涵盖了将WordPress网站的媒体库(图像和其他网站内容被存储在那里)卸载到DigitalOcean Spaces,这是一个非常冗余的对象存储服务,我们使用了DigitalOcean Spaces Sync插件(https://wordpress.org/plugins/do-spaces-sync/),它自动同步WordPress上传到您的空间,允许您从服务器中删除这些文件并释放磁盘空间。
在此 解决方案指南中,我们将通过启用Spaces CDN和重写媒体库资产URL来扩展此过程,这迫使用户的浏览器直接从CDN下载静态资产,这是一个地理分布式的缓存服务器集,用于提供静态内容。
我们将展示如何使用免费和开源的Spaces Sync插件实现媒体图书馆脱载和链接重写,我们还将介绍如何使用两种流行的付费WordPress插件: **WP脱载媒体**和 Media Library Folders Pro。
前提条件
在您开始本教程之前,您应该在 LAMP 或 LEMP 堆栈上运行一个 WordPress 安装程序,您还应该在您的 WordPress 服务器上安装 WP-CLI,您可以通过遵循 这些说明来学习如何设置。
要卸载您的媒体库,您需要一个数字海洋空间和一个访问密钥对:
- 要了解如何创建一个空间,请参阅 Spaces 产品文档。
- 要了解如何创建一个访问密钥对,并使用开源
s3cmd工具上传文件到您的空间,请参阅 s3cmd 2.x 设置,也可以在 DigitalOcean 产品文档网站上。
有几个WordPress插件,您可以使用来卸载您的WordPress资产:
- **DigitalOcean Spaces Sync**是免费和开源的WordPress插件,可将您的媒体图书馆下载到DigitalOcean Space. 您可以在 How To Store WordPress Assets on DigitalOcean Spaces中学习如何做到这一点。
- **WP Offload Media**是从您的WordPress媒体图书馆复制到DigitalOcean Spaces的付费插件,并重写URL以便从CDN服务这些文件。 借助Assets Pull addon,它可以识别您网站使用的资产(CSS,JS,图像等)(例如WordPress主题),并从CDN提供这些服务。
- **[Media Library Fers
使用 Spaces CDN 的 自定义域是强烈建议的,这将大大提高您的网站的搜索引擎优化 (SEO) 通过保持您的卸载资产 URL 与您的 Wordpress 网站的 URL 相似。
- 要了解如何做到这一点,请参阅 如何添加域名。
为了测试,请确保您在客户端(例如笔记本电脑)计算机上安装了现代化的 Web 浏览器,如 Google Chrome或 Firefox。
一旦你有一个运行的WordPress安装,并创建了一个DigitalOcean空间,你已经准备好为你的空间启用CDN,并开始这个指南。
启用 CDN 空间
我们将通过为您的 DigitalOcean Space 启用 CDN 来开始本指南,这不会影响现有对象的可用性. 启用 CDN 时,您的 Space 中的对象将被推出到内容交付网络中的边缘缓存,并为您提供一个新的 CDN 终端 URL。
首先,請按照 如何啟用空間 CDN來啟用您的空間的 CDN。
如果您想使用 Spaces CDN 的自定义域名(推荐),请按照 How to Customize the Spaces CDN Endpoint with a Subdomain来创建子域 CNAME 记录和适当的 SSL 证书。
返回您的空间并重新加载页面,您应该在您的空间名称下看到一个新的 Endpoints链接:
这些端点包含你的空间名称. 我们在本教程中使用wordpress-offload。
请注意新增的 Edge终端点. 此终端点通过 CDN 路由 Spaces 对象的请求,尽可能地从边缘缓存中提供服务。 请注意此 Edge终端点,您将在未来步骤中使用它来配置您的 WordPress 插件。
现在你已经启用了你的空间的CDN,你已经准备好开始配置你的资产卸载和链接重写插件。
如果您正在使用DigitalOcean Spaces Sync,并从 如何在DigitalOcean Spaces上存储WordPress资产开始阅读,请从下面的部分开始阅读. 如果您不使用Spaces Sync,请转到 WP脱载媒体部分或 媒体图书馆文件夹Pro部分,取决于您选择使用的插件。
空间同步插件
如果您想使用免费和开源的 DigitalOcean Spaces Sync 和 CDN Enabler 插件来从 CDN 的边缘缓存中服务您的文件,请遵循本节所述的步骤。
我们将首先确保我们的WordPress安装和Spaces Sync插件正确配置,并服务于DigitalOcean Spaces的资产。
更改空间 同步插件配置
从 如何在DigitalOcean Spaces上存储WordPress资产开始,您的媒体库应该被卸载到您的DigitalOcean Space,您的Spaces Sync插件设置应该如下:
如果您尚未完成 如何在DigitalOcean Spaces上存储WordPress资产教程,您仍然可以通过使用[内置插件安装程序]安装Spaces Sync插件来遵循本指南。
我们将做出一些小的更改,以确保我们的配置允许我们卸载WordPress主题和其他目录,超越wp-content/uploads媒体库文件夹。
首先,我们将更改 ** 完整 URL 路径到文件 ** 字段,以便媒体库文件从我们的空间的 CDN 服务,而不是从服务器本地服务。
请记住在 启用空间CDN步骤中注明的 Edge端点. 如果您正在使用与Spaces CDN的自定义子域,则将使用该子域而不是边缘端点。
在本教程中,Space的名称是wordpress-offload,Space的CDN终端是:
1https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
现在,在 Spaces Sync 插件设置页面中,用 Spaces CDN 终端代替 ** 完整 URL 路径到文件 ** 字段中的 URL,然后是 `/wp-content/uploads。
在本教程中,使用上述 Spaces CDN 端点,完整的 URL 将是:
1https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com/wp-content/uploads
如果您正在使用自定义子域,请说 https://assets.example.com,完整的URL将如下:
1https://assets.example.com/wp-content/uploads
接下来,对于 本地路径字段,输入您的WordPress服务器上的wp-content/uploads目录的完整路径. 在本教程中,在服务器上安装WordPress的路径是/var/www/html/,因此到uploads的完整路径将是/var/www/html/wp-content/uploads。
<$>[注]
注: 如果您正在继续从 如何在DigitalOcean Spaces上存储WordPress资产),本指南将稍微修改您的空间中的文件路径,以便您可选地卸载主题和其他wp-content资产。
在存储前缀字段中,我们将输入/wp-content/uploads,这将确保我们构建正确的wp-content目录等级,以便我们可以将其他WordPress目录下载到这个空间。
Filemask可以保留*,除非您想排除某些文件。
您不需要只在云中检查 Store 文件并删除... 选项;如果您希望在成功上传到您的 DigitalOcean Space 后从您的服务器中删除媒体库资产,只需检查此框。
你的最终设置应该像这样的东西:
请确保将上述值替换为与您的 WordPress 安装和 Spaces 配置相应的值。
最后,点击保存更改。
您应该在屏幕顶部看到一个 设置保存框,确认Spaces Sync插件的设置已成功更新。
未来 WordPress 媒体库上传现在应该同步到您的 DigitalOcean Space,并使用空间内容交付网络提供服务。
在此步骤中,我们已经下载了 WordPress 主题或其他wp-content资产。 要了解如何将这些资产转移到 Spaces 并使用 Spaces CDN 服务它们,请跳过 下载额外资产。
若要验证和测试您的媒体库上传来自 Spaces CDN 的内容,请跳过 测试 CDN 缓存。
WordPress Offload 媒体插件
DeliciousBrains WordPress Offload Media 插件允许您快速和自动上传您的媒体库资产到DigitalOcean Spaces,并重写这些资产的链接,以便您可以直接从Spaces或通过Spaces CDN提供它们。
我们将通过安装和配置 WP Offload Media 插件为样本 WordPress 网站开始。
安装 WP Offload 媒体插件
首先,您必须在DeliciousBrains 插件网站购买插件的副本)。
經過支票後,您將被帶到購買後的網站,提供插件的下載鏈接和許可證密钥,下載鏈接和許可證密钥也會被發送給您在購買插件時提供的電子郵件地址。
下载插件并导航到您的WordPress网站的管理界面(https://your_site_url/wp-admin)。如果需要,登录。从这里,跳过 插件并点击 新增。
点击 上传插件和页面顶部, 选择文件,然后选择您刚刚下载的 zip 档案。
点击 安装现在,然后点击 激活插件.您将被带到WordPress的插件管理界面。
从这里,导航到 WP Offload Media 插件的设置页面,在插件名称下单击 Settings。
您将被带到以下屏幕:
您现在将被要求在wp-config.php文件中配置您的Spaces访问密钥(推荐),或直接在Web接口中(后者将存储您的Spaces凭证在WordPress数据库中)。
我们将配置我们的空间访问密钥在wp-config.php。
通过命令行登录您的WordPress服务器,并导航到您的WordPress根目录(在本教程中,这是‘/var/www/html’)。
1sudo nano wp-config.php
向下滚动到/* 这就是全部,停止编辑!快乐的博客。 */,然后在插入包含您的空间访问密钥对的下列行之前(要了解如何生成一个访问密钥对,请参阅 空间产品文档):
1[label wp-config.php]
2. . .
3define( 'AS3CF_SETTINGS', serialize( array(
4 'provider' => 'do',
5 'access-key-id' => 'your_access_key_here',
6 'secret-access-key' => 'your_secret_key_here',
7) ) );
8
9/* That's all, stop editing! Happy blogging. */
10. . .
完成编辑后,保存并关闭文件. 更改将立即生效。
在 WordPress Offload Media 插件管理界面中,选择在 wp-config.php 中的定义访问密钥旁边的无线电按钮,然后点击保存更改。
您应该被带到以下界面:
在此配置页面上,使用 区域下载选择您的空间的适当区域,并在 Bucket旁边输入您的空间名称(在本教程中,我们的空间被称为wordpress-offload)。
然后点击Save Bucket。
您将被带到主 WP Offload Media 配置页面. 顶部您应该看到以下警告框:
点击 输入您的许可证密钥,然后在下一页上输入您在电子邮件收件箱或支票页面中发现的许可证密钥,然后点击 激活许可证。
如果您正确输入了许可证密钥,您应该看到 ** 许可证已成功激活**。
现在,返回主 WP Offload Media 配置页面,点击窗口顶部的 Media Library。
此时,WP Offload Media已成功配置为与您的DigitalOcean Space一起使用,您现在可以开始卸载资产并使用Spaces CDN交付资产。
配置 WP Offload 媒体
现在,您已将 WP Offload Media 链接到您的 DigitalOcean Space,您可以开始卸载资产并配置 URL 重写以从 Spaces CDN 传输媒体。
您应该在主 WP Offload Media 配置页面上看到以下配置选项:
如果您的媒体库存在于您的WordPress目录中的非标准路径,请在 Path选项下输入文本框中的路径。
如果您想更改资产 URL 以便直接从 Spaces 服务,而不是您的 WordPress 服务器,请确保转换设置为 ** 在** 旁边 ** 重写媒体 URL **。
若要使用 Spaces CDN 提供媒体库资产,请确保您已启用了 Your Space 的 CDN(参见 Enable Spaces CDN以了解如何)并注明了 Edge 端点的 URL。
在本指南中,Spaces CDN 终端是:
1https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
这里我们进入:
1wordpress-offload.nyc3.cdn.digitaloceanspaces.com
如果您正在使用 Spaces CDN 的自定义子域,请在这里输入该子域:
1your_subdomain.example.com
为了提高安全性,我们将强制HTTPS对媒体库资产的请求(现在使用CDN提供服务),将转换设置为 On。
您可以选择从您的 WordPress 服务器清除已卸载到 Spaces 的文件,以释放磁盘空间。
完成配置 WP Offload Media 后,点击页面底部的 ** 保存更改** 来保存设置。
URL预览框应该显示包含您的 Spaces CDN 终端的 URL。
https://wordpress‐offload.nyc3.cdn.digitaloceanspaces.com/wp‐content/uploads/2018/09/21211354/photo.jpg
如果您正在使用 Spaces CDN 的自定义子域,则 URL 预览应该包含该子域。
此 URL 表示 WP Offload Media 已成功配置以使用 Spaces CDN 提供媒体库资产. 如果路径不包含 cdn,请确保您正确输入 Edge 终端 URL 和 not Origin URL (使用自定义子域时不适用)。
在此时,WP Offload Media已设置为使用Spaces CDN提供您的媒体图书馆.任何未来**上传到您的媒体图书馆将自动复制到您的DigitalOcean空间并使用CDN服务。
您现在可以使用内置的上传工具将现有资产卸载到您的媒体库中。
媒体图书馆下载
我们将使用插件的内置上传工具,在我们的WordPress媒体库中卸载现有文件。
在主 WP Offload Media 配置页面的右侧,您应该看到以下框:
点击 下载现在 将您的媒体库文件上传到您的数字海洋空间。
如果上传过程被中断,该框将更改以显示如下:
点击 下载 Remaining Now 将剩余的文件转移到您的 DigitalOcean 空间。
一旦您从媒体库中卸载了剩余的项目,您应该看到以下新框:
此时,您已将媒体库卸载到您的空间,并将文件交付给使用 Spaces CDN 的用户。
在任何时候,您可以从您的空间下载文件回到您的WordPress服务器,点击 下载文件。
您也可以通过点击 删除文件来清除您的DigitalOcean空间。
在此步骤中,我们学会了如何将我们的WordPress媒体库下载到DigitalOcean空间,并使用WP下载媒体插件重写这些图书馆资产的链接。
要卸载其他 WordPress 资产,如主题和 JavaScript 文件,您可以使用 Asset Pull addon或参阅本指南的 Offload Additional Assets部分。
若要验证和测试您的媒体库上传来自 Spaces CDN 的内容,请跳过 测试 CDN 缓存。
媒体图书馆文件夹 Pro 和 CDN Enabler 插件
MaxGalleria Media Library Folders Pro plugin是一个方便的WordPress插件,允许您更好地组织您的WordPress媒体图书馆资产。此外,免费的Spaces addon(https://maxgalleria.com/downloads/wordpress-amazon-s3/)允许您大批量下载您的媒体图书馆资产到DigitalOcean Spaces,并重写这些资产的URL,直接从对象存储中服务它们。您可以启用Spaces CDN,并使用Spaces CDN端点从分布式交付网络中服务您的图书馆资产。 要完成这一最后一步,您可以使用CDN Enabler(https://wordpress.org/plugins/cdn-enabler/)插件重写您的媒体图书馆资产的CDN端点URL。
我们将首先安装和配置媒体图书馆文件夹 Pro (MLFP) 插件,以及 MLFP Spaces 附件,然后我们将安装和配置 CDN Enabler 插件以使用 Spaces CDN 提供媒体图书馆资产。
安装 MLFP 插件
购买 MLFP 插件后,您应该收到一封包含您的 MaxGalleria 帐户凭证的电子邮件,以及一个插件下载链接。
一旦你下载了档案,登录你的WordPress网站的管理界面(https://your_site_url/wp-admin),并导航到 插件,然后在左侧侧栏中添加新 **。
从添加插件页面上,单击上传插件,然后选择您刚刚下载的 zip 档案。
点击安装现在完成插件安装,并从安装插件屏幕上,点击激活插件激活MLFP。
然后,你应该看到一个 Media Library Folders Pro菜单项目出现在左侧的侧面栏中。 点击它来访问媒体图书馆 Folders Pro接口。 涵盖插件的各种功能超出了本指南的范围,但要了解更多,您可以参阅 MaxGalleria网站和 论坛。
现在我们将激活插件. 在 MLFP 菜单项下单击 Settings,然后在 License Key 文本框旁边输入您的许可证密钥. 您可以在购买插件时发送给您的电子邮件中找到您的 MLFP 许可证密钥。
您的 MLFP 插件现在是活跃的,您可以使用它来为您的 WordPress 网站组织现有或新的媒体库资产。
我们现在将安装和配置 Spaces 插件,以便您可以从 DigitalOcean Spaces 卸载和服务这些资产。
安装 MLFP Spaces 附加插件和卸载媒体库
要安装 Spaces Addon,请登录到您的 MaxGalleria 帐户。您可以在购买 MLFP 插件时发送给您的电子邮件中找到您的帐户凭证。
在顶部菜单栏中导航到 ** Addons** 页面,然后向下滚动到 Media Sources. 从这里,单击 Media Library Folders Pro S3 and Spaces 选项。
从此页面,向下滚动到价格部分,选择适合您的WordPress媒体库的大小的选项(对于3000张图像或更少的媒体库,插件是免费的)。
完成添加剂购买后,您可以返回您的帐户页面(点击顶部菜单栏中的 帐户链接),从那里添加剂插件现在可用。
点击Media Library Folders Pro S3图像并开始下载插件。
一旦下载完成,返回您的WordPress管理界面,并使用上面的相同方法安装下载的插件,单击 上传插件。
您可能会收到关于在您的wp-config.php文件中配置访问密钥的警告。
使用控制台或SSH登录您的WordPress服务器,并导航到您的WordPress根目录(在本教程中,这是‘/var/www/html’)。
1sudo nano wp-config.php
向下滚动到/* 这就是全部,停止编辑!快乐的博客。 */,然后在插入包含您的空间访问密钥对和插件配置选项的下列行之前(要了解如何生成一个访问密钥对,请参阅 空间产品文档):
1[label wp-config.php]
2. . .
3define('MF_AWS_ACCESS_KEY_ID', 'your_access_key_here');
4define( 'MF_AWS_SECRET_ACCESS_KEY', 'your_secret_key_here');
5define('MF_CLOUD_TYPE', 'do')
6
7/* That's all, stop editing! Happy blogging. */
8. . .
完成编辑后,保存并关闭文件。
现在,从 云控制面板导航到您的数字海洋空间,并通过点击 新文件夹创建一个名为wp-content的文件夹。
从这里,返回WordPress管理界面,然后点击 Media Library Folders Pro,然后点击 S3 & Spaces Settings在侧面栏。
关于配置访问密钥的警告标签现在应该消失了. 如果它仍然存在,您应该对您的 wp-config.php 文件进行双重检查,以发现任何打字或语法错误。
在 ** 许可证密钥** 文本框中,输入在购买 Spaces 插件后发送给您的许可证密钥。 请注意,此许可证密钥与 MLFP 许可证密钥不同。
一旦激活,你应该看到下面的配置面板:
从这里,单击 选择图像桶和区域来选择您的数字海洋空间,然后选择您的空间的正确区域,然后点击 保存桶选择。
您现在已经成功将 Spaces 卸载插件连接到您的 DigitalOcean Space. 您可以开始卸载您的 WordPress 媒体库资产。
云服务器上的使用文件检查框允许您指定媒体库资产将从哪里提供服务。如果您检查这个框,资产将从DigitalOcean Spaces中提供服务,图像和其他媒体库对象的URL将相应地重新编写。如果您计划使用Spaces CDN来服务您的媒体库资产,请不要**检查这个框,因为插件将使用Spaces Origin终端,而不是CDN Edge终端。
点击从本地服务器中删除文件框,在成功上传到 DigitalOcean Spaces 后,删除本地媒体库资产。
删除从云服务器中下载的个别文件**检查框应用于从Spaces到您的WordPress服务器的大量下载文件时。如果检查,这些文件将在成功下载到您的WordPress服务器后从Spaces删除。
由于我们正在配置插件用于 Spaces CDN,请将云服务器上的 ** 使用文件** 框放开,然后按 ** 复制媒体库到云服务器** 来同步您的网站的 WordPress 媒体库到您的 DigitalOcean 空间。
您应该看到一个进度框,然后出现 上传完成. 表示媒体库同步已成功完成。
导航到您的 DigitalOcean Space 以确认您的媒体库文件已被复制到您的空间. 它们应该在您在此步骤中创建的wp-content目录的上传子目录中可用。
一旦您的文件在您的空间中可用,您就可以继续配置 Spaces CDN。
安装 CDN 启用器插件从 Spaces CDN 传输资产
若要使用 Spaces CDN 來服務現在已卸載的檔案,請先 確保您已啟用 CDN為您的空間。
一旦您的空间启用了 CDN,您现在可以安装和配置 CDN Enabler WordPress 插件来重写链接到您的媒体库资产。
要安装 CDN Enabler,您可以使用 WordPress 管理界面中的 ** Plugins ** 菜单,或者直接从命令行安装插件。
首先,登录您的WordPress服务器,然后导航到您的插件目录:
1cd /var/www/html/wp-content/plugins
请确保将上面的路径替换为您的WordPress安装路径。
从命令行,使用wp-cli界面来安装插件:
1wp plugin install cdn-enabler
现在,启用 Plugin:
1wp plugin activate cdn-enabler
您还可以使用 嵌入式插件安装程序安装和激活 CDN Enabler 插件。
回到 WordPress 管理區域,在「設定」中,你應該看到一個新的連結到「CDN 啟用器」的設定。
你应该看到下面的设置屏幕:
更改显示的字段如下:
- CDN URL**: 输入 Spaces Edge 端点,您可以从 Spaces 仪表板中找到。 在本教程中,这是https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
. 如果您使用了 Spaces CDN 的自定义子域,请在这里输入该子域。 例如,https://assets.example.com`. - Included Directory: 输入
wp-content/uploads. 我们将学习如何在 Offload Additional Assets 部分中提供其他 `wp-content' 目录。 - ** 排除: 留下默认的
php。 - ** Relative Path**: 留下
然后,点击 ** 保存更改** 来保存这些设置,并为您的 WordPress 网站启用它们。
此时,您已成功将您的WordPress网站的媒体库卸载到DigitalOcean Spaces,并将其服务于使用CDN的最终用户。
在此步骤中,我们已经下载了WordPress主题或其他wp-content资产。 要了解如何将这些资产转移到Spaces并使用Spaces CDN服务它们,请跳过 下载额外资产。
若要验证和测试您的媒体库上传来自 Spaces CDN 的内容,请跳过 测试 CDN 缓存。
卸载额外资产(可选)
在本指南的以前部分中,我们学到了如何将我们的网站的WordPress媒体库下载到空间,并使用Spaces CDN服务这些文件,在本节中,我们将涵盖下载和服务额外的WordPress资产,如主题,JavaScript文件和字体。
大多数这些静态资产都生活在wp-content目录中(其中包含wp-themes),我们会使用 CDN Enabler,一个由KeyCDN开发的开源插件来卸载和重写此目录的URL。
如果您正在使用 WP Offload Media 插件,您可以使用 Asset Pull addon使用 pull CDN 服务这些文件。
首先,我们将安装CDN Enabler,然后将我们的WordPress主题复制到Spaces,并最终配置CDN Enabler以使用Spaces CDN提供这些主题。
如果您在前一个步骤中已经安装了 CDN Enabler,请跳过步骤 2。
步骤 1 – 安装 CDN 启用器
要安装 CDN Enabler,请登录您的WordPress服务器,然后导航到您的插件目录:
1cd /var/www/html/wp-content/plugins
请确保将上面的路径替换为您的WordPress安装路径。
从命令行,使用wp-cli界面来安装插件:
1wp plugin install cdn-enabler
现在,启用 Plugin:
1wp plugin activate cdn-enabler
您还可以使用 嵌入式插件安装程序安装和激活 CDN Enabler 插件。
回到 WordPress 管理區域,在「設定」中,你應該看到一個新的連結到「CDN 啟用器」的設定。
你应该看到下面的设置屏幕:
在此时刻,你已经成功安装了CDN Enabler,我们现在将我们的WordPress主题上传到Spaces。
步骤 2 — 将静态 WordPress 资产上传到空间
在本教程中,为了展示一个基本的插件配置,我们只会服务wp-content/themes,包含WordPress主题的WP、JavaScript、HTML和图像文件的WordPress目录,您可以选择将此过程扩展到其他WordPress目录,如wp-includes,甚至整个wp-content目录。
在本教程中使用的WordPress安装主题是‘twentyseventeen’,在写作时是新 WordPress安装的默认主题,您可以对任何其他主题或WordPress内容重复这些步骤。
首先,我们将使用s3cmd上传我们的主题到我们的DigitalOcean Space. 如果您尚未配置s3cmd,请参阅DigitalOcean (空间产品文档)(https://www.digitalocean.com/docs/spaces/resources/s3cmd/)。
导航到您的WordPress安装的wp-content目录:
1cd /var/www/html/wp-content
从这里上传主题目录到您的DigitalOcean Space使用s3cmd。请注意,此时您可以选择仅上传一个主题,但为了简化和从我们的服务器下载尽可能多的内容,我们将上传主题目录中的所有主题到我们的空间。
我们将使用找到来构建非PHP(因此可缓存)文件的列表,然后我们将其管道到s3cmd上传到Spaces。
1find themes/ -type f -not \( -name '*.php' -or -name '*.css' \) | xargs -I{} s3cmd put --acl-public {} s3://wordpress-offload/wp-content/{}
请确保在上面的命令中代替wordpress-offload你的空间名称。
在这里,我们指示Find搜索themes/目录中的文件,并忽略.php和.css文件,然后使用xargs -I{}重复这个列表,为每个文件执行s3cmd put,并在Spaces设置文件的权限为public使用--acl-public。
接下来,我们将对 CSS 风格表做同样的事情,添加 --mime-type="text/css" 旗帜,为 Spaces 上的风格表设置 text/cssMIME 类型,从而确保 Spaces 使用正确的Content-Type: text/css` HTTP 标题来服务您的主题的 CSS 文件:
1find themes/ -type f -name '*.css' | xargs -I{} s3cmd put --acl-public --mime-type="text/css" {} s3://wordpress-offload/wp-content/{}
再次,请确保在上面的命令中用您的空间名称取代wordpress-offload。
现在我们已经上传了我们的主题,让我们检查它是否可以在我们的空间中找到正确的路径. 使用 DigitalOcean Cloud Control Panel导航到您的空间。
输入wp-content目录,然后输入themes目录. 您应该在这里看到您的主题目录. 如果您没有,请验证您的s3cmd配置并重新上传您的主题到您的空间。
步骤 3 — 配置 CDN 启用器重写资产链接
现在我们的主题生活在我们的空间中,我们已经设置了正确的元数据,我们可以使用CDN Enabler和DigitalOcean Spaces CDN开始服务它的文件。
返回 WordPress 管理區域,然後點一下 ** 設定**,然後點一下 ** CDN 啟用器**。
在这里,如下修改显示的字段:
- CDN URL: 输入 Spaces Edge的终端点,如在 Step 1中所做的。 在本教程中,这是https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
. 如果您使用了 Spaces CDN 的自定义子域,请在这里输入该子域。 例如,https://assets.example.com`. - Included Directory: 如果您使用 MLFP 插件,这应该是
wp-content/themes. 如果您使用,这应该是wp-content/uploads,wp-content/themes - ** Exclusions**: 留下默认的
php. - Relative Path: 留
你的最终设置应该像这样的东西:
点击保存更改以保存这些设置,并为您的WordPress网站启用它们。
在此时刻,您已成功将您的WordPress网站的主题资产卸载到DigitalOcean Spaces,并将其服务于使用CDN的最终用户,我们可以使用Chrome的DevTools来确认这一点,按照下文描述的程序(https://andsky.com/tech/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#test-cdn-caching)。
使用CDN Enabler插件,您可以对其他WordPress目录重复此过程,例如wp-includes,甚至整个wp-content目录。
测试 CDN 缓存
在本节中,我们将展示如何使用Google Chrome的DevTools来确定您的WordPress资产从哪里提供服务(例如您的主机服务器或CDN)。
步骤 1 — 将样本图像添加到媒体库以测试同步
首先,我们将首先上传一个样本图像到我们的媒体库,并验证它是从DigitalOcean Spaces CDN服务器提供的。您可以使用WordPress Admin Web接口上传一个图像,或者使用wp-cli命令行工具。
使用命令行登录您的WordPress服务器,并导航到您配置的非根用户的首页目录。
1cd
从这里,使用弯曲下载DigitalOcean标志到您的Droplet(如果您已经有想要测试的图像,请跳过此步骤):
1curl https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png > do_logo.png
现在,使用wp-cli将图像导入您的媒体库:
1wp media import --path=/var/www/html/ /home/sammy/do_logo.png
请确保用包含您的WordPress文件的目录的正确路径代替/var/www/html。
您可能会看到一些警告,但输出应该以以下方式结束:
1[secondary_label Output]
2Imported file '/home/sammy/do_logo.png' as attachment ID 10.
3Success: Imported 1 of 1 items.
这表明我们的测试图像已成功复制到WordPress媒体图书馆,并上传到我们的DigitalOcean空间,使用您偏好的卸载插件。
导航到您的 DigitalOcean Space 以确认:
这表明您的下载插件按预期运作,并自动同步 WordPress 上传到您的 DigitalOcean Space. 请注意,您在空间中上传的媒体库的确切路径将取决于您使用的插件来下载您的 WordPress 文件。
接下来,我们将验证此文件正在使用Spaces CDN服务,而不是来自运行WordPress的服务器。
步骤 2 – 检查资产 URL
从WordPress的管理区域(https://your_domain/wp-admin),在左侧导航菜单中导航到 ** 页面**。
我们将创建一个包含我们上传的图像的样本页面,以确定它是从哪里提供的,您也可以通过将图像添加到您的WordPress网站上的现有页面来运行这个测试。
从页面屏幕上,点击示例页面或任何现有页面,您可以替代创建新页面。
在页面编辑器中,单击添加媒体并选择DigitalOcean标志(或您用来测试此过程的其他图像)。
您的屏幕右侧应该显示一个 ** 附件详细信息 ** 窗格. 从此窗格中,通过点击 ** 插入页面**来添加图像到页面。
现在,回到页面编辑器中,单击 发布(如果您创建了新样本页)或 更新(如果您将图像添加到现有页面)在屏幕右侧的 发布框中。
现在,该页面已成功更新以包含图像,通过在页面标题下单击 Permalink来导航它。
对于本教程的目的,下列步骤将假定您正在使用Google Chrome,但您可以使用大多数现代网页浏览器运行类似的测试。
在您的浏览器中的渲染页面预览中,右键单击图像,然后单击 Inspect:
DevTools 窗口应该出现,突出了页面的 HTML 中的img资产:
您应该在这个URL中看到您的DigitalOcean Space的CDN终端(在本教程中,我们的Spaces CDN终端是https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com`),表示图像资产正在从DigitalOcean Spaces CDN边缘缓存中提供服务。如果您正在使用与Spaces CDN的自定义子域,资产URL应该使用此自定义子域。
这确认您的媒体库上传正在同步到您的数字海洋空间并使用空间CDN服务。
步骤 3 – 检查资产响应头
从 DevTools 窗口,我们将运行一个最终测试. 点击窗口顶部的工具栏中的 网络。
一旦进入空白的网络窗口,请按照显示的指示重新加载页面。
页面资产应填充在窗口中. 在页面资产列表中找到您的测试图像:
一旦您找到测试图像,请点击它以打开一个额外的信息窗格. 在此窗格中,点击 Headers 以显示此资产的响应标题:
您应该看到Cache-Control HTTP 标题,该标题是 CDN 响应标题,这证实该图像是从 Spaces CDN 提供的。
步骤 4 — 检查主题资产的URL(可选)
如果您卸载了wp-themes(或其他)目录,如在 Offload Additional Assets中所述,您应该执行以下简短检查,以确认您的主题的资产正在从Spaces CDN中提供服务。
在 Google Chrome 中导航到您的 WordPress 站点,并按一下页面中的任何地方。
您将再次被带到Chrome DevTools界面。
从这里,点击来源。
在左侧的窗格中,您应该看到您的WordPress网站的资产列表. 滚动到您的CDN终端(或自定义子域),并通过点击终端名称旁边的小箭头来扩展列表:
请注意,您的WordPress主题的标题图像、JavaScript和CSS风格表现在正在从Spaces CDN中提供服务。
结论
在本教程中,我们展示了如何将静态内容从您的WordPress服务器下载到DigitalOcean Spaces,并使用Spaces CDN服务此内容,在大多数情况下,这应该减少您的主机基础设施的带宽,并加快最终用户的页面负载,特别是那些从您的WordPress服务器更远的地理位置。
我们展示了如何使用Spaces CDN下载和服务媒体库和主题资产,但这些步骤可以扩展到进一步下载整个wp-content目录以及wp-includes。
实施一个CDN来提供静态资产只是优化您的WordPress安装的一种方式。 其他插件如W3 Total Cache(https://en-ca.wordpress.org/plugins/w3-total-cache/)可以进一步加速页面加载并改善您的网站的SEO。 衡量页面加载速度并提高它的有用的工具是谷歌的PageSpeed Insights(https://developers.google.com/speed/pagespeed/insights/)。
有关内容交付网络及其工作方式的更多信息,请参阅 使用 CDN 来加速静态内容交付。