WordPressのメディアをGoogle Cloud Storageへ引っ越してみた

Google Cloud Storage(以降GCS)Googleが提供する、オンラインデータストレージサービスです。
AWSでいうところのS3ですね。

前置き

WordPressでは、画像をアップロードする際何も設定しないとインストールされているサーバへ画像をアップロードします。
それはそれで、シンプルな挙動でわかりやすいのですが、以下のような致命的なデメリットも存在します。

これを回避するために、メディアサーバとしてGCSを用意して既存の画像を移動してみました。
GCSの基本的な導入および、設定はrevdev.workさまのこちらの記事を参考にすすめました。
とてもまとまっていてわかりやすかったです、ありがとうございます。

開発環境について

f:id:itaoyuta:20180606023017p:plain

GCS https利用できない問題

いきなりちょっとつらいところなのですが、GCSはhttpsでのホスティングを提供していません。
revdevさまを参考に、CloudFlareを利用することにしました。
CloudFlare、1.1.1.1で盛り上がってましたね、8.8.8.8よりすごい早くてすごいです*1

Media Cloudプラグインが500Error問題

一通りGCS側のバケット作成およびIAM作成を完了&CloucFlareの設定をした後、オススメの通りMedia Cloudプラグインをインストールしてみました。
が、GCSへの設定して適用してみたら500Errorがおきてしまいました、、
どういうエラーが起きたかちゃんと調べませんでしたがちょっと500はきついなと思って、改めてWordPress Google Cloud Storage Pluginを調べて見たところ、WP-StatelessというDLもそこそこ、アップデートも最近という良さそうなのを見つけたのでこちらを利用してみました。

WP-Stateless credentialのIAMはストレージ管理者

WP-StatelessはGoogle Cloud Storageへの設定することだけを提供している、とてもシンプルなプラグインです。
こんな感じで、cdnに設定した後syncすると既存の画像も全て設定したGCSへ置き換わってくれます、最高です。

f:id:itaoyuta:20180606022157p:plain

ひとつだけつまったのが、WP-Statelessで設定するcredentialの権限は、ストレージの管理者で設定します
この辺り、ググったら出てくる紹介youtubeのIAMも結構古いのでもしかしたら詰まる部分かもしれません。

f:id:itaoyuta:20180606080451p:plain

設定がうまくできたら、syncタブの一番上を選んでsyncします。

f:id:itaoyuta:20180606022210p:plain

完了したらサイトを確認してみて、無事にGCSへ書き換わっていることを確認します。

canvasのCORS問題

画像は無事にGCSへ読みに言っているものの、なぜかCORSでのerrorがでてしまいました。

f:id:itaoyuta:20180606025906p:plain

f:id:itaoyuta:20180606025915p:plain

結論これは、GCSのresponse headerをきちんと設定しないままAjaxで画像を取りに行った場合おきてしまう問題でした

クロスオリジンでのリクエストを許可する
クロスオリジンで呼び出されるサーバの実装が CORS を考慮していないレスポンスを返した場合、ユーザエージェントが正しいレスポンスを受信しているにも関わら>ず Ajax の呼び出しは失敗します。具体的には Chrome ディベロッパーツールの Status が (canceled)、レスポンス詳細も provisional headers are shown となります。>これは通信エラーと同等の扱いですので complete のイベントは呼び出されずデータも渡されません。

出典: Präparat Blogさま

gsutileから設定します。 参考1 参考2

// cdn.json

[
    {
      "origin": ["*"],
      "method": ["*"]
    }
]
$ gsutil cors set cdn.json gs://my_bucket
$ gsutil cors get gs://my_bucket

余談ですが、これにめちゃくちゃはまってしまいました、、
というのも、cdnな環境なことをすっかり忘れていて設定しても全く反映されないので違う部分、具体的にはimgのcrossOrigin設定まわりを疑ってなんどもtry&errorを重ねてしまいました。
画像単体でのresponseしっかりみましょうというところでしょうか。
以後気をつけたいと思います。

f:id:itaoyuta:20180606022402p:plain:w300

WP-Stateless最高でした

こんな感じで、思っていたよりあっさり?移行できてしまうので、シングル環境でパフォーマンスに悩んだ場合、是非検討してみてはいかがでしょうか。
マイグレーションも積み重ねが大事かなと思っています。

*1:自分の環境だと、4倍程度早かったです