介绍

实施CDN或专项交付网络来交付WordPress网站的静态资产可以极大地减少服务器的带宽使用率,并加快地理位置分散的用户的页面加载时间。 WordPress静态资产包括图像,CSS样式表和JavaScript文件。利用遍布全球的边缘服务器系统,CDN可以在其网络上缓存站点静态资产的副本,以缩短最终用户与带宽密集型内容之间的距离。

在先前的解决方案指南“如何在DigitalOcean Spaces上存储WordPress资产”中,我们介绍了将WordPress网站的媒体库(存储图像和其他网站内容的媒体库)卸载到DigitalOcean Spaces的一种高度冗余的对象存储服务。我们使用DigitalOcean Spaces Sync插件执行此操作,该插件会自动将WordPress上传的内容同步到您的Space,从而使您可以从服务器中删除这些文件并释放磁盘空间。

在本解决方案指南中,我们将通过启用Spaces CDN并重写媒体库资产URL来扩展此过程。这迫使用户的浏览器直接从CDN下载静态资产,CDN是在地理上分散的一组缓存服务器,这些缓存服务器针对传递静态内容进行了优化。我们将介绍如何为空间启用CDN,如何从CDN重写链接以为WordPress资产提供服务,以及最后如何测试CDN是否正确交付了您网站的资产。

我们将演示如何使用免费的开源Spaces Sync插件实现媒体库卸载和链接重写。我们还将介绍如何使用两个流行的付费WordPress插件:WP Offload Media和Media Library Folders Pro。您应该选择最适合您的生产需求的插件。

先决条件

在开始本教程之前,您应该在LAMP或LEMP堆栈之上具有正在运行的WordPress安装。您还应该在WordPress服务器上安装WP-CLI,您可以按照以下说明学习设置。

要卸载媒体库,您需要一个DigitalOcean Space和一个访问密钥对:

  • 要了解如何创建Space,请查阅Spaces产品文档。
  • 要了解如何使用开源s3cmd工具创建访问密钥对并将文件上传到您的Space,请参阅DigitalOcean产品文档站点上的s3cmd 2.x Setup。

您可以使用一些WordPress插件来卸载WordPress资产:

  • DigitalOcean Spaces Sync是一个免费的开源WordPress插件,用于将您的媒体库卸载到DigitalOcean Space。您可以在如何在DigitalOcean Spaces上存储WordPress资产中学习如何执行此操作。
  • WP Offload Media是一个付费插件,可以将文件从WordPress媒体库复制到DigitalOcean Spaces,并重写URL以从CDN提供文件。借助Assets Pull插件,它可以识别您的网站(例如WordPress主题)使用的资产(CSS,JS,图像等),还可以从CDN提供这些资产。
  • Media Library Folders Pro是另一个付费插件,可帮助您组织媒体库资产,并将其卸载到DigitalOcean Spaces。

强烈建议对Spaces CDN使用自定义域。通过使卸载的资产网址与Wordpress网站的网址相似,可以大大改善您网站的搜索引擎优化(SEO)。要将自定义域与Spaces CDN一起使用,需要确保首先将域添加到DigitalOcean帐户:

  • 要了解如何执行此操作,请参阅如何添加域。

为了进行测试,请确保在客户端(例如笔记本电脑)计算机上安装了现代网络浏览器,例如Google Chrome或Firefox。

一旦运行了WordPress安装并创建了DigitalOcean Space,就可以为您的Space启用CDN,并从本指南开始。

启用空间CDN

我们将通过为DigitalOcean Space启用CDN来开始本指南。这不会影响现有对象的可用性。启用CDN后,您空间中的对象将被“推出”到整个内容交付网络的边缘缓存中,并且将为您提供新的CDN终结点URL。要了解有关CDN如何工作的更多信息,请参阅《使用CDN加快静态内容交付》。

首先,按照如何启用空间CDN来为您的空间启用CDN。

如果您想将自定义域与Spaces CDN一起使用(推荐),请遵循如何使用子域自定义Spaces CDN端点来创建子域CNAME记录和适当的SSL证书。记下您将与Spaces CDN一起使用的子域,因为在配置WordPress资产卸载插件时我们将需要使用该子域。

导航回到您的空间并重新加载页面。您应该在您的空间名称下看到一个新的Endpoints链接:

