前回は、Amazon S3にメディアを保存/オフロードする方法をご紹介しました。今回は、WordPressサイトのメディアをGoogle Cloud Storageに保存/オフロードする方法と、Google Cloud StorageやCDNから直接メディアを配信する方法をご紹介します。

KinstaはGoogle Cloud Platformを採用しており、言うまでも無くその技術とインフラストラクチャには絶大な信頼を寄せています。これを使ってオフロードを行う主な理由は、ディスク容量の節約です。

Google Cloud Storageは、Google Cloud Platformの数ある製品・サービスの、ほんの一部に過ぎません。Googleの巨大なインフラと、ストレージを一括して扱う性質から、非常に低いストレージコストが実現しています。WordPressホストよりもはるかに安価です。

通常、このようなクラウドストレージは、Kinstaの外部バックアップアドオンといった追加のバックアップ機能が必要なサイトや、大容量ファイル(画像、写真、ダウンロード素材、ソフトウェア、ビデオ、ゲーム)を提供するサイトに使用されます。これを利用する会社には、Spotify、Vimeo、Coca-Cola、Philips、Evernote、Motorolaなどがあります。

Google Cloud Storage と Google Cloud CDN の違い

Google Cloud Storageを、Google Cloud CDNやその他のCDNと混同しないようにご注意ください。CDN(コンテンツデリバリネットワーク)は、メディアの配信を高速化するためのものであり、Google Cloud Storageは、大容量のストレージソリューションです。

しかし、Google Cloud Storage は、マルチリージョナルストレージという方式を採用しているため、サイトの高速化にも貢献します。つまり、Google Cloud Storageのコンテンツは、CDNのようにリージョン内の複数の場所に保存され、そこから配信されるということです。また、同じエッジキャッシュ技術も使用されています。ただし、これはグローバルなものではなく、本格的なCDNソリューションよりもレイテンシが高くなる可能性があります。Google Cloud Storageでは、3つのリージョンから選択することができます。

  • アジア太平洋
  • 欧州連合
  • 米国

とは言え、Google Cloud StorageとあわせてCDNも利用する方法を以下にご紹介します。

Kinstaでは、Cloudflare統合によるエッジキャッシュで、Cloudflareのグローバルネットワークの260+箇所のデータセンターのいずれかにKinstaサイトおよびページキャッシュを保存します。

エッジキャッシュは、Kinstaのすべてのプランに付帯しています。プラグインなしで、キャッシュされたWordPressのHTMLページの配信時間を平均50%以上削減することができます。

Google Cloud Storageの価格

Google Cloud Platformでは、新規利用者向けに90日間、300ドル相当のクレジットが利用できる無料トライアルを提供しています。Google Cloud Platformの有料会員になったことがなく、これまでに無料トライアルに申し込んだことがない方が対象です。このトライアルは、Google Cloud Storageを試し、サイトに合っているか確認するのに便利です。無料トライアルに関するFAQGoogle Cloud Storageの価格をご覧ください。

Google Cloud Platform無料トライアル
Google Cloud Platform無料トライアル

WP-StatelessプラグインでWordPressサイトにGoogle Cloud Storageを統合

Google Cloud StorageをWordPressサイトに統合する最初の選択肢が、WP-Statelessというプラグインです。Usability Dynamicsという会社が開発したもので、無料で利用できます。

このプラグインは、WordPressサイトのメディアライブラリにアップロードされたファイルを、Google Cloud Storageに自動的にコピーしてくれます。さらに、メディアをバックアップしたり、WordPressからメディアを削除してGoogle Cloud Storageから配信したりするなど、さまざまなモードが用意されています。

WordPressプラグイン「WP-Stateless」
WordPressプラグイン「WP-Stateless」

