【WP-Statelessの使い方】WordPressの画像配信をGoogle Cloud Storageから行いサーバー負荷を軽減しよう

WP-Stateless

WordPressでウェブメディアやブログを運営していて、画像や動画などを多く挿入している場合、メディアファイル(主に画像)がサーバーの負荷を圧迫し、ユーザーへのレスポンスが遅くなっているケースがあると思う。

大手クラウド事業者であるAWSやGoogle Cloud、DigitalOceanなどは、メディアファイルを保存・配信する専用のサービス(クラウドストレージ)を提供している。

  • AWS:「S3」
  • Google Cloud:「Google Cloud Storage(GCS)」
  • DigitalOcean:「Spaces」

ブログにメディアファイルを多く掲載することは、読者の可読性や内容の理解のしやすさ、印象のつけやすさから非常に重要だ。

そこで、メディアファイルを上述したクラウドストレージから配信すれば、ウェブサーバーの負荷を抑えつつ、読み込みを高速化することができる。

WordPressのメディアファイルをS3、GCS、Spacesから配信することが出来るプラグインはいくつかあり、有名で使いやすい所では以下の3つが挙げられる。

なお、筆者はこれらのプラグインすべてを使用しているので、オススメである理由や設定方法の記述に嘘はなく事実のみを書いている。

  • WP Offload Mediaは最もインストール数が多く、安定した稼働を何年も続けているので信頼性が高い。
  • Media Cloudは、リアルタイム画像処理サービスである「imgix」と連携出来るところが良い。
  • WP-StatelessなGCSに特化したプラグインで、設定が非常に容易である。

WP Offload Mediaは、これまでアップロードされてきたファイルを同期するのは有料プラン(Pro)のみである。よって、最初から作るウェブサイトでは無料(Lite)でも十分なのだが、既存サイトへ導入するのは200ドルほど払ってプレミアムにする必要がある。

この記事では、導入が最も容易で信頼性は高く、GCSへのアップロード&配信に絞ったWP-Statelessの導入方法を解説したいと思う。

Google Cloud Storageについて

GCSは、主要なITサービスが使用しているくらい優れたもの。Spotify、Vimeo、WixはGCSを利用している企業だ。

SpotifyのソフトウェアエンジニアであるJyrki Pulliainen氏は、次のように述べている。

「Spotify は Google Cloud Storage を使用して音楽の保存と提供を行っています。Regional Storage を利用することで、本番環境のストレージに近い場所にある Google Compute Engine でオーディオ コード変換を実行できるようになりました。また、Google のネットワークのおかげで、当社のすべての CDN プロバイダの相互接続が実現しただけでなく、オープンかつ明示的なピアリング設定も可能になりました」

料金

GCSはGoogle Cloudの無料枠に入っており、以下の条件のもとでは課金されない。

  • 5 GB/月の Regional Storage(1 か月あたり、北バージニア [us-east4] を除く米国リージョンのみ)
  • 5,000 回のクラス A オペレーション(1 か月あたり)
  • 50,000 回のクラス B オペレーション(1 か月あたり)
  • 1 GB の北米から全リージョン宛ての下りネットワーク(1 か月あたり、中国とオーストラリアを除く)

簡単に言えば、『月5GB以内の容量で、そこまで配信リクエストが多くなければ無料で使えるぜ』って感じで理解すれば良い。

ブログで5GB以上の画像ファイルとすれば、かなり大規模なメディアになるはずだ。基本的にほぼ無料で利用できると思って良いだろう。

導入

では、GCSの導入方法を解説していく。

Googleアカウントにログインした状態で、このURLから「登録する」か「コンソール」に移動しておく。

GCSの設定

プロジェクトの作成

ヘッダーの『Google Cloud Platform』と記載された横のタブ(『プロジェクトの選択』)をクリックした後、『新しいプロジェクト』をクリックする。

Google Cloud Storage

プロジェクト名を識別できるように記入し、組織と場所を選択する。

Google Cloud Storage

ヘッダーの『?』部分が通知エリア。通知エリアへ、↓のようにプロジェクトが完成した事を伝える表示がされたらOK。

Google Cloud Storage

プロジェクトに移動

『プロジェクトの選択』をクリックする。

Google Cloud Storage

先程作成したプロジェクトを選択する。時系列順でリスト化されているので、一番上にあるはずだ。

Google Cloud Storage

Stogageの設定

左にあるハンバーガーメニューをクリック、『Stogage』へ移動する。対象は、『ブラウザ』でOK。

Google Cloud Storage

バケット(保存する場所)を作成するため、『バケットを作成』をクリックする。

Google Cloud Storage

バケットを識別する名前を付け、ロケーションを選択する。これは、無料枠で設定するため『オレゴン州』を指定していおこう。

Google Cloud Storage

ストレージクラスやアクセス制御はデフォルトのまま、案内に従う。

Google Cloud Storage

