【WP-Stateless 設定編】WordPres の画像をGoogle Clould Storage へ移行/バックアップ

前フェーズでは「Cloudflare を使ったWebサイトを高速化」を行いました。
今回は WordPress のメディアを Google Cloud Storage（GCS）に格納/バックアップの設定を行います。

現在の設定では WordPress でアップロードしたメディアファイルは VM インスタンスの永続ディスク（HDD）30 GB に格納されます。VM の HDD ではなく、指定した GCS に保存されるようにするため、WordPress プラグイン「WP-Stateless – Google Cloud Storage」を利用します。

GCS バケットを作成する

GCS コンソールにアクセスし、
左上のメニュー [≡] から [ストレージ：Cloud Storage > ブラウザ] をクリックします。

上部の [バケットを作成] をクリックし、無料プログラムに沿った次の内容に変更して [作成] をクリックします。

データの保存場所の選択
- ロケーション: us-east1 、us-west1、us-central1 のどれかを選択
- ロケーションタイプ: Region
データのデフォルトのストレージクラスを選択する
- デフォルトのストレージクラス: Standard

Webサイトを閲覧しているユーザーが画像が見れるように GCS バケットの権限を一般公開へと変更します。
バケットを作成後、タブ [権限] を選択して [追加] をクリックします。
次のプリンシパルにロールを追加して [保存] をクリックします。

新しいプリンシパル：allUsers
ロール：Storage オブジェクト閲覧者

サイトのメディアが誰でも見れるように [一般公開アクセスを許可] をクリックします。

WP-Stateless をインストールする

Wordpres 管理コンソールに移り、プラグインから「新規追加」をクリックします。
「WP-Stateless – Google Cloud Storage」をインストールし、[有効化] します。

[WordPress] WP-Stateless – Google Cloud Storage をインストール

WP-Stateless を「有効化」を行い、先ほど作成した GCS バケットと紐付けを行います。
ここではマニュアル設定で作成した GCS バケットに設定するために [Manual Setup] をクリックします。

※ Automated Setup からでも作成した GCS バケットに接続することができます。

[Longin with Google] をクリックして GCP プロジェクト権限を持っているアカウントを選択して WP-Stateless に権限を与えます。

各項目を作成したプロジェクト / Google Cloud Storage Bucket に変更します。

以上で「WP-Stateless のインストール」が完了し、WordPress でアップロードしたメディアが作成した GCS のバケットに格納されます。

GCS へのドメインの接続する

初期設定では、メディアファイルのドメインが「https://storage.googleapis.com/[BUCKET-NAME]/～～」になっています。
指定したドメインで表示するようにします。

Cloudflare にアクセスし、利用するサブドメインで CNAME レコードを作成します。

[DOMEIN]                   CNAME    c.storage.googleapis.com.

作成した CNAME に一致する名前の GCS バケットを作成します。

※ここでは storage の CNAME レコードで作成したので storage.4watcher365.dev という名前のバケットを作成します。

WordPress 管理コンソールにアクセスし、
左ナビゲーションのメディアから [Stateless Settings] をクリックします。
タブ [Settings] を選択し、Buckedt とドメインに作成した GCS バケット名に変更して [変更を保存] をクリックします。

以上で「GCS をドメイン名を使用」することができるようになりますが「http://〜〜」という表記になります。
GCS には SSL 証明書の発行機能がないためです。https://〜〜で使用するには Google Clould Load Balancing またはサードパーティーツールで SSL 証明書を付与することになります。

Cloudflare で GCS を https 化

GCS はSLL 証明書を発行していないため、http のみしかできませんが Cloudflare のネットワークサービスを利用して https 化を行います。

Cloudflare にアクセスし、タブ [SSL/TLS] に移動します。
暗号化モードを [フル] に変更します。

Cloudflare ネットワークを介して http://storage.4watcher365.dev からhttps://storage.4watcher365.dev に変更されます。

WP-Stateless の設定

メディアをGoogle Cloud Storage に移動

インスタンス内にあるメディアライブラリの全てのファイルを GCS と同期します。

タブ [Sync]を選択し、[Regenerate all stateless images and synchronize Google Storage with local server] を選択して [Run] をクリックします。

VMインスタンスマシンタイプを「f1-micro（1 vCPU、614M メモリ）」のままだと処理が貧弱でメディアが大量または容量が多い場合、処理に時間がかかります。

GCS だけにメディアを保存させる

アップロードしたメディアはインスタンスにメディアを保存せず、GCS だけに保存を行うように設定します。

タブ [Settings] を選択し、[Stateless] に変更して [変更を保存] をクリックします。

メディアがアップロード動作が行え、メディアが表示されている動作確認を行います。

VMインスタンスに格納されているメディアを削除

WordPress でアップロードしたメディアファイルが VM に残っているため、インスタントのメディアを削除します

SSH 接続を行い、ターミナルを起動させます。
メディアファイルが格納されているディレクトリに移動し、ディレクトリ内のファイルを確認するために次のコマンドを入力します。

cd /var/www/html/wp-content/uploads/
ls

ターミナル：WordPress メディアディレクトリに移動し、ファイルを確認 — フォルダ「2019」があるのが確認できる。

作成されていた 2019 ディレクトリを削除し、ディレクトリに何もないことを確認するために次のコマンドを入力します。

cd
sudo rm -r /var/www/html/wp-content/uploads/*
cd /var/www/html/wp-content/uploads/
ls

VM に格納されていたメディアファイルは削除されました。

まとめ

これは運用の話になるのですが、
Always Freeプログラムでは GCE のHDD 30 GB に対し、GCS は5Gしかありません。5 GBを超えた場合は超えた分の料金が発生してしまいます。
また、VM インスタンスのHDD が圧迫してない状態であれば、同じ環境内でファイルを読み出しする方が表示速度は速いです。
どういう運用するかだと思います。

マシンタイプ「f1-micro 」は The 貧弱マシンタイプです。
私はアクセス数の増加や内部処理が発生したときに負荷を軽減させるため、VM インスタンス内には極力メディアは置かず、GCS に格納するようにしています。
このメディアも WordPress プラグインを使用して、出来る限り軽量化しております。

全記事

後日編