DigitalOceanSpacesCDNを使用してWordPressアセット配信を高速化する方法

投稿日: 2019-11-08 2022-10-20
タグ: CDN, DigitalOcean, Object Storage, Solutions, wordpress

序章

CDN、またはCオンテントD配信Nネットワークを実装して、WordPressサイトの静的アセットを配信すると、サーバーの帯域幅使用量を大幅に削減し、速度を上げることができます地理的に分散したユーザーのページ読み込み時間。 WordPressの静的アセットには、画像、CSSスタイルシート、JavaScriptファイルが含まれます。 CDN は、世界中に分散しているエッジサーバーのシステムを活用して、サイトの静的アセットのコピーをネットワーク全体にキャッシュし、エンドユーザーとこの帯域幅を大量に消費するコンテンツとの距離を縮めます。

以前のソリューションガイドWordPressアセットをDigitalOceanSpacesに保存する方法では、WordPressサイトのメディアライブラリ（画像やその他のサイトコンテンツが保存される場所）を、冗長性の高いオブジェクトストレージサービスであるDigitalOceanSpacesにオフロードする方法について説明しました。これは、 DigitalOcean Spaces Syncプラグインを使用して行いました。このプラグインは、WordPressのアップロードをSpaceに自動的に同期し、サーバーからこれらのファイルを削除してディスクスペースを解放できるようにします。

このSolutionsガイドでは、Spaces CDNを有効にし、メディアライブラリアセットのURLを書き換えることで、この手順を拡張します。これにより、ユーザーのブラウザは、静的コンテンツの配信用に最適化された地理的に分散したキャッシュサーバーのセットであるCDNから静的アセットを直接ダウンロードする必要があります。 SpacesでCDNを有効にする方法、CDNからWordPressアセットを提供するためにリンクを書き換える方法、そして最後に、WebサイトのアセットがCDNによって正しく配信されていることをテストする方法について説明します。

無料のオープンソースのSpacesSyncプラグインを使用して、メディアライブラリのオフロードとリンクの書き換えを実装する方法を示します。また、2つの人気のある有料WordPressプラグイン WP OffloadMediaとMediaLibrary FoldersProを使用してこれを行う方法についても説明します。制作ニーズに最適なプラグインを選択する必要があります。

前提条件

このチュートリアルを開始する前に、LAMPまたはLEMPスタックの上にWordPressをインストールしておく必要があります。また、WordPressサーバーに WP-CLI がインストールされている必要があります。これは、これらの手順に従ってセットアップする方法を学ぶことができます。

メディアライブラリをオフロードするには、DigitalOceanSpaceとアクセスキーのペアが必要です。

Spaceの作成方法については、Spaces製品のドキュメントを参照してください。
アクセスキーペアを作成し、オープンソースを使用してファイルをスペースにアップロードする方法を学習するには s3cmd ツールについては、同じくDigitalOcean製品ドキュメントサイトの s3cmd 2.xSetupを参照してください。

WordPressアセットをオフロードするために使用できるWordPressプラグインがいくつかあります。

DigitalOcean Spaces Sync は、メディアライブラリをDigitalOceanSpaceにオフロードするための無料のオープンソースWordPressプラグインです。これを行う方法については、WordPressアセットをDigitalOceanSpacesに保存する方法で学ぶことができます。
WP Offload Media は、WordPressメディアライブラリからDigitalOcean Spacesにファイルをコピーし、CDNからファイルを提供するようにURLを書き換える有料プラグインです。 Assets Pullアドオンを使用すると、サイトで使用されているアセット（CSS、JS、画像など）を識別し、CDNからこれらを提供することもできます。
Media Library Folders Pro は、Media Libraryアセットを整理し、DigitalOceanSpacesにオフロードするのに役立つもう1つの有料プラグインです。

SpacesCDNでカスタムドメインを使用することを強くお勧めします。これにより、オフロードされたアセットのURLをWordpressサイトのURLと同様に保つことで、サイトの検索エンジン最適化（SEO）が大幅に向上します。 Spaces CDNでカスタムドメインを使用するには、最初にドメインをDigitalOceanアカウントに追加する必要があります。

これを行う方法については、ドメインを追加する方法を参照してください。

テストの目的で、 GoogleChromeやFirefoxなどの最新のウェブブラウザがクライアントにインストールされていることを確認してください（例：ノートパソコン。

WordPressのインストールを実行し、DigitalOcean Spaceを作成したら、SpaceのCDNを有効にして、このガイドから始める準備ができています。

SpacesCDNの有効化

このガイドは、DigitalOceanSpaceでCDNを有効にすることから始めます。これは、既存のオブジェクトの可用性には影響しません。 CDNを有効にすると、スペース内のオブジェクトがコンテンツ配信ネットワーク全体のエッジキャッシュに「プッシュアウト」され、新しいCDNエンドポイントURLが利用できるようになります。 CDNの仕組みの詳細については、CDNを使用した静的コンテンツ配信の高速化を参照してください。