这些端点包含您的空间名称。在本教程中,我们将使用wordpress-offload。

Notice the addition of the new Edge endpoint. This endpoint routes requests for Spaces objects through the CDN, serving them from the edge cache as much as possible. Note down this Edge endpoint, which you’ll use to configure your WordPress plugin in future steps. If you created a subdomain for Spaces CDN, this subdomain is an alias for the Edge endpoint.

现在,您已经为Space启用了CDN,就可以开始配置资产卸载和链接重写插件了。

如果您使用的是DigitalOcean Spaces Sync,然后继续阅读如何在DigitalOcean Spaces上存储WordPress资产,请从以下部分开始阅读。如果您不使用Spaces Sync,则根据您选择使用的插件,跳到WP Offload Media部分或Media Library Folders Pro部分。

Spaces同步插件

如果您想使用免费的开源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 Media Library文件夹。

首先,我们将修改“文件的完整URL路径”字段,以使媒体库文件是通过Space的CDN提供的,而不是从服务器本地提供的。此设置实质上是重写到媒体库资产的链接,将它们从WordPress服务器本地托管的文件链接更改为DigitalOcean Spaces CDN托管的文件链接。

回顾您在“启用空间CDN”步骤中记下的Edge端点。如果您将自定义子域与Spaces CDN一起使用,则将使用该子域而不是Edge端点。

在本教程中,Space的名称是wordpress-offload,Space的CDN端点是:

https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com

现在,在“ Spaces Sync插件设置”页面中,用Spaces CDN端点替换“文件的完整URL路径”字段中的URL,然后替换为/ wp-content / uploads。

在本教程中,使用上述Spaces CDN端点,完整的URL将是:

https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com/wp-content/uploads

如果您使用的是自定义子域,请说https://assets.example.com,完整的URL如下所示:

https://assets.example.com/wp-content/uploads

接下来,对于本地路径字段,输入WordPress服务器上wp-content / uploads目录的完整路径。在本教程中,服务器上WordPress安装的路径为/ var / www / html /,因此上载的完整路径为/ var / www / html / wp-content / uploads。

注意:如果您要继续学习如何在DigitalOcean Spaces上存储WordPress资产,本指南将对Space中的文件路径进行一些修改,以使您可以有选择地卸载主题和其他wp内容资产。您应该在执行此操作之前清除空间(确保保存文件的副本),或者使用s3cmd将现有文件传输到正确的wp-content / uploads Space目录中。

在“存储前缀”字段中,我们将输入/ wp-content / uploads,这将确保我们构建正确的wp-content目录层次结构,以便可以将其他WordPress目录卸载到该空间。

除非您想排除某些文件,否则文件掩码可以使用*进行通配。

无需检查“仅将文件存储在云中并删除...”选项;仅在成功将媒体库资产成功上传到DigitalOcean Space后从服务器中删除它们时,才选中此框。

您的最终设置应如下所示:

确保将上述值替换为与WordPress安装和Spaces配置相对应的值。

最后,点击保存更改。

您应该在屏幕顶部看到一个“保存的设置”框,确认Spaces Sync插件设置已成功更新。

现在,将来的WordPress媒体库上传的内容应同步到您的DigitalOcean Space,并使用Spaces内容传递网络进行投放。

在此步骤中,我们没有卸载WordPress主题或其他wp-content资产。要了解如何将这些资产转移到Spaces并使用Spaces CDN进行服务,请跳至卸载其他资产。

要验证并测试您的媒体库上传是从Spaces CDN传递的,请跳至Test CDN Caching。

WordPress卸载媒体插件

DeliciousBrains WordPress卸载媒体插件使您可以快速自动地将媒体库资产上传到DigitalOcean Spaces,并重写这些资产的链接,以便您可以直接从Spaces或通过Spaces CDN交付它们。此外,Assets Pull附加组件使您可以结合Pull CDN来快速卸载其他WordPress资产(如JS,CSS和字体文件)。设置此插件不在本指南的范围内,但要了解更多信息,请查阅DeliciousBrains文档。

我们将从为示例WordPress网站安装和配置WP Offload Media插件开始。

安装WP卸载媒体插件

首先,您必须在DeliciousBrains插件站点上购买该插件的副本。根据媒体库中资产的数量以及站点的支持和功能要求来选择合适的版本。

