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』と記載された横のタブ（『プロジェクトの選択』）をクリックした後、『新しいプロジェクト』をクリックする。
プロジェクト名を識別できるように記入し、組織と場所を選択する。
ヘッダーの『？』部分が通知エリア。通知エリアへ、↓のようにプロジェクトが完成した事を伝える表示がされたらOK。
プロジェクトに移動
『プロジェクトの選択』をクリックする。
先程作成したプロジェクトを選択する。時系列順でリスト化されているので、一番上にあるはずだ。
Stogageの設定
左にあるハンバーガーメニューをクリック、『Stogage』へ移動する。対象は、『ブラウザ』でOK。
バケット（保存する場所）を作成するため、『バケットを作成』をクリックする。
バケットを識別する名前を付け、ロケーションを選択する。これは、無料枠で設定するため『オレゴン州』を指定していおこう。
ストレージクラスやアクセス制御はデフォルトのまま、案内に従う。
『作成』をクリックすると、バケットが無事に作成される。
権限を追加
閲覧権限を付与するため、バケットリストに移動して一番右にある『︙』をクリックする。
『バケットの権限を編集』をクリック。
『メンバーを追加』をクリックする。
『allUsers』を指定する。
ファイルにアクセスしてきたユーザーは閲覧できる必要があるので、役割に『ストレージオブジェクト閲覧者』を指定する。
allUsersが閲覧者になっていることを確認できる。
WordPress側の設定
プラグインのインストール
プラグインの新規追加から、『WP-Stateless』を検索しインストールする。
有効化する。
WP-Statelessの設定
GCSを利用する対象のGoogleアカウントにログインしていく。『Begin Setup Assistant』をクリックする。
Googleにログインする。
ログインすると、先程作成したプロジェクトが表示される。そのまま、案内に従おう。
すべて自分の情報であることを確認でいたら、『Continue』をクリックする。
『Bilding』と表示され、各種設定が自動で行われる。通常、GCSはJSONファイルを指定ディレクトリに置いて認証させるのだが、WP-Statelessではクリックだけで出来てしまうのが、楽すぎてヤバい。
完了すると、『Upload Something!』 というボタンが表示され、メディアファイルをアップロードできるようになる。
試しに何か画像をアップロードしてみよう。
URLの部分を見てもらうと、GCSから配信されていることがわかる。
各種設定を行うため、『メディア』⇒『Stateless Setting』に移動する。
メディアファイルの配信方法やバケット、
キャッシュレベル、独自ドメインなども設定が可能。配信方法は、『CDN』を選択すればよいだろう。
ドメインと紐付ける場合、CNAMEによる設定が必要になる。GCSファイルからの配信は自動でSSL化されているものの、独自ドメインで配信する場合はSSL化されないので、自身で証明書を発行する必要がある。
Googleのドキュメントにしたがって、DNSの設定を行えば良い。
Cloudflareの場合、DNSレコードへ登録すれば自動的に無料のSSL証明書（SNI）を発行してくれる。
既存のメディアをGCSと同期
既に、「/wp-content/uploads/hogehoge.jpg」などとWordpressが構築されたサーバーから配信されているメディアファイルをGCSと同期させ、GCSから配信させる。
『Sync』タブに移動し、『Run』をクリックするだけで同期されるので非常に簡単だ。ファイルの数と容量によってはある程度時間がかかるので、コーヒーでも飲みながら休憩しよう☕️ 📖
同期中の様子 📲
すべて同期されると、『Status: Finished』と表示される。
では、実際にメディアファイルのURLはどう変化しているのだろうか。
既存↓
同期後↓
まとめ
これまで、サーバー環境の負荷やストレージ容量が気になっていた方は、WP-Statelessを利用することで簡単にGoogle Cloud Storageからメディアファイルを配信できるようになる。
メディアファイルは静的であり変化しないことから、ウェブサーバーから配信しなくても良い。
多少のお金はアクセス数に従ってかかるものの、
- ウェブサーバーの負荷軽減
- 表示速度の高速化
といった点を考慮すれば、オブジェクトストレージを利用するのは良い選択肢と言える。
筆者のブログはチューニング環境であるKusanagiで、かつ画像を自動圧縮かけているのでまだマシだが、いずれ『WP Offload Media』のプロバージョンを利用する予定だ。
本記事が参考になれば幸いである。