まず、 Spaces CDNを有効にする方法に従って、SpaceのCDNを有効にします。

Spaces CDNでカスタムドメインを使用する場合（推奨）、サブドメインでSpaces CDNエンドポイントをカスタマイズする方法に従って、サブドメインCNAMEレコードと適切なSSL証明書を作成します。 Spaces CDNで使用するサブドメインを書き留めます。これは、WordPressアセットオフロードプラグインを構成するときに使用する必要があるためです。

スペースに戻り、ページをリロードします。スペース名の下に新しいEndpointsリンクが表示されます。

これらのエンドポイントには、スペース名が含まれています。使用しています wordpress-offload このチュートリアルでは。

新しいEdgeエンドポイントが追加されていることに注目してください。このエンドポイントは、SpacesオブジェクトのリクエストをCDN経由でルーティングし、可能な限りエッジキャッシュからそれらを提供します。このEdgeエンドポイントを書き留めます。これは、今後の手順でWordPressプラグインを構成するために使用します。 Spaces CDNのサブドメインを作成した場合、このサブドメインはEdgeエンドポイントのエイリアスです。

SpaceのCDNを有効にしたので、アセットオフロードとリンク書き換えプラグインの構成を開始する準備が整いました。

DigitalOcean Spaces Syncを使用していて、 WordPressアセットをDigitalOceanSpacesに保存する方法から続行する場合は、次のセクションから読み始めてください。 Spaces Syncを使用していない場合は、 WPOffloadMediaセクションまたは[MediaLibraryFolders Proセクション]（ how-to-speed-up-wordpress-asset-delivery-）にスキップしてください。 using-digitalocean-spaces-cdn＃media-library-folders-pro-and-cdn-enabler-plugins ）、使用するプラグインによって異なります。

SpacesSyncプラグイン

無料のオープンソースのDigitalOceanSpacesSyncおよびCDNEnablerプラグインを使用して、CDNのエッジキャッシュからファイルを提供する場合は、このセクションで概説されている手順に従ってください。

まず、WordPressのインストールとSpaces Syncプラグインが正しく構成され、DigitalOceanSpacesのアセットを提供していることを確認します。

SpacesSyncプラグイン構成の変更

WordPressアセットをDigitalOceanSpacesに保存する方法から続けて、メディアライブラリをDigitalOcean Spaceにオフロードし、SpacesSyncプラグインの設定を次のように設定する必要があります。

WordPressアセットをDigitalOceanSpacesに保存する方法チュートリアルを完了していない場合でも、組み込みプラグインインストーラーを使用してSpaces Syncプラグインをインストールすることにより、このガイドに従うことができます。エラーが発生した場合は、この前提条件ガイドの手順を参照してください。

構成を変更して、WordPressテーマやその他のディレクトリをオフロードできるようにします。 wp-content/uploads メディアライブラリフォルダ。

まず、 Full URL-path to files フィールドを変更して、メディアライブラリファイルがサーバーからローカルではなく、SpaceのCDNから提供されるようにします。この設定は基本的にメディアライブラリアセットへのリンクを書き換え、WordPressサーバーでローカルにホストされているファイルリンクからDigitalOceanSpacesCDNでホストされているファイルリンクに変更します。

SpacesCDNの手順で書き留めたEdgeエンドポイントを思い出してください。 Spaces CDNでカスタムサブドメインを使用している場合は、Edgeエンドポイントの代わりにそのサブドメインを使用します。

このチュートリアルでは、スペースの名前は wordpress-offload SpaceのCDNエンドポイントは次のとおりです。

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

次に、Spaces Syncプラグイン設定ページで、 Full URL-path to filesフィールドのURLをSpacesCDNエンドポイントに置き換えてから、 /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

次に、ローカルパスフィールドに、へのフルパスを入力します。 wp-content/uploads WordPressサーバー上のディレクトリ。このチュートリアルでは、サーバーへのWordPressインストールへのパスは次のとおりです。 /var/www/html/、したがって、へのフルパス uploads だろう /var/www/html/wp-content/uploads.

注： WordPressアセットをDigitalOceanSpacesに保存する方法から継続する場合、このガイドでは、Space内のファイルへのパスをわずかに変更して、オプションでテーマやその他のファイルをオフロードできるようにします。 wp-content 資産。これを行う前にスペースをクリアする必要があります（ファイルのコピーを必ず保存してください）。または、既存のファイルを正しいファイルに転送することもできます。 wp-content/uploads s3cmdを使用したスペースディレクトリ。