After going through checkout, you’ll be brought to a post-purchase site with a download link for the plugin and a license key. The download link and license key will also be sent to you at the email address you provided when purchasing the plugin.

下载该插件并导航到WordPress网站的管理界面(https:// your_site_url / wp-admin)。如有必要,请登录。在这里,将鼠标悬停在Plugins上,然后单击Add New。

单击“上传插件”,然后在页面顶部,选择“文件”,然后选择刚下载的zip存档。

单击“立即安装”,然后单击“激活插件”。您将被带到WordPress的插件管理界面。

在此处,点击插件名称下的设置,导航至WP Offload Media插件的设置页面。

您将被带到以下屏幕:

单击DigitalOcean Spaces旁边的单选按钮。现在,系统会提示您要么在wp-config.php文件中配置Spaces Access Key(推荐),要么直接在网络界面中(后者会将您的Spaces凭据存储在WordPress数据库中)。

我们将在wp-config.php中配置我们的Spaces Access Key。

通过命令行登录到WordPress服务器,然后导航到WordPress根目录(在本教程中为/ var / www / html)。在这里,用您喜欢的编辑器打开wp-config.php:

  • sudo nano wp-config.php

向下滚动到显示/ *的行,那就停止编辑!快乐的博客。 * /,并在其中插入包含您的“空间访问密钥对”的以下行(要了解如何生成访问密钥对,请查阅Spaces产品文档):

wp-config.php
. . . 
define( 'AS3CF_SETTINGS', serialize( array(
    'provider' => 'do',
    'access-key-id' => 'your_access_key_here',
    'secret-access-key' => 'your_secret_key_here',
) ) );

/* That's all, stop editing! Happy blogging. */
. . .

完成编辑后,保存并关闭文件。所做的更改将立即生效。

返回WordPress Offload Media插件管理界面,选择wp-config.php中定义访问密钥旁边的单选按钮,然后点击保存更改。

您应该进入以下界面:

在此配置页面上,使用“区域”下拉列表为您的空间选择适当的区域,然后在“存储桶”旁边输入您的空间名称(在本教程中,我们的空间称为wordpress-offload)。

然后,点击保存桶。

您将被带到WP Offload Media主配置页面。在顶部,您应该看到以下警告框:

单击输入您的许可证密钥,然后在下一页上输入在电子邮件收据或结帐页面中找到的许可证密钥,然后单击“激活许可证”。

如果您正确输入了许可证密钥,则应该看到许可证已成功激活。

现在,通过单击窗口顶部的媒体库,导航回到WP Offload Media主配置页面。

至此,WP Offload Media已成功配置为与DigitalOcean Space一起使用。现在,您可以开始卸载资产并使用Spaces CDN交付它们。

配置WP卸载媒体

现在,您已经将WP Offload Media与DigitalOcean Space链接了,您可以开始卸载资产并配置URL重写以从Spaces CDN交付媒体。

您应该在WP Offload Media主配置页面上看到以下配置选项:

这些默认值在大多数情况下都可以正常工作。如果您的媒体库位于WordPress目录内的非标准路径中,请在“路径”选项下的文本框中输入路径。

如果您想更改资产URL,以便直接从Spaces(而非WordPress服务器)提供资产URL,请确保将切换设置为“重写媒体URL”旁边的“开”。

要使用Spaces CDN交付媒体库资产,请确保已为您的Space启用CDN(请参阅启用Spaces CDN了解如何),并记下Edge端点的URL。点击“自定义域(CNAME)”旁边的开关,然后在出现的文本框中输入CDN Edge终结点URL,不带https://前缀。

在本指南中,Spaces CDN端点为:

https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com

所以我们在这里输入:

 wordpress-offload.nyc3.cdn.digitaloceanspaces.com

如果您将自定义子域与Spaces CDN一起使用,请在此处输入该子域:

your_subdomain.example.com

为了提高安全性,我们将切换开关设置为,以强制HTTPS对媒体库资产(现在已使用CDN进行服务)的请求。

您可以选择清除从WordPress服务器转移到Spaces的文件,以释放磁盘空间。为此,请单击“从服务器删除文件”旁边的“打开”。

完成WP Offload Media的配置后,点击页面底部的Save Changes保存设置。

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交付Media Library资产。如果路径不包含cdn,请确保您正确输入了Edge终结点URL,而不是原始URL(在使用自定义子域时不适用)。

此时,已设置WP Offload Media以使用Spaces CDN交付您的媒体库。将来上传到媒体库的所有内容都将自动复制到DigitalOcean Space并使用CDN进行投放。

现在,您可以使用内置的上传工具批量卸载媒体库中的现有资产。

卸载媒体库

我们将使用插件的内置“上传工具”来卸载WordPress媒体库中的现有文件。

在WP Offload Media主配置页面的右侧,您应该看到以下框:

单击立即卸载以将您的媒体库文件上传到DigitalOcean Space。

如果上传过程被中断,则该框将更改为显示以下内容:

点击立即卸载当前剩余部分,将剩余文件传输到DigitalOcean Space。

从媒体库中卸载其余项目后,您应该会看到以下新框:

至此,您已经将媒体库卸载到Space中,并正在使用Spaces CDN将文件交付给用户。

您可以随时点击“下载文件”,将文件从Space下载回WordPress服务器。

您还可以通过点击删除文件来清除DigitalOcean空间。在执行此操作之前,请确保首先从Spaces将文件下载回WordPress服务器。

在这一步中,我们学习了如何将WordPress媒体库卸载到DigitalOcean Spaces并使用WP Offload Media插件重写这些库资产的链接。

要卸载诸如主题和JavaScript文件之类的其他WordPress资产,您可以使用Asset Pull附加组件,或查阅本指南的“卸载其他资产”部分。

要验证并测试您的媒体库上传是从Spaces CDN传递的,请跳至Testing CDN Caching。

媒体库文件夹Pro和CDN启动器插件

MaxGalleria Media Library Folders Pro插件是一个方便的WordPress插件,可让您更好地组织WordPress Media Library资产。此外,免费的Spaces插件允许您将媒体库资产批量卸载到DigitalOcean Spaces,并重写这些资产的URL以直接从对象存储中为其提供服务。然后,您可以启用Spaces CDN并使用Spaces CDN端点从分布式交付网络为您的图书馆资产提供服务。要完成最后一步,您可以使用CDN启动器插件来重写媒体库资产的CDN端点URL。

我们将从安装和配置Media Library Folders Pro(MLFP)插件以及MLFP Spaces插件开始。然后,我们将安装和配置CDN启动器插件,以使用Spaces CDN交付媒体库资产。

安装MLFP插件

购买MLFP插件后,您应该已经收到一封电子邮件,其中包含您的MaxGalleria帐户凭据以及插件下载链接。单击插件下载链接,以将MLFP插件zip存档下载到本地计算机。

下载归档文件后,登录到WordPress网站的管理界面(https:// your_site_url / wp-admin),然后导航至插件,然后在左侧边栏中添加新内容。

在“添加插件”页面上,单击“上传插件”,然后选择您刚刚下载的zip存档。

单击立即安装以完成插件安装,然后从“安装插件”屏幕中,单击“激活插件”以激活MLFP。

然后,您应该会在左侧边栏中看到Media Library Folders Pro菜单项。单击它转到Media Library Folders Pro界面。涵盖该插件的各种功能超出了本指南的范围,但是要了解更多信息,可以访问MaxGalleria网站和论坛。

现在,我们将激活插件。单击“ MLFP”菜单项下的“设置”,然后在“许可证密钥”文本框旁边输入您的许可证密钥。您可以在购买插件时发送给您的电子邮件中找到MLFP许可证密钥。点击保存更改,然后激活许可证。接下来,点击更新设置。

您的MLFP插件现在处于活动状态,您可以使用它来为WordPress网站组织现有或新的媒体库资产。

现在,我们将安装并配置Spaces插件,以便您可以从DigitalOcean Spaces卸载并提供这些资产。

安装MLFP Spaces插件插件和卸载媒体库

要安装Spaces插件,请登录您的MaxGalleria帐户。您可以在购买MLFP插件时发送给您的电子邮件中找到帐户凭据。

导航至顶部菜单栏中的“加载项”页面,然后向下滚动至“媒体源”。从这里,单击进入媒体库文件夹Pro S3和空格选项。

在此页面上,向下滚动至“定价”部分,然后选择适合您的WordPress媒体库大小的选项(对于3000张以下图片的媒体库,该插件是免费的)。

完成插件的“购买”之后,您可以导航回到您的帐户页面(通过单击顶部菜单栏中的“帐户”链接),现在可以从中使用插件插件。

单击Media Library Folders Pro S3映像,然后应开始下载插件。

下载完成后,导航回您的WordPress管理界面,并通过单击上传插件使用与上述相同的方法安装下载的插件。再次点击激活插件激活插件。

您可能会收到有关在wp-config.php文件中配置访问密钥的警告。现在,我们将对其进行配置。

使用控制台或SSH登录到WordPress服务器,然后导航到WordPress根目录(在本教程中为/ var / www / html)。在这里,用您喜欢的编辑器打开wp-config.php:

  • sudo nano wp-config.php

向下滚动到显示/ *的行,那就停止编辑!快乐的博客。 * /,并在其之前插入以下行,其中包含您的Spaces访问密钥对和插件配置选项(要了解如何生成访问密钥对,请查阅Spaces产品文档):

wp-config.php
. . . 
define('MF_AWS_ACCESS_KEY_ID', 'your_access_key_here');
define( 'MF_AWS_SECRET_ACCESS_KEY', 'your_secret_key_here');
define('MF_CLOUD_TYPE', 'do')

/* That's all, stop editing! Happy blogging. */
. . .

完成编辑后,保存并关闭文件。

现在,从Cloud Control Panel导航到您的DigitalOcean Space,并通过单击New Folder创建一个名为wp-content的文件夹。

从这里,导航回到WordPress管理界面,然后单击Media Library Folders Pro,然后单击侧栏中的S3&Spaces设置。

有关配置访问密钥的警告标语现在应该已经消失。如果仍然存在,则应仔细检查wp-config.php文件是否存在拼写错误或语法错误。

在“许可证密钥”文本框中,输入购买Spaces插件后通过电子邮件发送给您的许可证密钥。请注意,此许可证密钥与MLFP许可证密钥不同。点击保存更改,然后激活许可证。

激活后,您将看到以下配置窗格:

在此处,单击“选择图像桶和区域”以选择您的DigitalOcean空间。然后为您的空间选择正确的区域,然后点击保存存储区选择。

您现在已成功将Spaces卸载插件连接到DigitalOcean Space。您可以开始卸载WordPress媒体库资产。

使用云服务器上的文件复选框可让您指定将从何处提供媒体库资产。如果选中此框,则将从DigitalOcean Spaces提供资产,并且将相应地重写图像和其他媒体库对象的URL。如果您打算使用Spaces CDN来提供媒体库资产,请不要选中此框,因为该插件将使用Spaces Origin端点而不是CDN Edge端点。我们将在以后的步骤中配置CDN链接重写。

将本地媒体库资产成功上传到DigitalOcean Spaces后,请单击“从本地服务器删除文件”框以将其删除。

从Spaces将文件批量下载到WordPress服务器时,应使用“从云服务器中删除单个下载的文件”复选框。如果选中,则在成功下载到WordPress服务器后,这些文件将从Spaces中删除。我们现在可以忽略此选项。

由于我们正在配置要与Spaces CDN一起使用的插件,因此请不要选中“使用云服务器上的文件”复选框,然后单击“将媒体库复制到云服务器”以将您站点的WordPress媒体库同步到DigitalOcean Space。

您应该看到一个进度框,然后完成上传。表示媒体库同步已成功结束。

导航到DigitalOcean Space,以确认您的媒体库文件已复制到您的Space。它们应该在您在此步骤前面创建的wp-content目录的uploads子目录中可用。

文件在Space中可用后,就可以继续配置Spaces CDN。

安装CDN启动器插件以从Spaces CDN交付资产

要使用Spaces CDN来提供现在已卸载的文件,请首先确保已为Space启用CDN。

为您的空间启用CDN后,您现在可以安装和配置CDN Enabler WordPress插件以重写指向您的媒体库资产的链接。插件将重写这些资产的链接,以便从Spaces CDN端点提供这些资产。

要安装CDN启动器,您可以从WordPress管理界面使用“插件”菜单,也可以直接从命令行安装插件。我们将在此处演示后面的过程。

首先,登录到您的WordPress服务器。然后,导航到您的插件目录:

  • cd /var/www/html/wp-content/plugins

确保将上述路径替换为WordPress安装路径。

在命令行中,使用wp-cli界面安装插件:

  • wp plugin install cdn-enabler

现在,激活插件:

  • wp plugin activate cdn-enabler

您还可以使用内置插件安装程序安装和激活CDN启动器插件。

返回WordPress管理员区域的“设置”下,您应该看到一个指向CDN启动器设置的新链接。单击进入CDN启动器。

您应该看到以下设置屏幕:

修改显示的字段,如下所示:

  • CDN URL:输入Spaces Edge端点,您可以从Spaces仪表板找到它。在本教程中,这是https:// wordpress-offload .nyc3.cdn.digitaloceanspaces.com。如果您将自定义子域与Spaces CDN一起使用,请在此处输入该子域。例如,https:// asset .example.com。
  • 包含的目录:输入wp-content / uploads。我们将在“卸载附加资产”部分中学习如何为其他wp-content目录提供服务。
  • 排除项:保留默认的.php
  • Relative Path : Leave the box checked
  • CDN HTTPS:通过选中复选框启用它
  • 将其余两个字段留空

然后,点击保存更改以保存这些设置并为您的WordPress网站启用它们。

至此,您已成功将WordPress网站的媒体库卸载到DigitalOcean Spaces,并使用CDN将其提供给最终用户。

在此步骤中,我们没有卸载WordPress主题或其他wp-content资产。要了解如何将这些资产转移到Spaces并使用Spaces CDN为它们提供服务,请跳过卸载其他资产。

要验证并测试您的媒体库上传是从Spaces CDN传递的,请跳至Testing CDN Caching。

Offloading Additional Assets (Optional)

在本指南的前面各节中,我们学习了如何将网站的WordPress媒体库卸载到Spaces并使用Spaces CDN来提供这些文件。在本部分中,我们将介绍卸载和提供其他WordPress资源,例如主题,JavaScript文件和字体。

这些静态资产大多数都位于wp-content目录(包含wp-themes)内。要卸载和重写该目录的URL,我们将使用CDN Enabler(由KeyCDN开发的开源插件)。

如果您使用的是WP Offload Media插件,则可以使用Asset Pull附加组件通过Pull CDN提供这些文件。安装和配置此插件不在本指南的范围之内。要了解更多信息,请查阅DeliciousBrains产品页面。

首先,我们将安装CDN启动器。然后,我们将WordPress主题复制到Spaces,最后配置CDN Enabler以使用Spaces CDN交付这些主题。

如果您已在上一步中安装了CDN启动器,请跳至步骤2。

第1步-安装CDN启动器

要安装CDN启动器,请登录到WordPress服务器。然后,导航到您的插件目录:

  • cd /var/www/html/wp-content/plugins

确保将上述路径替换为WordPress安装路径。

在命令行中,使用wp-cli界面安装插件:

  • wp plugin install cdn-enabler

现在,激活插件:

  • wp plugin activate cdn-enabler

您还可以使用内置插件安装程序安装和激活CDN启动器插件。

返回WordPress管理员区域的“设置”下,您应该看到一个指向CDN启动器设置的新链接。单击进入CDN启动器。

您应该看到以下设置屏幕:

至此,您已经成功安装了CDN启动器。现在,我们将WordPress主题上传到Spaces。

第2步–将静态WordPress资产上传到空间

在本教程中,为了演示基本的插件配置,我们将仅提供wp-content / themes,这是WordPress目录,其中包含WordPress主题的PHP,JavaScript,HTML和图像文件。您可以选择将此过程扩展到其他WordPress目录,例如wp-includes,甚至整个wp-content目录。

本教程中WordPress安装所使用的主题是27,这是撰写本文时全新WordPress安装的默认主题。您可以对任何其他主题或WordPress内容重复这些步骤。

首先,我们将使用s3cmd将主题上传到DigitalOcean Space。如果尚未配置s3cmd,请查阅DigitalOcean Spaces产品文档。

导航到WordPress安装的wp-content目录:

  • cd /var/www/html/wp-content

在这里,使用s3cmd将主题目录上载到DigitalOcean Space。请注意,此时您可以选择仅上载一个主题,但是为了简单起见并从我们的服务器上卸载尽可能多的内容,我们会将主题目录中的所有主题上载到我们的空间。

我们将使用find生成非PHP(因此可缓存)文件的列表,然后将其通过管道传输到s3cmd以上传到Spaces。在第一个命令中,我们还将排除CSS样式表,因为在上传它们时需要设置text / css MIME类型。

  • find themes/ -type f -not \( -name '*.php' -or -name '*.css' \) | xargs -I{} s3cmd put --acl-public {} s3://wordpress-offload/wp-content/{}

请确保将上述命令中的wordpress-offload替换为您的Space名称。

在这里,我们指示find在themes /目录中搜索文件,并忽略.php和.css文件。然后,我们使用xargs -I {}遍历此列表,对每个文件执行s3cmd put,并使用--acl-public将文件在Spaces中的权限设置为public。

接下来,我们将对CSS样式表执行相同的操作,添加--mime-type =“ text / css”标志以为Spaces上的样式表设置text / css MIME类型。这样可以确保Spaces使用正确的Content-Type:text / css HTTP标头提供主题的CSS文件:

  • find themes/ -type f -name '*.css' | xargs -I{} s3cmd put --acl-public --mime-type="text/css" {} s3://wordpress-offload/wp-content/{}

同样,请确保将上述命令中的wordpress-offload替换为您的Space名称。

现在,我们已经上传了主题,让我们确认可以在我们的Space中的正确路径找到它。使用DigitalOcean Cloud Control Panel导航到您的空间。

输入wp-content目录,然后输入主题目录。您应该在此处看到主题的目录。如果不是这样,请验证您的s3cmd配置,然后将主题重新上传到您的Space。

步骤3 —配置CDN启动器以重写资产链接

现在我们的主题已经存在于我们的空间中,并且我们已经设置了正确的元数据,我们可以开始使用CDN Enabler和DigitalOcean Spaces CDN来提供其文件了。

浏览回到WordPress管理区域,然后依次单击“设置”和“ CDN启动器”。

在这里,修改显示的字段,如下所示:

  • CDN URL:输入Spaces Edge端点,如步骤1所示。在本教程中,这是https:// wordpress-offload .nyc3.cdn.digitaloceanspaces.com。如果您将自定义子域与Spaces CDN一起使用,请在此处输入该子域。例如,https:// asset .example.com。
  • 包含的目录:如果您不使用MLFP插件,则应为wp-content / themes。如果您是,则应为wp-content / uploads,wp-content / themes
  • 排除项:保留默认的.php
  • 相对路径:保持选中框
  • CDN HTTPS:通过选中复选框启用它
  • 将其余两个字段留空

您的最终设置应如下所示:

点击“保存更改”以保存这些设置并为您的WordPress网站启用它们。

至此,您已成功将WordPress网站的主题资产卸载到DigitalOcean Spaces,并使用CDN将其提供给最终用户。我们可以按照以下步骤,使用Chrome的DevTools对此进行确认。

使用CDN启动器插件,您可以对其他WordPress目录(例如wp-includes,甚至整个wp-content目录)重复此过程。

测试CDN缓存

在本部分中,我们将演示如何确定如何使用Google Chrome的DevTools从何处(例如,主机服务器或CDN)向您的WordPress资产提供服务。

步骤1 —将样本图像添加到媒体库以测试同步

首先,我们将首先将示例图片上传到我们的媒体库,并验证其是否已从DigitalOcean Spaces CDN服务器提供。您可以使用WordPress Admin网络界面或wp-cli命令行工具上传图像。在本指南中,我们将使用wp-cli上传示例图片。

使用命令行登录到WordPress服务器,然后导航到您配置的非root用户的主目录。在本教程中,我们将使用sammy用户。

  • cd

在此处,使用curl将DigitalOcean徽标下载到您的Droplet(如果您已经有要测试的图像,请跳过此步骤):

  • curl https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png > do_logo.png

现在,使用wp-cli将图像导入您的媒体库:

  • wp media import --path=/var/www/html/ /home/sammy/do_logo.png

确保将/ var / www / html替换为包含WordPress文件的目录的正确路径。

您可能会看到一些警告,但输出应以下列结尾:

Output
Imported file '/home/sammy/do_logo.png' as attachment ID 10. Success: Imported 1 of 1 items.

这表明我们的测试图像已使用您喜欢的卸载插件成功复制到WordPress媒体库,并已上传到我们的DigitalOcean Space。

导航到您的DigitalOcean Space确认:

这表明您的卸载插件运行正常,并自动将WordPress上传同步到您的DigitalOcean Space。请注意,您在Space中上传媒体库的确切路径取决于您用来卸载WordPress文件的插件。

接下来,我们将验证使用Spaces CDN而不是运行WordPress的服务器提供此文件。

第2步-检查资产URL

在WordPress管理区域(https:// your_domain / wp-admin)中,导航到左侧导航菜单中的Pages。

我们将创建一个示例页面,其中包含我们上传的图片,以确定从何处进行投放。您还可以通过将图像添加到WordPress网站上的现有页面来运行此测试。

在“页面”屏幕中,单击进入“样本页面”或任何现有页面。您也可以创建一个新页面。

在页面编辑器中,单击“添加媒体”,然后选择DigitalOcean徽标(或用于测试此过程的其他图像)。

“附件详细信息”窗格应出现在屏幕的右侧。在此窗格中,通过单击插入页面将图像添加到页面。

现在,回到页面编辑器中,在屏幕右侧的“发布”框中单击“发布”(如果创建了新的示例页面)或“更新”(如果将图像添加到现有页面)。

现在,页面已成功更新为包含图像,请单击页面标题下的“永久链接”导航到该图像。您将被带到网络浏览器中的此页面。

就本教程而言,以下步骤将假定您使用的是Google Chrome,但是您可以使用大多数现代的网络浏览器来运行类似的测试。

在浏览器中呈现的页面预览中,右键单击图像,然后单击检查:

应弹出一个DevTools窗口,突出显示页面HTML中的img资产:

您应该在该URL中看到DigitalOcean Space的CDN端点(在本教程中,我们的Spaces CDN端点为https:// wordpress-offload.nyc3 .cdn.digitaloceanspaces.com),这表明图像资产是通过DigitalOcean Spaces CDN边缘缓存。如果您将自定义子域与Spaces CDN一起使用,则资产网址应使用此自定义子域。

这确认您的媒体库上载已同步到DigitalOcean Space并已使用Spaces CDN进行了投放。

步骤3 —检查资产响应标题

在DevTools窗口中,我们将进行一项最终测试。在窗口顶部的工具栏中单击“网络”。

进入空白的“网络”窗口后,请按照显示的说明重新加载页面。

页面资产应填充在窗口中。在页面资产列表中找到测试图像:

找到测试图像后,单击它以打开其他信息窗格。在此窗格中,单击“标题”以显示此资产的响应标题:

您应该看到Cache-Control HTTP标头,它是CDN响应标头。这确认此图像是从Spaces CDN提供的。

步骤4 —检查主题资产的URL(可选)

如果按照卸载其他资产中的说明卸载了wp-themes(或其他)目录,则应执行以下简短检查,以确认Spaces CDN正在提供主题的资产。

在Google Chrome浏览器中导航到您的WordPress网站,然后右键单击页面中的任何位置。在出现的菜单中,单击检查。

您将再次被带到Chrome DevTools界面。

在这里,点击Sources。

在左侧窗格中,您应该看到WordPress网站资产的列表。向下滚动到您的CDN端点(或自定义子域),然后通过单击端点名称旁边的小箭头来展开列表:

观察到您的WordPress主题标题图片,JavaScript和CSS样式表现在已从Spaces CDN提供。

结论

在本教程中,我们展示了如何将WordPress服务器上的静态内容卸载到DigitalOcean Spaces,以及如何使用Spaces CDN来提供这些内容。在大多数情况下,这应该减少主机基础结构上的带宽并加快最终用户的页面加载速度,尤其是那些地理位置离WordPress服务器较远的用户。

我们演示了如何使用Spaces CDN卸载并提供媒体库和主题资产,但是可以扩展这些步骤以进一步卸载整个wp-content目录以及wp-includes。

实施CDN交付静态资产只是优化WordPress安装的一种方法。 W3 Total Cache等其他插件可以进一步加快页面加载速度,并改善您网站的SEO。 Google的PageSpeed Insights是衡量网页加载速度并提高网页加载速度的有用工具。 Pingdom是另一个有用的工具,它可以对请求和响应时间进行瀑布式分解,并提供建议的优化方法。

要了解有关内容交付网络及其工作方式的更多信息,请参阅《使用CDN加快静态内容交付》。