如何使用DigitalOcean Spaces CDN加速WordPress资产交付

在本解决方案指南中,我们将演示如何将您的WordPress媒体库和其他静态资源卸载到DigitalOcean Spaces,并使用DigitalOcean Spaces CDN将这些资源提供给最终用户。

介绍

实施CDN或C ontent D everyvery N etwork,以提供您的WordPress网站的静态资产可以大大降低服务器的带宽使用率,并加快地理位置分散的用户的页面加载时间。 WordPress静态资源包括图像,CSS样式表和JavaScript文件。 利用分布在全球的边缘服务器系统, CDN可以通过其网络缓存站点静态资产的副本,从而缩短最终用户与此带宽密集型内容之间的距离。

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

在本解决方案指南中,我们将通过重写媒体库资产URL来扩展此过程。 这迫使用户的浏览器直接从DigitalOcean Spaces CDN下载静态资产,这是一组地理上分布的缓存服务器,专门用于提供静态内容。 我们将讨论如何启用CDN for Spaces,如何重写链接以从CDN提供WordPress资产,以及如何测试您的网站资产是否由CDN正确传递。

此外,我们将演示如何使用两个流行的付费WordPress插件实现媒体库卸载和链接重写: WP Offload MediaMedia 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插件,它可以识别您的站点使用的资产(CSS,JS,图像等)(例如通过WordPress主题),也可以从CDN中提供这些资产。
  • Media Library Folders Pro是另一个付费插件,可帮助您整理媒体库资源,并将其卸载到DigitalOcean Spaces。

出于测试目的,请确保在客户端(例如笔记本电脑)计算机上安装了现代网络浏览器,例如Google ChromeFirefox

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

启用S​​paces CDN

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

首先,按照如何启用Spaces CDN为您的Space 启用CDN

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

端点链接

这些端点应包含您的Space名称。 我们在本教程中使用wordpress-offload

请注意添加新的Edge端点。 此端点通过CDN路由对Spaces对象的请求,尽可能地从边缘缓存为它们提供服务。 记下此Edge端点,您将在以后的步骤中使用它来配置WordPress插件。

现在您已为您的Space启用了CDN,您已准备好开始配置资产卸载和链接重写插件。

如果您正在使用DigitalOcean Spaces Sync并继续如何在DigitalOcean Spaces上存储WordPress资产 ,请从以下部分开始阅读。 如果您没有使用Spaces Sync,请跳至WP Offload Media部分Media Library Folders Pro部分 ,具体取决于您选择使用的插件。

Spaces Sync插件

如果您想使用免费的开源DigitalOcean Spaces Sync和CDN Enabler插件从CDN的边缘缓存中提供文件,请按照本节中概述的步骤操作。

我们首先要确保正确配置我们的WordPress安装和Spaces Sync插件,并从DigitalOcean Spaces提供资源。

修改Spaces Sync插件配置

继续如何在DigitalOcean Spaces上存储WordPress资产 ,您的媒体库应该被卸载到您的DigitalOcean Space,并且您的Spaces Sync插件设置应如下所示:

仅限同步云

我们将进行一些小的更改,以确保我们的配置允许我们卸载WordPress主题和其他目录,超出wp-content/uploads Media Library文件夹。

首先,我们将修改文件的完整URL路径字段,以便媒体库文件从我们的Space的CDN提供,而不是从服务器本地提供。 此设置基本上会重写媒体库资源的链接,将其从WordPress服务器上本地托管的文件链接更改为DigitalOcean Spaces CDN上托管的文件链接。

回想一下您在Enabling Spaces CDN步骤中记下的Edge端点。

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

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

现在,在Spaces Sync插件设置页面中,将完整URL-path to files字段中的URL替换为Spaces CDN端点,然后替换为/wp-content/uploads

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

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

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

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

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

除非您要排除某些文件,否则Filemask可以使用*保持通配符。

没有必要仅在云端检查存储文件并删除...选项; 如果您希望在服务器成功上传到DigitalOcean Space后从服务器中删除媒体库资源,请选中此框。

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

最终空间同步设置

请务必使用与WordPress安装和Spaces配置对应的值替换上述值。

最后,点击Save Changes

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

现在,未来的 WordPress媒体库上传应该同步到您的DigitalOcean Space,并使用Spaces Content Delivery Network提供服务。

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

要验证并测试从Spaces CDN传送媒体库上载,请跳至测试CDN缓存

WordPress卸载媒体插件

DeliciousBrains WordPress卸载媒体插件允许您快速自动地将媒体库资源上传到DigitalOcean Spaces并重写这些资产的链接,以便您可以直接从Spaces或通过Spaces CDN传送它们。 此外, Assets Pull插件允许您快速卸载额外的WordPress资源,如JS,CSS和字体文件以及拉CDN 设置此插件超出了本指南的范围,但要了解更多信息,可以参考DeliciousBrains文档