ストレージプレフィックスフィールドに、次のように入力します /wp-content/uploads、これにより、正しいビルドが保証されます wp-content 他のWordPressディレクトリをこのスペースにオフロードできるようにディレクトリ階層。

ファイルマスクはワイルドカードのままにすることができます *、特定のファイルを除外したい場合を除きます。

ファイルをクラウドにのみ保存して削除する必要はありません…オプション。 DigitalOcean Spaceに正常にアップロードされた後で、サーバーからメディアライブラリアセットを削除する場合にのみ、このチェックボックスをオンにします。

最終設定は次のようになります。

上記の値は、WordPressのインストールとSpacesの構成に対応する値に置き換えてください。

最後に、変更の保存を押します。

画面上部に設定の保存ボックスが表示され、SpacesSyncプラグインの設定が正常に更新されたことを確認できます。

Future WordPress Media Libraryのアップロードは、DigitalOcean Spaceに同期され、Spacesコンテンツ配信ネットワークを使用して提供されるはずです。

このステップでは、WordPressテーマなどをオフロードしませんでした wp-content 資産。これらのアセットをSpacesに転送し、Spaces CDNを使用して提供する方法については、追加アセットのオフロードにスキップしてください。

メディアライブラリのアップロードがSpacesCDNから配信されていることを確認およびテストするには、 Test CDNCachingにスキップしてください。

WordPressオフロードメディアプラグイン

DeliciousBrains WordPress Offload Media plugin を使用すると、メディアライブラリアセットをDigitalOcean Spacesにすばやく自動的にアップロードし、これらのアセットへのリンクを書き換えて、Spacesから直接またはSpacesCDN経由で配信できます。さらに、 Assets Pullアドオンを使用すると、 pull CDN と組み合わせて、JS、CSS、フォントファイルなどの追加のWordPressアセットをすばやくオフロードできます。このアドオンの設定はこのガイドの範囲を超えていますが、詳細については、DeliciousBrainsのドキュメントを参照してください。

まず、サンプルのWordPressサイト用にWPOffloadMediaプラグインをインストールして構成します。

WPオフロードメディアプラグインのインストール

開始するには、DeliciousBrainsプラグインサイトでプラグインのコピーを購入する必要があります。メディアライブラリ内のアセットの数、およびサイトのサポートと機能の要件に応じて、適切なバージョンを選択してください。

チェックアウトを完了すると、プラグインのダウンロードリンクとライセンスキーが記載された購入後のサイトに移動します。プラグインの購入時に指定した電子メールアドレスに、ダウンロードリンクとライセンスキーも送信されます。

プラグインをダウンロードして、WordPressサイトの管理インターフェースに移動します（https://your_site_url/wp-admin). 必要に応じてログインします。ここから、プラグインにカーソルを合わせ、新規追加をクリックします。

プラグインのアップロードをクリックし、ページの上部にあるファイルを選択をクリックして、ダウンロードしたzipアーカイブを選択します。

[今すぐインストール]、プラグインのアクティブ化の順にクリックします。 WordPressのプラグイン管理インターフェースが表示されます。

ここから、プラグイン名の下にある設定をクリックして、WPOffloadMediaプラグインの設定ページに移動します。

次の画面が表示されます。

DigitalOceanSpacesの横にあるラジオボタンをクリックします。ここで、スペースアクセスキーを構成するように求められます。 wp-config.php ファイル（推奨）、または直接Webインターフェイス（後者はWordPressデータベースにSpacesクレデンシャルを保存します）。

スペースアクセスキーを構成します wp-config.php.

コマンドラインからWordPressサーバーにログインし、WordPressルートディレクトリに移動します（このチュートリアルでは、これは /var/www/html). ここから、開いてください wp-config.php お気に入りのエディターで：

sudo nano wp-config.php

「」という行まで下にスクロールします /* That's all, stop editing! Happy blogging. */、およびSpacesアクセスキーペアを含む次の行を挿入する前に（アクセスキーペアを生成する方法については、 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 のアクセスキーの定義の横にあるラジオボタンを選択し、変更の保存を押します。

次のインターフェイスが表示されます。

この構成ページで、 Region ドロップダウンを使用してスペースに適切なリージョンを選択し、 Bucket の横にスペース名を入力します（このチュートリアルでは、スペースの名前は wordpress-offload).

次に、バケットの保存を押します。

メインのWPオフロードメディア構成ページが表示されます。上部に次の警告ボックスが表示されます。

をクリックしてライセンスキーを入力し、次のページでメールの領収書またはチェックアウトページにあるライセンスキーを入力してライセンスのアクティブ化をクリックします。

ライセンスキーを正しく入力すると、ライセンスが正常にアクティブ化されましたが表示されます。

次に、ウィンドウの上部にあるメディアライブラリをクリックして、メインのWPオフロードメディア構成ページに戻ります。