このプラグインはまだ公開されてから日が浅いですが、すでに評判が良く、積極的なメンテナンスや更新が行われています。この記事の執筆時点で、5つ星評価、2,000件以上のアクティブインストールを誇ります。また、以下のサードパーティ製プラグインとの互換性が公式に発表されています。

  • Easy Digital Downloads
  • Imagify Image Optimizer
  • WPForms
  • WP Smush
  • Advanced Custom Fields Image Crop Addon
  • SiteOrigin Widget Bundle
  • SiteOrigin CSS
  • Gravity Forms
  • WPBakery Page Builder

プラグインが上に記載されていないからといって、それが動作しないということではありません。掲載されているのは、Usability Dynamicsのエンジニアがバグの修正、互換性確保に特別な時間を費やしたプラグインです。ただし、このような新しいプラグインは、まずステージング環境でテストしてみることを常にお勧めします。

ステップ 1

無料のWP-Statelessプラグインをインストールするには、WordPressのリポジトリからダウンロードするか、WordPressダッシュボード内プラグインの「新規追加」から「WP-Stateless」を検索して、「今すぐインストール」をクリックし、有効化してください。

WordPressプラグイン「WP-Stateless」をインストール
WordPressプラグイン「WP-Stateless」をインストール

ステップ 2

「Begin Setup Assistant」をクリックします。または、手動でのセットアップを選ぶこともできます。

WP-Statelessのセットアップ
WP-Statelessのセットアップ

ステップ 3

「Google Login」をクリックします。このウェブサイトに紐付けたいGoogleアカウントを使用し、アクセスを許可する必要があります。Googleアカウントの接続について詳しくは、許可に関するドキュメントをご確認ください。Googleアカウントへのアクセスを許可したくない場合は、手動でセットアップを行うことも可能です。

WP-Statelessの「Google Login」ボタン
WP-Statelessの「Google Login」ボタン

ステップ 4

「許可」をクリックすると、Google Cloud Platformのサービス全体でユーザーデータが閲覧・管理できるようになります。補足)ユーザーログインプロセスが完了すると、このプラグインによりトークンやアクセス認証情報は一切保持されません。

Googleアカウントへのアクセスを許可
Googleアカウントへのアクセスを許可

ステップ 5

続いて、WP-Statelessにより、WordPressサイトのメディアファイルを保存することになるGoogle Cloudプロジェクトとバケットの設定が始まります。

  • Google Cloud Project:Google Cloudバケットは、プロジェクト内に位置します。新しいプロジェクトを作成することも、既存のプロジェクトから選択することもできます。
  • Google Cloud Bucket:すべてのWordPressデータは、バケットに保存されます。新しいバケットを作成することも、既存のバケットから選択することもできます。
  • Google Cloud Bucket Multi-Regional Location:新しく作成したバケットには、マルチリージョナルストレージクラスがあてがわれます。あなたのウェブサイトの訪問者に最も近い場所を選択してください。
  • Google Cloud Billing:支払い情報の付されたアカウントをお持ちでない場合には、ボタンをクリックしてアカウントを設定してください。90日間300ドルのクレジットが利用できる無料トライアルもありますので、お忘れなく。

重要:Google Cloud Storage で独自のドメインや CDN の URL を使用する場合は、CDN ドメインの URL とまったく同じ名前をバケットに付けるようにしてください。例えば、バケット名は「gcs.yourrdomain.com」といった具合です。文字数に関する警告が表示されますが、バケット名にピリオドを使用しても問題ありません。バケット名は英数字で始まり、英数字で終わる必要があります。

WP-Statelessプラグインの「Project」と「Bucket」
WP-Statelessプラグインの「Project」と「Bucket」

上記の設定がすべて完了したら、「Continue」をクリックしてください。すべての設定が正しく行われたことを示す画面が表示されます。フォームの始まり

WP-Statelessのセットアップ完了画面
WP-Statelessのセットアップ完了画面

WordPressサイトでのWP-StatelessとGoogle Cloud Storageのセットアップ

