1. 第23回 【WordPress】 プラグイン WP-StatelessとGCSを連携させ、メディアファイルをGCSから配信させる方法
環境:Debian 9 php 7.0 Apache 2.4.25 MySQL 5.7 Cocoon
目的:「WordPress」のメディアを「Google Cloud Storage」から配信する
「WP-Stateless」はWordPressのメディアファイルを「Google Cloud Storage」から配信できるようになるプラグインです。WordPressを利用している方なら、皆さんこぞって上位検索。
「WordPress本体」と「Google Cloud Storage」を分けて配信できるので、WordPressが軽快に動作することは間違いありません。
今回は、「第23回」の部分です。
なんで「WP-Stateless」なのか
他にも「Google Cloud Storage」と連携するプラグインはありますが、何故かうまく設定できません。それは、私がWordPressを利用し始めて間もないからだったとも思います。さらに「Google公式プラグイン」は更新もされず放置状態です。
決め手となったのはこのあたりですかね。
- 「Google Cloud Storage」からメディアファイルを配信できる。
- 「Googleが推奨しているWebPファイル」を配信できる。
- 「WebPファイル」に非対応ブラウザには従来の「jpgやpng」で配信できる。
- WordPressWP-Stateless
インストール、有効化。
- WordPressWP-Stateless
設定
- WordPressEWWW Image Optimizer
WebP設定
- WordPressWP-Stateless
既存のメディアファイルを「Google Cloud Storage」へ
1.1 WP-Stateless インストール
- 「WordPress管理画面」「プラグイン」「新規追加」で「WP-Stateless」を検索します。
1.2 WP-Stateless 有効化
- 「有効化」します。
1.3 WP-Stateless 設定
- 「WordPress管理画面」「メディア」「Stateless Settings」をクリックしてします。
- 「Begin Setup Assistant」をクリックして、次へ進みます。
1.4 Google Login
- 「Google Login」をクリックして、次へ進みます。
1.5 アカウントの選択
- 「GCP」のプロジェクトを作成した「Googleアカウント」を選択します。
1.6 プロジェクトの選択
- 「Googleアカウント」を選択すると「WP-Stateless」の設定に戻ります。
- 初期設定では「GCPで新たにプロジェクトを作成する」ように促されますが、既存のプロジェクトでの設定をしたいので、矢印部分をクリックして、次へ進みます。
1.7 既存のプロジェクトを選択
- 上記画面「Google Cloud Project」の欄をクリックすると、プルダウンで矢印の部分、既存のプロジェクトが出てきますので、こちらをクリックして選択します。
1.8 バケットの選択
- 初期設定では「GCPで新たにバケットを作成する」ように促されますが、既存のプロジェクトで作成したバケットで設定したいので、矢印部分をクリックして、次へ進みます。
1.9 「Responsive Menu」との兼ね合い
- 上記画面「Google Cloud Bucket」の欄をクリックすると、プルダウンで矢印の部分、既存のプロジェクトで作成したバケットが出てきますので、こちらをクリックして選択します。
1.10 レイアウトが崩れる問題
- 「アジア太平洋のマルチリージョン」で設定したので、下記のように「Asia Pacific (asia)」と自動的に表示されます。右側の「✔」になると確認が完了したことになります。
- 下の赤枠「Google Cloud Billing」は「プロジェクトの請求ID」が表示されています。右側の「✔」になると確認が完了したことになります。
- 下記画面で2つの確認が完了したら、「Continue」をクリックして、次へ進みます。
1.11 今はなんにもアップロードしません。
- 単純にクリックして、次へ進みます。
- ここまでで「WP-Stateless」と「Google Cloud Storage」の連携する設定が完了しました。
1.12 EWWW Image Optimizer
- 画像圧縮系のプラグイン「EWWW Image Optimizer」との連携を有効にするかどうか聞かれますので「Enable Compatibility」をクリックします。
- 「WP-Stateless」と「EWWW Image Optimizer」の連携する設定の完了です。
1.13 上記画面で連携を有効化
- 上記画面で連携が有効化されると、表示は消えます。
- 通常はメディアファイルを管理するプラグインを導入していなければ、下記画面でファイルをアップロードしていくことになりますが、プラグイン「Media Library Folders for WordPress」を導入しているので、この画面からは利用しません。
- 「WP-Stateless」の詳細を設定するので、次へ進みます。
1.14 「Settings」タブの設定 上部
- 上記画面で見える「メディア」「Stateless Settings」をクリックしします。
- 「Settings」タブの設定です。
- 「CDN Copy media files to Google Storage and serve them directly from there.」を選択します。「WordPress本体」にメディアをアップロードすると、コピーを「Google Cloud Storage」にアップロードするようになります。
- 下赤枠の矢印部分の「File URL Replacement」で「Enable Editor & Meta」を選択します。「Google Cloud Storage」から配信できるようになります。
- 次へ進みます。
1.15 「Settings」タブの設定 中部
- 「Google Cloud Storage」から配信するファイルタイプの初期設定は下記画面になっています。
1.16 「WebP」を加える
- 「WebP」ファイルも「Google Cloud Storage」から配信されるように設定します。
1.17 Google Cloud Storage
- 「Google Cloud Storage」「Bucket」には「自分で作成したバケット名」を入力します。
「第22回 【WordPress】 GCP Google Cloud Storageのバケット作成と権限の設定方法」で作成した「バケット名」です。
- 「Bucket Folder」は「任意」です。下記「URL」の部分です。
「例、https://storage.googleapis.com/gcs.tohyo2020.org/media/polling2020_icon.png」
- 「WordPress本体」での「/wp-content/uploads/」の部分です。
- 「Service Account JSON」は、これまでの連携設定で自動で入力されています。
1.18 「Settings」タブの設定 下部
- 「キャッシュ」の設定は初期設定のままでいいと思いますが、自分で設定することも可能です。
- 「Delete GCS File」は「Enable」を選択します。
1.19 「ファイル URL」
- 「Preview」では、どのようなURLになるのかを見ながら設定できます。
- 「Domains」について、「投票2020」ではロードバランサーを利用していないので空欄のままにします。この部分の説明は長くなってしまうので「さいごに」の部分で触れようと思います。
- 「Cache-Busting」は「Disable」にします。
- 「変更を保存」をクリックして次へ進みます。
1.20 「WP-Stateless」設定完了
- 「Uploads and seve your WordPress media files from Google Cloud Storage」
WordPressのメディアファイルは「Google Cloud Storage」から配信と表示がされたら、「WP-Stateless」設定完了です。
- 「WP-Stateless」で「WebPファイル」を配信できるように設定したので、「EWWW Image Optimizer」で「WebPファイル」を作成できるように設定するので、次へ進みます。
1.21 「EWWW Image Optimizer」「WebP設定」
- 「EWWW Image Optimizer」の設定画面へ遷移します。
1.22 「WebP」タブ
- 「WebP Conversion」:「✔」します。
- 「WebPのURL」には、「Google Cloud Storage」から「実際に配信されるURL」を入力しますので、次へ進みます。
1.23 「WebPのURL」
- 私の場合、実際に配信されるURLが下記のようになっています。
「例、https://storage.googleapis.com/gcs.tohyo2020.org/media/polling2020_icon.png」
- 「WebPのURL」に入力するのは、ファイル名を除いた「メディアフォルダURL」です。
「例、https://storage.googleapis.com/gcs.tohyo2020.org/media/」
- 「変更を保存」して、次へ進みます。
1.24 リライトルールの選択肢
まず、上記画面の設定ですでに「JS WebP Rewriting」で「✔」が入ってしまっていますが、まだ「✔」していない前提で話を進めます。
上記画面で「変更を保存」すると「.htaccess」ファイルへ「リライトルールを挿入する」ように促されます。
この「リライトルール」は
「WebPファイル」対応ブラウザでは「WebPファイル」を、
「WebPファイル」非対応ブラウザでは「jpg、png」を、
判断してファイルを配信する設定です。
下記画面の右下矢印の「PNG」となっている場合は、設定ができていないことになります。
リライトルール設定の選択肢として、
- 下記画面左下の「リライトルールを挿入する」ボタンをクリックする。
- 「.htaccess」ファイルに赤枠内のコードを追記する。
- 上記画面の「JS WebP Rewriting」で「✔」を入れる。
いずれかの選択肢で設定が完了すると思います。
結論から言いますと、私の場合、「1と2」の両方とも設定ができませんでした。「3」の選択肢で設定が完了しました。
- 次へ進みます。
1.25 「JS WebP Rewriting」
- 下記画面に「JS WebP Rewriting」があります。これに「✔」を入れ変更を保存します。
下記注意書きが設定画面に書いてあります。
※「Apacheのリライトルールが機能しない場合、またはイメージがCDNから提供されている場合は、これを使用してください。」
1.26 「EWWW Image Optimizer」「WebP設定」完了
- 変更を保存した後「WebPタブ」で右下矢印部分が「緑色のWEBP」になっていれば、設定が完了したことになります。
- この設定が完了したことによって、「jpg、png」をWordPressへアップロードすると、圧縮画像が作成されますが、
それと同時に「jpg.webp」「png.webp」ファイルも作成され、「Google Cloud Storage」から配信されます。
- 次へ進みます。
1.27 「既存のメディアファイル」
- これまでアップロードしてきた既存のメディアファイルを「Google Cloud Storage」へアップロード(同期)します。
- 「WordPress管理画面」「メディア」「一括最適化」を念の為行ないます。
- 「WordPress管理画面」「メディア」「WP-Stateless」の順番にクリックします。
- 「Sync」タブ:
「Regenerate all stateless images and synchronize Google Storage with local server」を選択して「Run(may take a while)」をクリックして次へ進みます。
「Sync」タブ:
すべてのイメージを再生成し、「Google Cloud Storage」を「WordPressのローカルサーバーと同期します」を選択して「実行(少し時間がかかる場合がある)」をクリックして次へ進みます。
1.28 「Sync」同期させる
- 下記画面のように実行されていれば問題ありません。
- これですべての設定が完了です。
1.29 さいごに
- 途中で触れなかった部分です。
「投票2020」と「Tokyo2020 unofficial 非公式」は、
- 「投票2020」:ロードバランサーを利用せず
- 「Tokyo2020 unofficial 非公式」:ロードバランサーを利用
よって、下記のようにそれぞれにできることできないことに違いがあります。
なぜ「投票2020」ではロードバランサーを利用しないのか。
「さいごに」の部分なのに長いな。こんなの「さいごまで」読む人なんていんのかな。
【コメント】 ※「メールアドレス不要」