この時点で、WPOffloadMediaはDigitalOceanSpaceで使用できるように正常に構成されています。これで、Spaces CDNを使用して、アセットのオフロードと配信を開始できます。

WPオフロードメディアの構成

WP OffloadMediaをDigitalOceanSpaceにリンクしたので、アセットのオフロードと、SpacesCDNからメディアを配信するためのURL書き換えの構成を開始できます。

メインのWPオフロードメディア構成ページに次の構成オプションが表示されます。

これらのデフォルトは、ほとんどのユースケースで正常に機能するはずです。メディアライブラリがWordPressディレクトリ内の非標準パスに存在する場合は、Pathオプションの下のテキストボックスにパスを入力します。

WordPressサーバーではなくSpacesから直接提供されるようにアセットURLを変更する場合は、 Rewrite MediaURLsの横にあるOnに切り替えが設定されていることを確認してください。

Spaces CDNを使用してメディアライブラリアセットを配信するには、SpaceでCDNを有効にして（方法については Spaces CDN を参照）、EdgeのURLを書き留めておいてください。終点。 カスタムドメイン（CNAME）の横にあるトグルを押し、表示されるテキストボックスに、CDN EdgeエンドポイントURLを入力します。 https:// プレフィックス。

このガイドでは、SpacesCDNエンドポイントは次のとおりです。

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

だからここに入る：

 wordpress-offload.nyc3.cdn.digitaloceanspaces.com

Spaces CDNでカスタムサブドメインを使用している場合は、ここにそのサブドメインを入力します。

your_subdomain.example.com

セキュリティを向上させるために、トグルを On に設定して、メディアライブラリアセット（現在はCDNを使用して提供されています）へのリクエストにHTTPSを強制します。

オプションで、WordPressサーバーからSpacesにオフロードされたファイルをクリアして、ディスクスペースを解放することができます。これを行うには、サーバーからファイルを削除の横にあるオンを押します。

WPオフロードメディアの構成が完了したら、ページの下部にある[変更を保存]をクリックして設定を保存します。

URLプレビューボックスには、SpacesCDNエンドポイントを含むURLが表示されます。次のようになります。

https://wordpress‑offload.nyc3.cdn.digitaloceanspaces.com/wp‑content/uploads/2018/09/21211354/photo.jpg

Spaces CDNでカスタムサブドメインを使用している場合、URLプレビューにはこのサブドメインが含まれている必要があります。

このURLは、SpacesCDNを使用してメディアライブラリアセットを配信するようにWPオフロードメディアが正常に構成されたことを示します。パスにが含まれていない場合 cdn、EdgeエンドポイントURLとnot Origin URLを正しく入力したことを確認してください（これはカスタムサブドメインを使用する場合には適用されません）。

この時点で、WP Offload Mediaは、SpacesCDNを使用してメディアライブラリを配信するように設定されています。メディアライブラリへのfutureのアップロードは、DigitalOcean Spaceに自動的にコピーされ、CDNを使用して提供されます。

組み込みのアップロードツールを使用して、メディアライブラリ内の既存のアセットを一括オフロードできるようになりました。

メディアライブラリのオフロード

プラグインに組み込まれている「アップロードツール」を使用して、WordPressメディアライブラリ内の既存のファイルをオフロードします。

メインのWPオフロードメディア構成ページの右側に、次のボックスが表示されます。

今すぐオフロードをクリックして、メディアライブラリファイルをDigitalOceanSpaceにアップロードします。

アップロード手順が中断されると、ボックスが変わり、次のように表示されます。

Offload Remaining Now を押して、残りのファイルをDigitalOceanSpaceに転送します。

メディアライブラリから残りのアイテムをオフロードすると、次の新しいボックスが表示されます。

この時点で、メディアライブラリをSpaceにオフロードし、SpacesCDNを使用してファイルをユーザーに配信しています。

ファイルのダウンロードをクリックすると、いつでもSpaceからWordPressサーバーにファイルをダウンロードして戻すことができます。

ファイルの削除を押して、DigitalOceanスペースをクリアすることもできます。これを行う前に、最初にSpacesからWordPressサーバーにファイルをダウンロードして戻したことを確認してください。

このステップでは、WordPress MediaLibraryをDigitalOceanSpacesにオフロードし、WPOffloadMediaプラグインを使用してこれらのライブラリアセットへのリンクを書き換える方法を学びました。

テーマやJavaScriptファイルなどの追加のWordPressアセットをオフロードするには、 Asset Pullアドオンを使用するか、このガイドの Offload AdditionalAssetsセクションを参照してください。

メディアライブラリのアップロードがSpacesCDNから配信されていることを確認およびテストするには、CDNCachingのテストにスキップしてください。

