WordPressのメディアをGoogle Cloud Storageへ引っ越してみた
Google Cloud Storage(以降GCS)はGoogleが提供する、オンラインデータストレージサービスです。
AWSでいうところのS3ですね。
前置き
WordPressでは、画像をアップロードする際何も設定しないとインストールされているサーバへ画像をアップロードします。
それはそれで、シンプルな挙動でわかりやすいのですが、以下のような致命的なデメリットも存在します。
- アプリケーションサーバのハードディスクを圧迫する
- アプリケーションサーバの回線帯域を浪費する
これを回避するために、メディアサーバとしてGCSを用意して既存の画像を移動してみました。
GCSの基本的な導入および、設定はrevdev.workさまのこちらの記事を参考にすすめました。
とてもまとまっていてわかりやすかったです、ありがとうございます。
開発環境について
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へ置き換わってくれます、最高です。
ひとつだけつまったのが、WP-Statelessで設定するcredentialの権限は、ストレージの管理者で設定します。
この辺り、ググったら出てくる紹介youtubeのIAMも結構古いのでもしかしたら詰まる部分かもしれません。
設定がうまくできたら、syncタブの一番上を選んでsyncします。
完了したらサイトを確認してみて、無事にGCSへ書き換わっていることを確認します。
canvasのCORS問題
画像は無事にGCSへ読みに言っているものの、なぜかCORSでのerrorがでてしまいました。
結論これは、GCSのresponse headerをきちんと設定しないままAjaxで画像を取りに行った場合おきてしまう問題でした。
クロスオリジンでのリクエストを許可する
クロスオリジンで呼び出されるサーバの実装が CORS を考慮していないレスポンスを返した場合、ユーザエージェントが正しいレスポンスを受信しているにも関わら>ず Ajax の呼び出しは失敗します。具体的には Chrome ディベロッパーツールの Status が (canceled)、レスポンス詳細も provisional headers are shown となります。>これは通信エラーと同等の扱いですので complete のイベントは呼び出されずデータも渡されません。出典: Präparat Blogさま
// cdn.json [ { "origin": ["*"], "method": ["*"] } ]
$ gsutil cors set cdn.json gs://my_bucket $ gsutil cors get gs://my_bucket
余談ですが、これにめちゃくちゃはまってしまいました、、
というのも、cdnな環境なことをすっかり忘れていて設定しても全く反映されないので違う部分、具体的にはimgのcrossOrigin設定まわりを疑ってなんどもtry&errorを重ねてしまいました。
画像単体でのresponseしっかりみましょうというところでしょうか。
以後気をつけたいと思います。
WP-Stateless最高でした
こんな感じで、思っていたよりあっさり?移行できてしまうので、シングル環境でパフォーマンスに悩んだ場合、是非検討してみてはいかがでしょうか。
マイグレーションも積み重ねが大事かなと思っています。
*1:自分の環境だと、4倍程度早かったです