プロ野球 アイドル 支持率：岸田内閣　国会議員　知事 政党 メディア　皇室結婚　秋篠宮　憲法9条　一覧

安倍元首相の国葬。あなたは賛成か、反対か。

第23回　【WordPress】　プラグイン　WP-StatelessとGCSを連携させ、メディアファイルをGCSから配信させる方法

WordPress GCP
2020.07.22

【PR】
Google Workspace（旧 G Suite）アカウントを作成するならこちら【10%割引クーポン】【プロモーションコード】を自動返信メールにより取得できます。初年度100人まで1つのコードで利用可能です。

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回」の部分です。

メディアファイル系
5回に分けて書きます
  • 気持ちいいほどに「メディアファイル」を管理することができるようになります。
  • 「WordPress」本体に負担をかけることなく、「Google Cloud Storage」から配信できるようになります。
  • 「PageSpeed Insights」の「次世代フォーマットでの画像の配信」「webp」ファイルで配信ができるようになります。

  • 第20回　WordPressプラグイン　「EWWW Image Optimizer」
  • 第21回　WordPressプラグイン　「Media Library Folders for WordPress」
  • 第22回　GCP　「Google Cloud Storage」のバケット作成と権限の設定方法
  • 第23回　WordPressプラグイン　「WP-Stateless」と「GCS」を連携させ、メディアファイルをGCSから配信させる方法
  • 第24回　今まで設定したメディアファイル連携やhttps設定を行うとどうなるか、ついでにサイトアイコン変更

なんで「WP-Stateless」なのか

他にも「Google Cloud Storage」と連携するプラグインはありますが、何故かうまく設定できません。それは、私がWordPressを利用し始めて間もないからだったとも思います。さらに「Google公式プラグイン」は更新もされず放置状態です。

決め手となったのはこのあたりですかね。

  • 「Google Cloud Storage」からメディアファイルを配信できる。
  • 「Googleが推奨しているWebPファイル」を配信できる。
  • 「WebPファイル」に非対応ブラウザには従来の「jpgやpng」で配信できる。
  • WordPress
    WP-Stateless

    インストール、有効化。

  • WordPress
    WP-Stateless

    設定

  • WordPress
    EWWW Image Optimizer

    WebP設定

  • WordPress
    WP-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」から配信されるように設定します。
注意点
  • 「WebP」を追加しないと、「WebP」ファイルは「WordPress本体」から配信されるようになってしまうので、忘れずに追加します。

1.17　Google Cloud Storage

  • 「WordPress本体」での「/wp-content/uploads/」の部分です。
  • 「Service Account JSON」は、これまでの連携設定で自動で入力されています。

1.18　「Settings」タブの設定　下部

  • 「キャッシュ」の設定は初期設定のままでいいと思いますが、自分で設定することも可能です。
  • 「Delete GCS File」は「Enable」を選択します。
注意点
  • 「Delete GCS File」で「Enable」すると、WordPress本体で操作して削除したファイルを「Google Cloud Storage」でも同様に削除する設定になります。
  • 「Delete GCS File」で「Enable」しないと、WordPress本体で操作して削除したファイルが「Google Cloud Storage」に残ってしまいます。

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」

  • 「WebPのURL」に入力するのは、ファイル名を除いた「メディアフォルダURL」です。

    「例、https://storage.googleapis.com/gcs.tohyo2020.org/media/」

  • 「変更を保存」して、次へ進みます。

1.24　リライトルールの選択肢

まず、上記画面の設定ですでに「JS WebP Rewriting」で「✔」が入ってしまっていますが、まだ「✔」していない前提で話を進めます。

上記画面で「変更を保存」すると「.htaccess」ファイルへ「リライトルールを挿入する」ように促されます。

この「リライトルール」は
「WebPファイル」対応ブラウザでは「WebPファイル」を、
「WebPファイル」非対応ブラウザでは「jpg、png」を、
判断してファイルを配信する設定です。

下記画面の右下矢印の「PNG」となっている場合は、設定ができていないことになります。

リライトルール設定の選択肢として、

  1. 下記画面左下の「リライトルールを挿入する」ボタンをクリックする。
  2. 「.htaccess」ファイルに赤枠内のコードを追記する。
  3. 上記画面の「JS WebP Rewriting」で「✔」を入れる。