メディアライブラリフォルダプロおよびCDNイネーブラープラグイン

MaxGalleria Media Library Folders Pro plugin は、WordPressMediaLibraryアセットをより適切に整理できる便利なWordPressプラグインです。さらに、無料の Spacesアドオンを使用すると、メディアライブラリアセットをDigitalOcean Spacesに一括オフロードし、それらのアセットへのURLを書き換えて、オブジェクトストレージから直接提供できます。次に、Spaces CDNを有効にし、Spaces CDNエンドポイントを使用して、分散配信ネットワークからライブラリアセットを提供できます。この最後の手順を実行するには、 CDNイネーブラープラグインを使用して、メディアライブラリアセットのCDNエンドポイントURLを書き換えます。

まず、Media Library Folders Pro（MLFP）プラグインと、MLFPSpacesアドオンをインストールして構成します。次に、SpacesCDNを使用してメディアライブラリアセットを配信するようにCDNイネーブラープラグインをインストールして構成します。

MLFPプラグインのインストール

MLFPプラグインを購入すると、MaxGalleriaアカウントのクレデンシャルとプラグインのダウンロードリンクが記載されたメールが届きます。プラグインのダウンロードリンクをクリックして、MLFPプラグインのzipアーカイブをローカルコンピューターにダウンロードします。

アーカイブをダウンロードしたら、WordPressサイトの管理インターフェースにログインします（https://your_site_url/wp-admin）、左側のサイドバーでプラグインに移動し、新規追加に移動します。

プラグインの追加ページで、プラグインのアップロードをクリックし、ダウンロードしたzipアーカイブを選択します。

[今すぐインストール]をクリックしてプラグインのインストールを完了し、プラグインのインストール画面でプラグインのアクティブ化をクリックしてMLFPをアクティブ化します。

次に、左側のサイドバーに Media Library FoldersProメニュー項目が表示されます。それをクリックして、Media LibraryFoldersProインターフェースに移動します。プラグインのさまざまな機能については、このガイドの範囲を超えていますが、詳細については、MaxGalleriaサイトおよびフォーラムを参照してください。

プラグインをアクティブにします。 MLFPメニュー項目の下の設定をクリックし、ライセンスキーテキストボックスの横にライセンスキーを入力します。 MLFPライセンスキーは、プラグインの購入時に送信された電子メールに記載されています。 変更の保存を押してから、ライセンスのアクティブ化を押します。次に、[設定の更新]を押します。

これでMLFPプラグインがアクティブになり、WordPressサイトの既存または新規のメディアライブラリアセットを整理するために使用できます。

次に、Spacesアドオンプラグインをインストールして構成し、DigitalOceanSpacesからこれらのアセットをオフロードして提供できるようにします。

MLFPSpacesアドオンプラグインのインストールとメディアライブラリのオフロード

Spacesアドオンをインストールするには、MaxGalleriaアカウントにログインします。アカウントのクレデンシャルは、MLFPプラグインの購入時に送信された電子メールで確認できます。

トップメニューバーのアドオンページに移動し、メディアソースまでスクロールダウンします。ここから、 Media Library Folders Pro S3 andSpacesオプションをクリックします。

このページから、価格設定セクションまでスクロールし、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

「」という行まで下にスクロールします /* That's all, stop editing! Happy blogging. */、およびその前に、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. */
. . .

編集が完了したら、ファイルを保存して閉じます。

次に、クラウドコントロールパネルからDigitalOcean Spaceに移動し、というフォルダーを作成します。 wp-content 新しいフォルダをクリックします。

ここから、WordPress管理インターフェースに戻り、クリックしてメディアライブラリフォルダプロその後 S3とスペースの設定サイドバーにあります。

アクセスキーの設定に関する警告バナーが消えているはずです。それがまだ存在する場合は、 wp-config.php タイプミスや構文エラーのファイル。

ライセンスキーテキストボックスに、Spacesアドオンの購入後に電子メールで送信されたライセンスキーを入力します。このライセンスキーはMLFPライセンスキーとは異なることに注意してください。 変更の保存を押してから、ライセンスのアクティブ化を押します。

有効にすると、次の構成ペインが表示されます。

ここから、をクリックします Image Bucket＆Regionを選択します DigitalOceanスペースを選択します。次に、スペースに適した領域を選択し、バケット選択の保存をクリックします。

これで、SpacesオフロードプラグインがDigitalOceanSpaceに正常に接続されました。 WordPressメディアライブラリアセットのオフロードを開始できます。