『作成』をクリックすると、バケットが無事に作成される。

Google Cloud Storage

権限を追加

閲覧権限を付与するため、バケットリストに移動して一番右にある『︙』をクリックする。

Google Cloud Storage

『バケットの権限を編集』をクリック。

Google Cloud Storage

『メンバーを追加』をクリックする。

Google Cloud Storage

『allUsers』を指定する。

Google Cloud Storage

ファイルにアクセスしてきたユーザーは閲覧できる必要があるので、役割に『ストレージオブジェクト閲覧者』を指定する。

Google Cloud Storage

allUsersが閲覧者になっていることを確認できる。

Google Cloud Storage

WordPress側の設定

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

プラグインの新規追加から、『WP-Stateless』を検索しインストールする。

WP-Stateless

有効化する。

WP-Stateless

WP-Statelessの設定

GCSを利用する対象のGoogleアカウントにログインしていく。『Begin Setup Assistant』をクリックする。

WP-Stateless

Googleにログインする。

WP-Stateless

ログインすると、先程作成したプロジェクトが表示される。そのまま、案内に従おう。

WP-Stateless

すべて自分の情報であることを確認でいたら、『Continue』をクリックする。

WP-Stateless

『Bilding』と表示され、各種設定が自動で行われる。通常、GCSはJSONファイルを指定ディレクトリに置いて認証させるのだが、WP-Statelessではクリックだけで出来てしまうのが、楽すぎてヤバい。

WP-Stateless

完了すると、『Upload Something!』 というボタンが表示され、メディアファイルをアップロードできるようになる。

WP-Stateless

試しに何か画像をアップロードしてみよう。

WP-Stateless

URLの部分を見てもらうと、GCSから配信されていることがわかる。

WP-Stateless

各種設定を行うため、『メディア』⇒『Stateless Setting』に移動する。

WP-Stateless

メディアファイルの配信方法やバケット、

WP-Stateless

キャッシュレベル、独自ドメインなども設定が可能。配信方法は、『CDN』を選択すればよいだろう。

WP-Stateless

ドメインと紐付ける場合、CNAMEによる設定が必要になる。GCSファイルからの配信は自動でSSL化されているものの、独自ドメインで配信する場合はSSL化されないので、自身で証明書を発行する必要がある。

Googleのドキュメントにしたがって、DNSの設定を行えば良い。

Cloudflareの場合、DNSレコードへ登録すれば自動的に無料のSSL証明書(SNI)を発行してくれる。

既存のメディアをGCSと同期

既に、「/wp-content/uploads/hogehoge.jpg」などとWordpressが構築されたサーバーから配信されているメディアファイルをGCSと同期させ、GCSから配信させる。

『Sync』タブに移動し、『Run』をクリックするだけで同期されるので非常に簡単だ。ファイルの数と容量によってはある程度時間がかかるので、コーヒーでも飲みながら休憩しよう☕️ 📖

WP-Stateless

同期中の様子 📲

WP-Stateless

すべて同期されると、『Status: Finished』と表示される。

WP-Stateless

では、実際にメディアファイルのURLはどう変化しているのだろうか。

既存↓

WP-Stateless
同期前のメディアファイル。

同期後↓

WP-Stateless
同期後はファイルのURLはGCSの物に変更されている。

まとめ

これまで、サーバー環境の負荷やストレージ容量が気になっていた方は、WP-Statelessを利用することで簡単にGoogle Cloud Storageからメディアファイルを配信できるようになる。

メディアファイルは静的であり変化しないことから、ウェブサーバーから配信しなくても良い。

多少のお金はアクセス数に従ってかかるものの、

  • ウェブサーバーの負荷軽減
  • 表示速度の高速化

といった点を考慮すれば、オブジェクトストレージを利用するのは良い選択肢と言える。

筆者のブログはチューニング環境であるKusanagiで、かつ画像を自動圧縮かけているのでまだマシだが、いずれ『WP Offload Media』のプロバージョンを利用する予定だ。

本記事が参考になれば幸いである。

You May Also Like
続きを読む

【初心者向け決定版】WordPressブログの始め方。ドメイン、サーバー、記事、テーマ、プラグイン、アナリティクスまで全部

本記事では、ゴチャゴチャと長いことを書かず、端的にWordpressでブログやウェブサイトを公開する方法を解説していく。 長い記事を見てもよく分からんという方には、最適な記事になっているはずだ。 それは、この記事ではブロ…
続きを読む

月$3.5〜のAWS Amazon Lightsailで独自ドメイン&SSL化されたWordPressを構築してみた、中規模なコーポレートサイトやブログにオススメ

ロリポップで契約していたウェブサイトの動作が遅すぎたので、サーバーを移行しようと考えていた。小規模なウェブサイトであったし、VPSや新規にレンタルサーバーを契約するほどでもない。 そんな時、月$3.5から利用できるAWS…