[WordPress] メディアのアップロード先をGoogle Cloud Storageにする（URLは独自ドメインで）

なんで、Google Cloud Storage?

WordPressでメディアのクラウドストレージ利用というと、AWSのS3が定番です。

今回、あえてGoogle Cloud Storageを使った理由をあげていくと、、、

本当に無料で運用できる

S3でもほぼ無料みたいな価格で使えるのですが、Google Cloud Storageは無料枠がしっかり設定されているので、本当に0円で配信ができてしまうのがうれしいところです。

Cloud Storage
高い性能、信頼性、手頃な料金体系で、あらゆるストレージ要件に対応
5 GB の Regional Storage（期間合計、米国リージョンのみ）
5000 回のクラス A オペレーション（1 か月あたり）
50000 回のクラス B オペレーション（1 か月あたり）
1 GB の北米から全リージョン宛て下りネットワーク（1 か月あたり、中国およびオーストラリアを除く）
Google Cloud Platform の無料階層 Always Free の使用制限

個人的には、サーバー費用は1円でも「リアルタイム処理が必要なサーバー」にかけたい主義なので、この点がGoogle Cloud Storageを採用した大きな理由の一つでした。

Google Cloud Platformでの作業

さて、ここからは実際の設定です。

最初に、Google Cloud Platform（以下、GCP）で作業を進めます。

GCPでバケットの作成&設定

まずは、Google Cloud Storageでバケットを作ります。

今回は、cdn.revdev.workというドメインで使いたいので、Google Cloud Storageのバケット名は「cdn.revdev.work」とします。この際、GCPのアカウントにドメインのオーナーが紐付いている必要があります。

リージョンはどこでもいいのですが、米国リージョンだと5GBまで無料なので、米国リージョンがおすすめです。

IAMと管理でサービスアカウントのCredentialを設定

続いて、Google Cloud StorageをWordPressから操作するための権限を設定します。

メニュから、IAM > サービスアカウントと進んで、サービスアカウントの作成をします。

サービスアカウント名 -> 任意
役割 -> ストレージの「ストレージオブジェクトの作成者」を選択
新しい秘密鍵の提供 -> チェック
G Suite ドメイン全体の委任を有効にする -> Noチェック

で作成すると、json形式のCredentialファイルがダウンロードできます。Credentialファイルは後で使います。

Credentialファイルは重要な情報なので、流出しないように管理する必要があります。個人的には、設定が終わったら削除すると良いと思います。

CloudFlareでの作業

続いて、cdn.revdev.workというドメインでコンテンツを配信するための設定をします。

Google Cloud StorageのURLのままで良い方は読み飛ばしてください。

CloudFlare経由でSSLにする

Google Cloud StorageはSSLに対応していないので、CloudFlareを経由させてSSL化させます。GCPのロードバランサを使うのが正攻法ですが、Always Free枠にロードバランサが入っていないので、CloudFlareを使いました。

この方法、Googleのトラブルシューティングに掲載されているやり方だったりもします。

HTTPS では https://storage.googleapis.com/my-bucket/my-object のようなダイレクト URI を使用してコンテンツを提供できますが、CNAME リダイレクトを使用して静的なウェブサイトをホストするときに Cloud Storage でサポートされるのは HTTP のみです。SSL 経由でカスタムドメインを使用してコンテンツを提供するには、ロードバランサを設定するか、Cloud Storage と一緒にサードパーティのコンテンツ配信ネットワークを使用するか、または Google Cloud Storage の代わりに Firebase Hosting から静的ウェブサイトのコンテンツを提供します。
HTTPS を介してコンテンツを提供したい

ただし、CloudFlareを使う場合、「ユーザー -> CloudFlare上のキャッシュ」はHTTPS通信ですが、「CloudFlare -> Google Cloud Storage」の通信は普通のHTTPになるので、個人情報などを含むデータは置かないほうが良さそうです。

CNAMEをGoogle Cloud Storageに向ける

CNAMEの設定は、Googleの公式ドキュメントの通りcdn.revdev.workに対して、CNAMEでc.storage.googleapis.comに向けます。

c.storage.googleapis.com. を指す CNAME エイリアスを作成します。
CNAME エイリアスは、カスタムドメイン URL を使用した Cloud Storage のバケット、オブジェクトなどのリソースにアクセスするために所有しているドメインから URL を使用できるようにする DNS レコードです。たとえば、www.example.com の場合、CNAME レコードに次の情報を含めることができます。
NAME TYPE DATA
www.example.com CNAME c.storage.googleapis.com.
CNAME エイリアスの作成

CloudFlare上の設定はこんな感じです。

クラウドマークをオンにしないとCloudFlareのキャッシュがされないので、HTTPS化もされないなので、必ずチェックを入れます。

WordPressでの作業

さて、ようやくWordPress側の設定です。

Media Cloudプラグインをインストール

今回は、Media Cloudというプラグインを使いました。

いろいろトライしたんですが、最終的に行き着いたのが、このプラグインでした。紆余曲折は記事の最後で。。。

プラグインをインストールしたら、Media CLoudメニューから設定をしていきます。

Enabled/disable toolsの設定

StorageをオンにすればOKです。その他のメニューはご自由にどうぞ。

Storage Providerの設定

Google CLoud Storageを選択します。Credentialsには、先ほどダウンロードしたCredentialsの中身をコピペします。あとは、Bucket名を入力します。

設定画面の注意書きを読む限り、.envファイルを用意すれば外部ファイルでもいけるようなので、セキュリティ的には外部ファイルをDocument Root外で管理したほうが良さそうです。こちらは、機会を見てトライしてみます。

このままだと、WordPressからメディアをアップロードした際に、Google Cloud StorageのURLで登録されてしまうので、少し下にスクロールしてCDN SETTINGSのCDN Base URLに独自ドメインを入力しておきます。

この設定を入れることで、WordPressに登録されるメディアのURLが独自ドメインのURLになります。

その他、生成するディレクトリ構成やキャッシュの時間なども設定ができます。

これで、設定完了です！

アップロードテスト

設定が終わったので、WordPressのメディアメニューからアップロードをしてみます。エラーがでなければアップロード完了です。

アップロードしたメディアを確認すると、きちんと配信URLもcdn.revdev.workになっていました。

Google Cloud Storage側でもアップロードが確認できます。

[おまけ] トライしてやめたプラグイン

Google Cloud Storage plugin

やっぱりGoogle製のやつがいいよね！ということで最初にトライしたのですが、何回やっても、GCS側でどんな権限設定をしても

Uncaught Google\Cloud\Core\Exception\GoogleException: No project ID

というエラーが出てしまってうまくいきませんでした。

軽くソースコードを読んでみたんですが、多分Credentialファイルの読み込みに失敗しているようでした。自分で修正する方法も考えましたが、プラグインを構成するファイル数が多すぎて断念しました。。。

WP-Stateless – Google Cloud Storage

こちらはデザインも綺麗でウィザードまで付いているいい感じのプラグインなんですが、Googleアカウントでログインして、よくわかんないサイトにGCPの情報を渡す感じになってたので、やめました。

Google CLoud Storageを使って、独自ドメインで静的コンテンツを配信する設定をしてみました。

文章にすると長いですが、慣れればサクッと5分くらいで終わる作業なので、ぜひトライしてみてください！