クラウドサーバー上のファイルを使用するチェックボックスを使用すると、メディアライブラリアセットの提供元を指定できます。このチェックボックスをオンにすると、アセットはDigitalOcean Spacesから提供され、画像やその他のメディアライブラリオブジェクトへのURLはそれに応じて書き換えられます。 Spaces CDNを使用してメディアライブラリアセットを提供する場合は、このチェックボックスをオンにしないでください。プラグインはCDNEdgeではなくSpacesOriginエンドポイントを使用するためです。エンドポイント。将来のステップでCDNリンクの書き換えを設定します。

DigitalOcean Spacesに正常にアップロードされたら、ローカルサーバーからファイルを削除ボックスをクリックして、ローカルメディアライブラリアセットを削除します。

SpacesからWordPressサーバーにファイルを一括ダウンロードする場合は、クラウドサーバーから個々のダウンロードファイルを削除するチェックボックスを使用する必要があります。オンにすると、WordPressサーバーに正常にダウンロードされた後、これらのファイルがSpacesから削除されます。今のところ、このオプションは無視できます。

Spaces CDNで使用するプラグインを構成しているため、クラウドサーバー上のファイルを使用するチェックボックスをオフのままにし、メディアライブラリをクラウドサーバーにコピーをクリックしてサイトを同期しますWordPressメディアライブラリをDigitalOceanスペースに追加します。

進行状況ボックスが表示されたら、アップロードが完了します。は、メディアライブラリの同期が正常に終了したことを示します。

DigitalOcean Spaceに移動して、メディアライブラリファイルがSpaceにコピーされたことを確認します。それらはで利用可能である必要があります uploads のサブディレクトリ wp-content このステップの前半で作成したディレクトリ。

Spaceでファイルが利用可能になったら、SpacesCDNの構成に進む準備ができています。

SpacesCDNからアセットを配信するためのCDNイネーブラープラグインのインストール

Spaces CDNを使用してオフロードされたファイルを提供するには、まずSpaceでCDNが有効になっていることを確認します。

SpaceでCDNが有効になったら、 CDN Enabler WordPressプラグインをインストールして構成し、メディアライブラリアセットへのリンクを書き換えることができます。プラグインは、これらのアセットへのリンクを書き換えて、SpacesCDNエンドポイントから提供されるようにします。

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ダッシュボードから見つけることができるSpaces Edgeエンドポイントを入力します。このチュートリアルでは、これは https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com. Spaces CDNでカスタムサブドメインを使用している場合は、ここにそのサブドメインを入力します。例えば、 https://assets.example.com.
含まれるディレクトリ：入力 wp-content/uploads. 他の人に奉仕する方法を学びます wp-content Offload AdditionalAssetsセクションのディレクトリ。
除外：デフォルトのままにします .php
相対パス：チェックボックスをオンのままにします
CDN HTTPS ：チェックボックスをオンにして有効にします
残りの2つのフィールドは空白のままにします

次に、 [変更を保存]を押してこれらの設定を保存し、WordPressサイトで有効にします。

この時点で、WordPressサイトのメディアライブラリをDigitalOcean Spacesに正常にオフロードし、CDNを使用してエンドユーザーにサービスを提供しています。

メディアライブラリのアップロードがSpacesCDNから配信されていることを確認およびテストするには、CDNCachingのテストにスキップしてください。

追加資産のオフロード（オプション）

このガイドの前のセクションでは、サイトのWordPressメディアライブラリをSpacesにオフロードし、SpacesCDNを使用してこれらのファイルを提供する方法を学びました。このセクションでは、テーマ、JavaScriptファイル、フォントなどの追加のWordPressアセットのオフロードと提供について説明します。

これらの静的アセットのほとんどは、 wp-content ディレクトリ（ wp-themes). このディレクトリのURLをオフロードして書き換えるには、KeyCDNによって開発されたオープンソースプラグインである CDNEnablerを使用します。

WPオフロードメディアプラグインを使用している場合は、アセットプルアドオンを使用して、プルCDNを使用してこれらのファイルを提供できます。このアドオンのインストールと構成は、このガイドの範囲を超えています。詳細については、DeliciousBrains製品ページを参照してください。

まず、CDNイネーブラーをインストールします。次に、WordPressテーマをSpacesにコピーし、最後にSpacesCDNを使用してこれらを配信するように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テーマのPHP、JavaScript、HTML、および画像ファイルを含むWordPressディレクトリ。オプションで、このプロセスを他のWordPressディレクトリに拡張できます。 wp-includes、そして全体さえ wp-content ディレクトリ。

このチュートリアルでWordPressのインストールに使用されるテーマは twentyseventeen、執筆時点でのWordPressの新規インストールのデフォルトテーマ。他のテーマやWordPressコンテンツについても、これらの手順を繰り返すことができます。

まず、を使用してテーマをDigitalOceanSpaceにアップロードします s3cmd. まだ構成していない場合 s3cmd、DigitalOceanSpaces製品ドキュメントを参照してください。

WordPressインストールに移動します wp-content ディレクトリ：