いずれかの選択肢で設定が完了すると思います。

結論から言いますと、私の場合、「１と２」の両方とも設定ができませんでした。「３」の選択肢で設定が完了しました。

  • 次へ進みます。

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年7月時点の話です。

「Domains」この空欄の部分に

①「例、https://gcs.tohyo2020.org/media/」
②「例、https://tohyo2020.org/media/」
という設定はできないのか。

①の場合「Cloud flare」などを利用すると設定可能です。サイトアイコン（ファビコン）は「グレーの地球マーク」です。「完全な独自ドメイン」ではなく、サブドメインまで可能です。

②の場合「ロードバランサーを利用すると設定可能です。
「例、https://www.tokyo2020unofficial.com/media/sakura_2020.png」

Replace the default GCS domain with your own custom domain. This will require you to configure a CNAME. Be advised that the bucket name and domain name must match exactly, and HTTPS is not supported with a custom domain out of the box.

設定画面の注意書きには、

  • 「独自ドメイン」で配信するなら「CNAME」のレコードセットを利用する。
  • 「Google Cloud Storage」単体では「https」をサポートしない。


Google公式：CNAME リダイレクト

  • NAME：gcs.tohyo2020.org
  • TYPE：CNAME
  • DATA：c.storage.googleapis.com.

設定はできます。でも、

2020年7月時点では、CNAME転送でのSSL/TLS証明書は取得できません。

現時点では、ロードバランサーを利用しないと、独自ドメインでの配信はできないというのが結論です。

仮に、「https」で表示されても「保護されていません」になります。

「投票2020」と「Tokyo2020 unofficial 非公式」は、

  • 「投票2020」：ロードバランサーを利用せず
  • 「Tokyo2020 unofficial 非公式」：ロードバランサーを利用

よって、下記のようにそれぞれにできることできないことに違いがあります。

投票2020
  • GCPの「ロードバランサーを利用すると」

    「例、https://storage.googleapis.com/gcs.tohyo2020.org/media/polling2020_icon.png」の赤字部分がなくなり、

    「例、https://tohyo2020.org/media/polling2020_icon.png」

    というような「完全な独自ドメイン」で配信することが可能です。

Tokyo2020 unofficial 非公式
  • 「Tokyo2020 unofficial 非公式」では、この「完全な独自ドメイン」で配信しています。
    「例、https://www.tokyo2020unofficial.com/media/sakura_2020.png」
  • このファイルはサイトアイコン（ファビコン）に利用しているファイルです。「Google Cloud Storage」から配信していますが、サイトアイコンも「独自」で表示されています。
  • バケット名は「storage.tokyo2020unofficial.com」になっていて、下記URLでもアクセス可能です。
    「例、https://storage.tokyo2020unofficial.com/media/sakura_2020.png」

なぜ「投票2020」ではロードバランサーを利用しないのか。

現在と過去で目的が異なります
2020年12月時点

「コメント欄を超シンプル」に「匿名」で誰でも好きなように書いていい。としたかったから。

ロードバランサーでは「固定ページ」を「トップページ（フロントページ）」にすることができるようになっています。おそらく、Google側が対応したことによるものでしょう。

コメント欄はWordPress本体で運営しています。reCAPTCHA(v3)を利用して、セキュリティの担保もしています。ロードバランサーを利用すると、書かれたコメントが複数（自動収縮する）のサーバーに記録されるため、消えてしまうコメントが出てきてしまいます。

外部サーバーでコメント機能を利用すると考えた場合「DISCUS」あるいは「Facebookコメントプラグイン」を利用することが望ましいです。

両方とも利用したことがありますが、それぞれに特徴が異なります。「コメント欄を超シンプル」にすることはできないので「投票2020」では利用をしていません。

2020年11月時点（過去）

現在ではありません。

「固定ページ」を「トップページ」に設定したいからです。

ロードバランサーでは「固定ページ」を「トップページ（フロントページ）」にすると、サーバーエラーになってしまい私の手には負えません。

「さいごに」の部分なのに長いな。こんなの「さいごまで」読む人なんていんのかな。

次は、第24回です。

【コメント】 ※「メールアドレス不要」