我们首先为示例WordPress站点安装和配置WP Offload Media插件。

安装WP Offload Media插件

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

完成结账后,您将被带到购买后的网站,其中包含插件的下载链接和许可证密钥。 下载链接和许可证密钥也将通过您在购买插件时提供的电子邮件地址发送给您。

下载插件并导航到您的WordPress网站的管理界面( https:// your_site_url /wp-admin )。 必要时登录。 从这里,将鼠标悬停在插件上 ,然后单击“ 添加新”

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

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

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

您将进入以下屏幕:

WP卸载媒体配置

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

我们将在wp-config.php配置我们的Spaces访问密钥。

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

sudo nano wp-config.php

向下滚动到显示/* That's all, stop editing! Happy blogging. */ /* That's all, stop editing! Happy blogging. */ /* That's all, stop editing! Happy blogging. */ ,在插入包含Spaces Access Key对的以下行之前(要了解如何生成访问密钥对,请参阅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中定义访问键旁边的单选按钮,然后点击Save Changes

您应该被带到以下界面:

WP卸载铲斗选择

在此配置页面上,使用Region下拉列表为Space选择适当的区域,并在Bucket旁边输入Space名称(在本教程中,我们的Space称为wordpress-offload )。

然后,点击Save Bucket

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

WP卸载许可证

单击输入您的许可证密钥 ,然后在随后的页面上输入您的电子邮件收据或结帐页面中的许可证密钥,然后单击激活许可证

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

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

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

配置WP卸载媒体

现在您已将WP Offload Media与您的DigitalOcean Space相关联,您可以开始卸载资源并配置URL重写以从Spaces CDN传送媒体。

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

WP卸载主导航

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

如果您想更改资产URL以便直接从Spaces而不是WordPress服务器提供,请确保在重写媒体URL旁边将切换设置为On

要使用Spaces CDN提供媒体库资源,请确保已为您的Space 启用CDN (请参阅启用S​​paces CDN以了解如何)并记下Edge端点的URL。 点击自定义域(CNAME)旁边的切换,然后在出现的文本框中输入CDN Edge端点URL,不带https://前缀。

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

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

所以我们输入:

 wordpress-offload.nyc3.cdn.digitaloceanspaces.com

为了提高安全性,我们将强制HTTPS通过将切换设置为On来对媒体库资产(现在使用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

此URL表示已成功配置WP Offload Media以使用Spaces CDN传送媒体库资源。 如果路径不包含cdn ,请确保您已正确输入Edge端点URL而不是 Origin URL。

此时,WP Offload Media已设置为使用Spaces CDN提供媒体库。 将来上传到您的媒体库的任何内容都将自动复制到您的DigitalOcean Space并使用CDN提供。

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

卸载媒体库

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

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

WP卸载上传工具

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

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

WP卸载上传工具2

Hit Offload Remaining现在将剩余文件传输到您的DigitalOcean Space。

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

WP卸载成功

此时,您已将媒体库卸载到Space并使用Spaces CDN将文件传送给用户。

在任何时候,您都可以通过点击下载文件从Space下载文件回到WordPress服务器。

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

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

要卸载主题和JavaScript文件等其他WordPress资源,您可以使用Asset Pull插件或参阅本指南的“ 卸载其他资产”部分。

要验证并测试从Spaces CDN传送媒体库上载,请跳至测试CDN缓存

Media Library Folders Pro和CDN Enabler插件

MaxGalleria媒体库文件夹Pro 插件是一个方便的WordPress插件,允许您更好地组织您的WordPress媒体库资产。 此外,免费Spaces插件允许您将媒体库资源批量卸载到DigitalOcean Spaces,并将URL重写为这些资产,以直接从对象存储中提供这些资源。 然后,您可以启用Spaces CDN并使用Spaces CDN端点从分布式传送网络提供库资产。 要完成最后一步,您可以使用CDN Enabler插件重写媒体库资产的CDN端点URL。

我们将首先安装和配置Media Library Folders Pro(MLFP)插件以及MLFP Spaces插件。 然后,我们将安装并配置CDN Enabler插件,以使用Spaces CDN提供媒体库资源。

安装MLFP插件

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

下载档案后,登录到WordPress站点的管理界面( https:// your_site_url /wp-admin ),然后导航到插件 ,然后导航到左侧边栏中的“ 添加新项 ”。

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

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

然后,您应该会在左侧边栏中看到Media Library Folders Pro菜单项。 单击它以转到“媒体库文件夹”专业版界面。 涵盖插件的各种功能超出了本指南的范围,但要了解更多信息,您可以咨询MaxGalleria网站论坛

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

您的MLFP插件现已激活,您可以使用它来为WordPress网站组织现有或新的媒体库资源。

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

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

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

导航到顶部菜单栏中的“ 插件”页面,然后向下滚动到“ 媒体源” 在此处,单击“ 媒体库文件夹专业版S3和空格”选项。

在此页面中,向下滚动到“ 定价”部分,然后选择适合您的WordPress媒体库大小的选项(对于具有3000或更少图像的媒体库,插件是免费的)。

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

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

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

您可能会收到有关在wp-config.php文件中配置访问密钥的警告。 我们现在配置这些。

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

sudo nano wp-config.php

向下滚动到显示/* That's all, stop editing! Happy blogging. */ /* That's all, stop editing! Happy blogging. */ /* That's all, stop editing! Happy blogging. */ ,在插入包含Spaces Access Key对和插件配置选项的以下行之前(要了解如何生成访问密钥对,请参阅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管理界面,然后单击“ 媒体库文件夹专业版” ,然后单击侧栏中的“S3&Spaces设置”

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

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

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

MLFP Spaces插件配置

在此处,单击选择图像存储区和区域以选择您的DigitalOcean空间。 然后为您的Space选择正确的区域,然后点击Save Bucket Selection

您现在已成功将Spaces offload插件连接到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 Enabler插件以从Spaces CDN提供资产

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

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

要安装CDN Enabler,您可以使用WordPress管理界面中的Plugins菜单,也可以直接从命令行安装插件。 我们将在这里演示后一种程序。

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

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

请务必将上述路径替换为WordPress安装的路径。

从命令行,使用wp-cli接口安装插件:

wp plugin install cdn-enabler

现在,激活插件:

wp plugin activate cdn-enabler

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

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

CDN启动器设置

修改显示的字段如下:

  • CDN URL :输入Spaces Edge端点,您可以从Spaces Dashboard中找到该端点。 在本教程中,这是https:// wordpress-offload .nyc3.cdn.digitaloceanspaces.com
  • 包含的目录 :输入wp-content/uploads 我们将学习如何在Offload Additional Assets部分中提供其他wp-content目录。
  • 排除 :保留默认的.php
  • 相对路径 :选中此框
  • CDN HTTPS :选中复选框启用它
  • 将其余两个字段留空

然后,单击“ 保存更改”以保存这些设置并为WordPress站点启用它们。

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

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

要验证并测试从Spaces CDN传送媒体库上载,请跳至测试CDN缓存

卸载额外资产(可选)

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

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

如果您正在使用WP Offload Media插件 ,则可以使用Asset Pull插件使用pull CDN来提供这些文件。 安装和配置此插件超出了本指南的范围。 要了解更多信息,请参阅DeliciousBrains产品页面

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

如果您已在上一步中安装了CDN Enabler,请跳至第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

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

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

CDN启动器设置

此时您已成功安装CDN Enabler。 我们现在将我们的WordPress主题上传到Spaces。

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

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

本教程中WordPress安装使用的主题是二twentyseventeen ,这是twentyseventeen新的WordPress安装的默认主题。 您可以对任何其他主题或WordPress内容重复这些步骤。

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

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

cd /var/www/html/wp-content

从这里,使用s3cmdthemes目录上传到您的DigitalOcean Space。 请注意,此时您可以选择仅上传单个主题,但为了简单起见并从我们的服务器卸载尽可能多的内容,我们会将themes目录中的所有主题上传到我们的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/{}

在这里,我们指示findthemes/目录中搜索文件,并忽略.php.css文件。 然后,我们使用xargs -I{}迭代此列表,为每个文件执行s3cmd put ,并使用--acl-public Spaces中的文件权限设置为--acl-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/{}

同样,请务必使用您的Space名称替换上述命令中的wordpress-offload

现在我们已经上传了我们的主题,让我们验证它可以在我们的Space中找到正确的路径。 使用DigitalOcean云控制面板导航到您的Space。

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

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

导航回WordPress管理区域并单击“设置” ,然后单击 CDN启动器”

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

  • CDN URL :输入Spaces Edge端点,如第1步中所述 在本教程中,这是https:// wordpress-offload .nyc3.cdn.digitaloceanspaces.com
  • 包含的目录 :如果您没有使用MLFP插件,则应该是wp-content/themes 如果你是,这应该是wp-content/uploads,wp-content/themes
  • 排除 :保留默认的.php
  • 相对路径 :选中此框
  • CDN HTTPS :选中复选框启用它
  • 将其余两个字段留空

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

CDN启动器最终设置

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

此时,您已成功将WordPress网站的主题资源卸载到DigitalOcean Spaces,并将其提供给使用CDN的最终用户。 我们可以按照下面描述的步骤使用Chrome的DevTools确认这一点。

使用CDN Enabler插件,您可以为其他WordPress目录重复此过程,例如wp-includes ,甚至整个wp-content目录。

测试CDN缓存

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

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

首先,我们首先将样本图像上传到我们的媒体库,并验证它是否来自DigitalOcean Spaces CDN服务器。 您可以使用WordPress管理员Web界面或使用wp-cli命令行工具上载图像。 在本指南中,我们将使用wp-cli上传样本图像。

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

cd

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

curl https://www.howtoing.com/wp-content/uploads/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文件的目录的正确路径。

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

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。 Note that the exact path to your Media Library uploads in the Space will depend on the plugin you're using to offload your WordPress files.

Next, we will verify that this file is being served using the Spaces CDN, and not from the server running WordPress.

Step 2 — Inspect Asset URL

From the WordPress admin area ( https:// your_domain /wp-admin ), navigate to Pages in the left-hand side navigation menu.

We will create a sample page containing our uploaded image to determine where it's being served from. You can also run this test by adding the image to an existing page on your WordPress site.

From the Pages screen, click into Sample Page , or any existing page. You can alternatively create a new page.

In the page editor, click on Add Media , and select the DigitalOcean logo (or other image you used to test this procedure).

An Attachment Details pane should appear on the right-hand side of your screen. From this pane, add the image to the page by clicking on Insert into page .

Now, back in the page editor, click on either Publish (if you created a new sample page) or Update (if you added the image to an existing page) in the Publish box on the right-hand side of your screen.

Now that the page has successfully been updated to contain the image, navigate to it by clicking on the Permalink under the page title. You'll be brought to this page in your web browser.

For the purposes of this tutorial, the following steps will assume that you're using Google Chrome, but you can use most modern web browsers to run a similar test.

From the rendered page preview in your browser, right click on the image and click on Inspect :

Inspect Menu

A DevTools window should pop up, highlighting the img asset in the page's HTML:

DevTools Output

You should see the CDN endpoint for your DigitalOcean Space in this URL (in this tutorial, our Spaces CDN endpoint is https:// wordpress-offload.nyc3 .cdn.digitaloceanspaces.com ), indicating that the image asset is being served from the DigitalOcean Spaces CDN edge cache.

This confirms that your Media Library uploads are being synced to your DigitalOcean Space and served using the Spaces CDN.

Step 3 — Inspect Asset Response Headers

From the DevTools window, we'll run one final test. Click on Network in the toolbar at the top of the window.

Once in the blank Network window, follow the displayed instructions to reload the page.

The page assets should populate in the window. Locate your test image in the list of page assets:

Chrome DevTools Asset List

Once you've located your test image, click into it to open an additional information pane. Within this pane, click on Headers to show the response headers for this asset:

Response Headers

You should see the Cache-Control HTTP header, which is a CDN response header. This confirms that this image was served from the Spaces CDN.

Step 4 — Inspect URLs for Theme Assets (Optional)

If you offloaded your wp-themes (or other) directory as described in Offload Additional Assets , you should perform the following brief check to verify that your theme's assets are being served from the Spaces CDN.

Navigate to your WordPress site in Google Chrome, and right-click anywhere in the page. In the menu that appears, click on Inspect .

You'll once again be brought to the Chrome DevTools interface.

Chrome DevTools Interface

From here, click into Sources .

In the left-hand pane, you should see a list of your WordPress site's assets. Scroll down to your CDN endpoint, and expand the list by clicking the small arrow next to the endpoint name:

DevTools Site Asset List

Observe that your WordPress theme's header image, JavaScript, and CSS stylesheet are now being served from the Spaces CDN.

结论

In this tutorial, we've shown how to offload static content from your WordPress server to DigitalOcean Spaces, and serve this content using the Spaces CDN. In most cases, this should reduce bandwidth on your host infrastructure and speed up page loads for end users, especially those located further away geographically from your WordPress server.

We demonstrated how to offload and serve both Media Library and themes assets using the Spaces CDN, but these steps can be extended to further unload the entire wp-content directory, as well as wp-includes .

Implementing a CDN to deliver static assets is just one way to optimize your WordPress installation. Other plugins like W3 Total Cache can further speed up page loads and improve the SEO of your site. A helpful tool to measure your page load speed and improve it is Google's PageSpeed Insights . Another helpful tool that provides a waterfall breakdown of request and response times as well as suggested optimizations is Pingdom .

To learn more about Content Delivery Networks and how they work, consult Using a CDN to Speed Up Static Content Delivery .