WordPressの画像をGoogle Cloud Storageに移動して独自ドメインでHTTPS化する

Google Cloud Storage(GCS)とかいう超便利なものをWordPressのプラグイン一発で使えると知って、勢いに任せてエイヤでやってみたら意外と簡単にできたのでそのときのメモ。

というわけで、先に断っておくけど自分向けの備忘録です。最近記憶力の低下が激しく、こうした記録を付けることの重要性を身に沁みて感じる今日この頃。

前提条件

  • サーバはGoogle Compute Engine
  • Google Search Consoleに登録済
  • SSL/HTTPS化はCloudFlareを利用

ちなみに以前の記事を知っている人は「CloudFlareやめたんじゃなかったのかよ」と思うかもしれないけど、今回訳あって再開した。理由は後述する。

CloudFlareでのSSL設定

前提で書いているので触れる必要はないかもしれないけど、まずはCloudFlareにてSSLを有効にする。基本的にCrypto設定のそれらしい項目をポチポチやっていけばいいんだけど、詳細書き出すと長くなるので別記事にまとめる。

CloudFlareの無料プランで個人サイトをHTTPS化する
Google Cloud Storage(GCS)記事の派生記事。これまでメインサイトはLet's Encryptを使用していたけど、GCSを独自ドメインかつCloudFlareのHTTPSで運用することにしたので、同じようにメインサイトも...

サブドメインの登録

次にGCSで使用するサブドメインをCNAMEレコードで登録する。うちの場合、CloudFlareにて以下の設定をした。基本的にName(サブドメイン)以外は共通だと思う。

TypeNameValue
CNAMEstoragec.storage.googleapis.com

GCSバケットの作成

続いてGCS上でバケットを作成する。このとき、バケット名は先ほど登録したサブドメイン名(うちの場合は「storage.yusukesakai.com」)にする。ただし、前提条件にも書いたけどGoogle Search Consoleでサブドメインまたは親ドメインが予め登録されていないと作成できないので注意。

また、バケット内の画像を他のユーザでも閲覧できるように、GCSの権限設定からストレージオブジェクトの閲覧者に「allUsers」を追加する。

「WP-Stateless」のインストール

GCSとWordPressの連携はWordPressプラグインの「WP-Stateless」を使う。これが今回の肝。ただインストールは簡単で、画面の案内に従ってGoogleと連携すれば、プルダウンから選ぶだけでGCSと接続できる。

インストール後、WP-StatelessのSettings画面にて以下の設定を行う。

  • Modeは「CDN」を選択
  • File URL Replacementは「Enable Editor & Meta」を選択
  • Domainに「https://」から始まるアドレスを設定

特に最後のやつが今回一番ハマったところ。画面のどこを見てもHTTPSに関するオプションがないし「HTTPSはサポートしてないよ」的な英文も書いてあるので、プラグインのコードを変更するか作り込むしかないかと半ば諦めかけてた。そしたら以下のQ&Aにやり方書いてあった。助かったー。

use SSL on custom domain
use SSL on custom domain Resolved yea73920 (@yea73920) 6 years, 11 months ago Hi, Is this plugin can support on SSL cust...

ちなみに上記設定をするとDomain設定の下に「This will require proxy/load balancer.」という説明文が表示されるが、これは現時点で「GCSが独自ドメイン単独ではHTTPSを使用できない」ことを意味する。

そのため、今回紹介するようにCloudFlareのようなCDNを利用するか、ロードバランサを経由(SSLの暗号・復号化をロードバランサ側で行う)しないと独自ドメインでHTTPSを使えない。

なお、独自ドメインを諦めてデフォルトのgoogleapis.comなら普通にHTTPS使える。特にこだわりがないなら全然これで良いと思う。

既存画像をGCSにアップロード(「WP-Stateless」使用)

既にサーバにある画像をGCSにアップロードする場合はWP-StatelessのSync画面にて操作する。

「Regenerate all stateless images and synchronize Google Storage with local server」にチェックした状態で「Run (may take a while)」ボタンを押せばOK。画像が多いorサーバのスペックが低いと少し時間かかるかもしれない。

記事のソースコード変更(「Search Regex」使用)

ここからは完全に蛇足。

既に作成・公開している記事内の画像リンクは、WP-StatelessでGCSのアドレスに勝手に動的置換してくれるので問題ない。でも「静的に完全に書き換えたい」という自分のような神経質な人はWordPressプラグインで一括置換すれば良い。置換できれば何でもOKだけど、今回は「Search Regex」を使用した。

上記設定で何も詰まるところなく終わったので細かい使い方は割愛する。めでたし。

おわりに

最後に費用について。基本的にGCEを永久無料のリージョンで使っていればGCSも無料。ただし、使用量が5GB/月を上回ると課金される。写真ブログでもないし、そんな使うことまずないと思うけど、詳細が気になる人は以下のリンクを参照。

料金  |  Cloud Storage  |  Google Cloud

というわけで、技術的な話はここまで。以降は余談です。

そもそもなんで独自ドメイン使ったのか

知的好奇心。

そもそもなんでHTTPS化したのか

以前HSTS化した際に、あまり考えなしに「includeSubDomains」を設定した。その結果、サブドメインも強制的にHTTPS化されるようになった。しかもキャッシュ時間を例にならって1年にしたので簡単には変更できない。要するに「HTTPSでないと繋がらないからそうせざるを得なかった」が理由。

そこで仕方なく、「GCSを独自ドメインで運用できて」「HTTPS化できて」「しかも無料」のCloudFlareに目をつけた。前回CloudFlareをやめたときは、何となく検索サイトからの流入が減った気がして(あとあまり速度的に改善がみられなかったので)使用中止したけど、最近はSNSからのアクセスが多いし、もう一度効果を検証したい気持ちもあったので使用再開してみた。

そもそもなんでGCS使うのか

いずれも一般的な話だけど、以下のメリットがあると思う。

  • GCEサーバへの負荷低減
  • リージョン最適化による速度向上
  • 画像ファイルの管理集約化

まあ現時点でそこまでトラフィックないだろうよと言われたらそれまでなんだけど、新しい技術に対する勉強と、いつ来るか分からないバズる将来に備えて、ということで。

タイトルとURLをコピーしました