WP-StatelessとGoogle Cloud Storageの設定は、「メディア」>「Stateless Settings」から確認できます。「Settings」タブで、お好みのモードを設定可能です。

  • Disabled:WP-Statelessのメディア機能を無効にします。
  • Backup:Google Storageにメディアファイルをアップロード(バックアップ)しながら、ローカルファイルURLを配信に利用します。
  • CDN:メディアファイルをGoogle Storageにコピーし、そこから直接配信します。注)Kinsta CDNとこのオプションの併用はできません。どちらか一方を選択する必要があります。
  • Stateless:メディアファイルの保存と配信に、Google Cloud Storageのみを利用します。メディアファイルはローカルでは保存されません。これを選択することで、最もディスク容量を節約することができます。
  • File URL Replacement:配信に際して投稿内容とメタ情報をスキャンし、ローカルメディアファイルのURLをGoogle Cloud StorageのURLに置き換えます。この設定は、データベースの中身を書き換えるものではありません。
WP-Statelessの各種モード
WP-Statelessの各種モード

メディアファイルを後から取得しなければならないケースを考えると…少し不安でしょうか?ご安心ください。このプラグインには、元に戻したいときのために同期機能(以下で詳しく説明します)があります。また、Google Cloud StorageのバケットからWordPressサイトのアップロードフォルダを取得することもできます。これは実際、メディアライブラリの外観を忠実に再現したものになっています(以下の画像を参照のこと)。

Google Cloud StorageのWordPressバケットフォルダ
Google Cloud StorageのWordPressバケットフォルダ

さらにページ下部には、その他の設定項目があります。

  • Cache-Control:デフォルトでは、「public, max-age=36000, must-revalidate」に設定されています。必要に応じてこれを上書きすることができます。
  • Delete GSC File:WordPressのメディアライブラリからファイルを削除した際に、GSCからもファイルを削除したい場合は、これを有効にします。
  • File URL and Domain:デフォルトのGCSドメインを独自のドメインに置き換えます。これには、CNAMEの設定が必要です。バケット名とドメイン名が正確に一致しなければならないことに注意してください。ドキュメントによるとカスタムドメインでHTTPSは公式にはサポートされていませんが、試してみたところ問題なく動作しました。
  • Organization:アップロードしたデータを、年や月ごとのフォルダで整理します。
  • Cache Busting:ファイル名の前に、ランダムな数字と文字を付加します。これは、複数の同じ名前のファイルをアップロードする際に、キャッシュの問題を防ぐのに便利です。
WP-Statelessの追加設定
WP-Statelessの追加設定

WordPressのメディアライブラリにアップロードした画像は、自動的にGoogle Cloud Storageにコピーされます。しかし、このプラグインを最初に設定した後には、一括で同期を実行しておくのが得策です。「メディア」>「Stateless Settings」>「Sync」には、次の選択肢があります。

  • すべてのステートレス画像を再生成し、Google Storageとローカルサーバー間で同期する(注:初回には時間がかかります)
  • 画像以外のファイルをGoogle Storageとローカルサーバー間で同期する
  • メディア以外のライブラリファイルをGoogle Storageとローカルサーバー間で同期する

WP Offload MediaプラグインでWordPressサイトにGoogle Cloud Storageを統合

Google Cloud StorageをWordPressサイトに統合する2つ目の方法は、Delicious Brains Inc.提供の無料プラグイン「WP Offload Media Lite」(または有料版WP Offload Media)を利用することです。

WordPressプラグイン「WP Offload Media」
WordPressプラグイン「WP Offload Media」

WP Offload Mediaのライト版はほとんどの状況で事足りますが、プレミアム(有料)版にアップグレードすると、さらに素晴らしい機能が利用できます。

  • PriorityExpert™メールサポート
  • 既存のメディアライブラリをクラウドストレージにアップロード
  • メディアライブラリからクラウドストレージのファイルを操作
  • バックグラウンドでオフロードの完了したファイルをサーバーから削除する
  • クラウドストレージからのダウンロードと削除
  • 好みのストレージのバケット間にて、バックグラウンドでファイルをコピー
  • Assets Pullアドオンを使って、たった数回のクリックでCloudFrontや他のCDNからサイトのアセット(CSS、JS、画像、フォントなど)を配信
  • WooCommerce、WPML、Easy Digital Downloads、Meta Slider、Enable Media Replace、Advanced Custom Fieldsと統合