cd /var/www/html/wp-content

ここから、 themes を使用してDigitalOceanSpaceへのディレクトリ s3cmd. この時点でアップロードできるテーマは1つだけですが、簡単にするため、またサーバーからできるだけ多くのコンテンツをオフロードするために、すべてのテーマをアップロードします。 themes 私たちのスペースへのディレクトリ。

使用します 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 上記のコマンドでスペース名を使用します。

ここで、私たちは指示します find 内のファイルを検索するには themes/ ディレクトリ、および無視します .php と .css ファイル。次に、 xargs -I{} このリストを反復処理して実行します s3cmd put ファイルごとに、スペースでのファイルのアクセス許可をに設定します public を使用して --acl-public.

次に、CSSスタイルシートについても同じことを行い、 --mime-type="text/css" フラグを設定して text/css SpacesのスタイルシートのMIMEタイプ。これにより、Spacesが正しいを使用してテーマのCSSファイルを提供するようになります Content-Type: text/css HTTPヘッダー：

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

繰り返しになりますが、必ず交換してください wordpress-offload 上記のコマンドでスペース名を使用します。

テーマをアップロードしたので、スペース内の正しいパスでテーマが見つかることを確認しましょう。 DigitalOceanクラウドコントロールパネルを使用して、スペースに移動します。

入力します wp-content ディレクトリ、続いて themes ディレクトリ。ここにテーマのディレクトリが表示されます。そうでない場合は、 s3cmd 構成し、テーマをスペースに再アップロードします。

ステップ3—アセットリンクを書き換えるためのCDNイネーブラーの設定

テーマがSpaceに存在し、正しいメタデータを設定したので、CDNEnablerとDigitalOceanSpacesCDNを使用してファイルの提供を開始できます。

WordPress管理エリアに戻り、設定、CDNイネーブラーの順にクリックします。

ここで、表示されるフィールドを次のように変更します。

CDN URL ：ステップ1 で行ったように、スペースエッジエンドポイントを入力します。このチュートリアルでは、これは https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com. Spaces CDNでカスタムサブドメインを使用している場合は、ここにそのサブドメインを入力します。例えば、 https://assets.example.com.
含まれるディレクトリ：MLFPプラグインを使用していない場合、これは次のようになります。 wp-content/themes. もしそうなら、これは wp-content/uploads,wp-content/themes
除外：デフォルトのままにします .php
相対パス：チェックボックスをオンのままにします
CDN HTTPS ：チェックボックスをオンにして有効にします
残りの2つのフィールドは空白のままにします

最終設定は次のようになります。

変更の保存を押してこれらの設定を保存し、WordPressサイトで有効にします。

この時点で、WordPressサイトのテーマアセットをDigitalOcean Spacesに正常にオフロードし、CDNを使用してエンドユーザーに提供しています。これは、ChromeのDevToolsを使用して、以下ので説明されている手順に従って確認できます。

CDNイネーブラープラグインを使用すると、次のような他のWordPressディレクトリに対してこのプロセスを繰り返すことができます。 wp-includes、そして全体さえ wp-content ディレクトリ。

CDNキャッシングのテスト

このセクションでは、WordPressアセットがどこから提供されているかを判断する方法を示します（例： Google ChromeのDevToolsを使用してホストサーバーまたはCDN）。

ステップ1—同期をテストするためにメディアライブラリにサンプル画像を追加する

まず、サンプル画像をメディアライブラリにアップロードし、それがDigitalOceanSpacesCDNサーバーから提供されていることを確認します。 WordPress Admin Webインターフェイスを使用するか、 wp-cli コマンドラインツール。このガイドでは、 wp-cli サンプル画像をアップロードします。

コマンドラインを使用してWordPressサーバーにログインし、構成した非rootユーザーのホームディレクトリに移動します。このチュートリアルでは、ユーザーsammyを使用します。

cd

ここから、 curl DigitalOceanロゴをドロップレットにダウンロードするには（テストしたい画像がすでにある場合は、この手順をスキップしてください）：

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ファイルを含むディレクトリへの正しいパスを使用します。

警告が表示される場合がありますが、出力は次のように終了する必要があります。

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

これは、テストイメージがWordPress Media Libraryに正常にコピーされ、お好みのオフロードプラグインを使用してDigitalOceanSpaceにアップロードされたことを示しています。

DigitalOcean Spaceに移動して、以下を確認します。

これは、オフロードプラグインが期待どおりに機能しており、WordPressのアップロードをDigitalOceanSpaceに自動的に同期していることを示しています。 Spaceにアップロードされたメディアライブラリへの正確なパスは、WordPressファイルをオフロードするために使用しているプラグインによって異なることに注意してください。

次に、このファイルがWordPressを実行しているサーバーからではなく、SpacesCDNを使用して提供されていることを確認します。

ステップ2—アセットURLを検査する

WordPress管理エリアから（https://your_domain/wp-admin）、左側のナビゲーションメニューでページに移動します。

アップロードした画像を含むサンプルページを作成して、画像がどこから提供されているかを確認します。 WordPressサイトの既存のページに画像を追加して、このテストを実行することもできます。

ページ画面から、サンプルページまたは既存のページをクリックします。または、新しいページを作成することもできます。

ページエディタで、メディアの追加をクリックし、DigitalOceanロゴ（またはこの手順のテストに使用した他の画像）を選択します。

画面の右側に添付ファイルの詳細ペインが表示されます。このペインで、 [ページに挿入]をクリックして、画像をページに追加します。

ここで、ページエディタに戻り、で公開（新しいサンプルページを作成した場合）または更新（既存のページに画像を追加した場合）をクリックします。画面右側の[公開]ボックス。

画像が含まれるようにページが正常に更新されたので、ページタイトルの下にあるパーマリンクをクリックしてページに移動します。 Webブラウザでこのページに移動します。

このチュートリアルでは、次の手順ではGoogle Chromeを使用していることを前提としていますが、最新のWebブラウザを使用して同様のテストを実行できます。

ブラウザでレンダリングされたページのプレビューから、画像を右クリックし、検査をクリックします。

DevToolsウィンドウがポップアップし、 img ページのHTMLのアセット：

このURLにDigitalOceanSpaceのCDNエンドポイントが表示されます（このチュートリアルでは、SpacesCDNエンドポイントは https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com）、画像アセットがDigitalOceanSpacesCDNエッジキャッシュから提供されていることを示します。 Spaces CDNでカスタムサブドメインを使用している場合、アセットURLはこのカスタムサブドメインを使用している必要があります。

これにより、メディアライブラリのアップロードがDigitalOcean Spaceに同期され、SpacesCDNを使用して提供されていることが確認されます。

ステップ3—アセットレスポンスヘッダーの検査

DevToolsウィンドウから、最後のテストを1つ実行します。ウィンドウ上部のツールバーにあるネットワークをクリックします。

空白のネットワークウィンドウが表示されたら、表示される指示に従ってページをリロードします。

ページアセットがウィンドウに表示されます。ページアセットのリストでテスト画像を見つけます。

テスト画像を見つけたら、それをクリックして追加情報ペインを開きます。このペイン内で、 Headers をクリックして、このアセットの応答ヘッダーを表示します。

あなたは見るべきです Cache-Control CDN応答ヘッダーであるHTTPヘッダー。これは、この画像がSpacesCDNから提供されたことを確認します。

ステップ4—テーマアセットのURLを検査する（オプション）

オフロードした場合 wp-themes 追加アセットのオフロードで説明されている（またはその他の）ディレクトリでは、次の簡単なチェックを実行して、テーマのアセットがSpacesCDNから提供されていることを確認する必要があります。

Google ChromeでWordPressサイトに移動し、ページ内の任意の場所を右クリックします。表示されるメニューで、検査をクリックします。

もう一度、ChromeDevToolsインターフェイスが表示されます。

ここから、ソースをクリックします。

左側のペインに、WordPressサイトのアセットのリストが表示されます。 CDNエンドポイント（またはカスタムサブドメイン）まで下にスクロールし、エンドポイント名の横にある小さな矢印をクリックしてリストを展開します。

WordPressテーマのヘッダー画像、JavaScript、CSSスタイルシートがSpacesCDNから提供されていることを確認してください。

結論

このチュートリアルでは、静的コンテンツをWordPressサーバーからDigitalOcean Spacesにオフロードし、SpacesCDNを使用してこのコンテンツを提供する方法を示しました。ほとんどの場合、これによりホストインフラストラクチャの帯域幅が削減され、エンドユーザー、特にWordPressサーバーから地理的に離れた場所にいるエンドユーザーのページの読み込みが高速化されます。

メディアライブラリと themes Spaces CDNを使用するアセットですが、これらの手順を拡張して、全体をさらにアンロードすることができます wp-content ディレクトリ、および wp-includes.

静的アセットを配信するためにCDNを実装することは、WordPressのインストールを最適化する1つの方法にすぎません。 W3 Total Cache のような他のプラグインは、ページの読み込みをさらに高速化し、サイトのSEOを改善することができます。ページの読み込み速度を測定して改善するための便利なツールは、Googleの PageSpeedInsightsです。要求時間と応答時間のウォーターフォール内訳、および推奨される最適化を提供するもう1つの便利なツールは、Pingdomです。

コンテンツ配信ネットワークとその仕組みの詳細については、CDNを使用した静的コンテンツ配信の高速化を参照してください。

getdocs

13036