ステップ1

無料のWP Offload Media Liteプラグインをインストールするには、WordPressのリポジトリからダウンロードするか、WordPressダッシュボード内プラグイン「新規追加」から「WP Offload Media Lite」を検索してください。その後、「今すぐインストール」をクリックし、「有効化」します。

WordPressプラグイン「WP Offload Lite」のインストール
WordPressプラグイン「WP Offload Lite」のインストール

ステップ2

以下のGoogle Cloud Storageクイックスタートガイド(英語)に従って設定してください。

Google Cloud Storage CDNの統合

Google Cloud Storageのパフォーマンスについてお困りですか?確かに、マルチリージョナルストレージは、通常のCDNほど高速ではありませんし、特に世界各国に訪問者が散らばる場合には不向きです。しかし、好みのCDNプロバイダーを介してファイルを配信することは可能です。以下にいくつかの方法をご紹介します。

WP-StatelessとKeyCDNの連携

KeyCDNを使った例をご紹介します。

重要:この方法を利用すると、Google Cloud StorageとCDNの両方で料金が発生しますので、事前にその合計を計算しておくことをおすすめします。また、Google Cloud Platformの無料トライアルを使用すれば、Googleでの料金を支払うことなく、実際の費用を見積もることができます。以下の方法は現在、Kinsta CDNとは互換性がありません。

  1. Google Cloud Storageメディア専用の新しいゾーンを設定します。KeyCDNのGoogle Cloud Storage CDN統合についての説明に従ってください。基本的には、Google Cloud Storageをオリジンサーバーとして使用します。
  2. Let’s Encrypt(HTTPS)を先の新しいゾーンにデプロイします。
  3. KeyCDNで新しいゾーンエイリアスを設定します。※例:gcs.yourdomain.com
  4. WP-Statelessプラグインの設定で、先のゾーンエイリアスを使用します。

その結果、KeyCDNがGoogle Cloud Storageからファイルを配信するようになります。これでパフォーマンスの問題は解決するはずです。

Google Cloud StorageとKeyCDN
Google Cloud StorageとKeyCDN

WP-Statelessプラグインはメディアライブラリ(画像)のみを扱うものです。スクリプト(JS、CSS)もCDN経由で配信したい場合には、以下の手順をご覧ください。

  1. ご利用のCDNでアセット用の別のゾーンを設定し、cdn.yourrdomain.comなど、上記のものとは別のURLを使用します。
  2. 除外機能に対応したWordPress CDNプラグインをインストールします。例えば、CDN enabler(無料)、Perfmatters(有料)、WP Rocket(有料)があります。
  3. CDNプラグインがCSSやJSといったアセットだけを読み込むように除外対象を設定します。こうすることで、WP-Statelessプラグインがメディアファイルを扱い、CDNプラグインがアセットを扱うようになります。
PerfmattersのCDN除外設定
PerfmattersのCDN除外設定

その結果、メディアはカスタムCDN URL(Google Cloud Storageから取得)から読み込まれ、アセットは別のカスタムCDN URLから読み込まれることになります。 また、「ステートレス」モードを選択している場合、WordPressサイトにおいて、画像のためにディスク容量は使用されません。素晴らしいセットアップの完成です。

Google Cloud StorageとCDNの組み合わせ
Google Cloud StorageとCDNの組み合わせ

WP Offload Media とGoogle Cloud CDNの統合

WP Offload Mediaは、デフォルトでは、オフロードしたメディアを配信する際に、Google Cloud StorageのそのままのURLを使用する設定です。メディアURLは以下のようになります。

http://storage.googleapis.com/bucket-name/wp-content/uploads/…

Google Cloud Storageに独自ドメインCDNを設定する方法については、こちらの記事をご覧ください。