第24回　【WordPress】　今まで設定したメディアファイル連携やhttps設定を行うとどうなるか、ついでにサイトアイコン変更

WordPress GCP

2021.03.152020.07.14

クリックできる目次

1.　第24回　【WordPress】　今まで設定したメディアファイル連携やhttps設定を行うとどうなるか、ついでにサイトアイコン変更

1.　第24回　【WordPress】　今まで設定したメディアファイル連携やhttps設定を行うとどうなるか、ついでにサイトアイコン変更

環境：Debian 9　php 7.0　Apache 2.4.25　MySQL 5.7　Cocoon

目的：WordPressのメディアファイルを管理する

第20回～第23回までの設定をするとどうなるか

第20回：画像圧縮

第21回：フォルダツリーで管理

第22回：「Google Cloud Storage」バケット作成

第23回：「Google Cloud Storage」から配信

結果

動画を作って「YouTube」に初めてアップロードしました。これで私も自称「YouTuber」です。

YouTube：
「WordPress」のメディアファイルを「Google Cloud Storage」から配信させる方法の動画です。（左クリックでポップアップ拡大表示）

色々なツールを組み合わせると思いもしないことが起きるものです。

ざっとした流れの説明です。

Windows エクスプローラーにあるメディアファイルをWordPressにアップロードしたい。

一つの「Windows エクスプローラーにあるメディアファイル」を「WordPress メディア管理」（「プラグイン Media Library Folders for WordPress」）へドラッグ&ドロップで「ファイル追加する。
自動的に「EWWW Image Optimizer」で何種類ものファイルが作成され圧縮される。WebPファイルの設定もしていれば、一つのファイルが20ファイル程に自動生成される。
この20種類ほどのファイルがは「WP-Stateless」と「GCS」を連携させて、自動的に「Google Cloud Platform に作成した Google Cloud Storage バケット」へ追加され「GCP の GCS」から自動配信される。
本来ならWordPress本体で配信のでサーバーへ負荷がかかります。GCSから配信ができるようにすることで、WordPress本体のサーバーへ負荷をかけることがなくなります。
2021年3月時点でWebサーバーは「Apache」ではなく「OpenLiteSpeed」を利用していますが「LiteSpeed Cache」というプラグインは利用していません。「LiteSpeed Cache」はメディアファイルを「LiteSpeed Cacheの側」で圧縮して、自分のWordPressに返却してきます。その圧縮されたファイルは「WP-Stateless」と「GCS」を連携させることはできません。「LiteSpeed Cache」は、圧縮にしても、連携にしても「鈍いという印象」です。
Webサーバーとしての「OpenLiteSpeed」はものすごく速いです。

今回は、「第24回」の部分です。

上記画面と同様にできていることが確認できれば、ここから先はすっ飛ばしてしまって構いません。失敗談とともに手順の流れを確認していきます。

メディアファイル系

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設定を行うとどうなるか、ついでにサイトアイコン変更

Windows
エクスプローラー
「jpg、png」ファイル
WordPress
メディア管理
WordPressへアップロード
WinSCP
「WordPress」の中
メディアファイル複数生成の確認
「WebP」ファイルの自動生成
GCP
Google Cloud Storage
WordPressのメディアファイルと同期

1.1　Google Cloud Storage

「GCP」「Storage」「ブラウザ」の順番でクリックします。

矢印の「バケット」をクリックして、次へ進みます。

1.2　アップロードしません

「WordPress」で連携する時、「Google Cloud Storage」には直接アップロードを行ないません。

1.3　メディアファイルのアップロード

「WordPress管理画面」「Media Library Folders」をクリック。

「Add File」をクリック。

「ファイルを選択」or「Drag & Drop」でアップロードを行ないます。

1.4　間違えないこと

「ロードバランサー」を利用している場合、設定が異なるので、メディアファイルをアップロードしても、表示されません。

下記画面のようにサムネイル画像が表示されない場合は「第20回」から設定を見直す必要があります。

だいたい間違って設定しているのは「WP-Stateless」設定「Settingタブ」「Domains」項目からです。

「間違う癖」は、人によって違いがあると思いますが、何度も間違えてしまう箇所は、皆同様に間違えてしまう箇所なんじゃないのかなと。

1.5　間違えてるかな？と、確認する時

下記画面、右下赤枠「間違えて設定されているURL」が「WP-Stateless」の「Settingsタブ」です。

無理やり「独自ドメイン」で配信しようとする時なんじゃないかと思います。私がそうだったからですけども。

1.6　上記画面のリンク

上記画面の「パーマリンク」のリンク部分をクリックすると、下記画面のように画像が表示されません。

どの設定が間違っているかわからない時には「う～～～ん」とうなる瞬間です。

1.7　「Tokyo2020 unofficial 非公式」

「Tokyo2020 unofficial 非公式」の設定と同様な感じなのになんでダメなんだろうと思いますが、根本的に設定が異なるということを、身にしみて分かります。

1.8　ロードバランサーを利用する時、しない時

「ロードバランサーを利用する時、「完全な独自ドメイン」で「Google Cloud Storage」から配信できます。

「ロードバランサーを利用しない時、「完全な独自ドメイン」で「Google Cloud Storage」から配信できません。

1.9　ハマってしまうのは

「ロードバランサーを利用する時、しない時」に、設定が異なるということに気づけないと、深みにハマっていきます。

設定は間違えていないはずなのに、、、と思います。

1.10　「PHP7.0」だから表示されないのか

ここから先は、「目次1.13」直前まで試行錯誤が続きます。

何度も設定していて振り返ると、

調子の良いときほど記録を取っている。それは外的に自慢したいから。

調子の悪いときほど記録を取っていない。これは、失敗談は恥ずかしいし、関係する仕事に直結するから、発信しないし、できない。

私には関係ない話なので、試行錯誤であっても記録として残していたものは公開していこうと思っています。

では、失敗談の試行錯誤に戻ります。

「PHP7.0」だからとか「PHP7.4」だからとか、全く関係ありませんでした。

ですが、次の画面で確認したように「PHP」のバージョンを疑っていました。

1.11　サイトヘルスでも確認

「WordPress管理画面」「ツール」「サイトヘルス」の順番でクリックすると下記画面の「サイトヘルスステータス」を確認できます。

1.12　結局は

「WP-Stateless」設定「Settingタブ」「Domains」の設定が間違っているんですよ。冒頭で書いたように。

正しく設定し直すと下記画面になります。

1.12.01　GIFファイル

上手く設定できたので「GIFファイル」を作成してアップロードしようとしました。

できませんでした。「サイトに重大なエラーがありました。」

1.12.02　メディアのアップロード

「WordPress管理画面」「メディアのアップロード」画面で、「最大アップロードサイズ」が「64MB」だったので「256MB」へ変更拡大しました。

なんで拡大したかというと、きちんと設定できた設定画面をGIFファイルで作成したら、100MB以上あったからです。

1.12.03　表示できない。

「再度アップロード」すると、

「サイトに重大なエラーがありました。」

1.12.04　メディアライブラリで確認

「WordPress管理画面」「メディア」「ライブラリ」画面で確認すると、確かに存在はしているものの、表示はされていません。

「Regenerate and Sync with GCS」をクリックしてもエラーになります。
通常は「再生成し、Google Cloud Storageと同期」しますが。しません、、、

1.12.05　「Google Cloud Storage」

上記画面「編集」をクリックすると、下記画面になり、その右下部分です。

「Google Cloud Storage」と連携していません。

そもそも「WordPress」のファイルサイズアップロード上限の条件は、満たしているものの「145MB」というファイルサイズが大きすぎると思い小さくしようとしました。

1.12.06　「今すぐ最適化！」

こんな文字が並んでいたらクリックしてみたくなります。

それで、クリックしてみました。

1.12.07　使用するAPI

「考え中」のマークのままで変わることはありません。

1時間程放置しても。

1.12.08　Google Cloud Storage

「Google Cloud Storage」の中身を確認すると、同期されていませんでした。

「WordPress本体」にはアップロードされていますが「Google Cloud Storage」には同期していない。

1.12.09　直接アップロードを試す

「WordPress」と「Google Cloud Storage」が同期しないのなら「直接」アップロードしてみたらどうなるんだよと思って、試してみたところ、の瞬間です。

1.12.10　直接アップロード

直接アップロードは完了します。

ですが、「埋め込みの画面表示」はされず「外部リンク」という扱いです。

やりたいことは、「画面スクロール時に表示したい。」です。

1.12.11　ファイルを再作成

「WordPress側」で「ファイルサイズの上限」を変更しても同期されないのなら、ファイルサイズ自体を小さくしないとダメなんだろうと思って、徐々に小さくしてみました。

1.12.12　WordPress本体の中身

「WordPress本体」にアップロードできているか、「WinSCP」で確認すると、

「大サイズ」「中サイズ」の両方ともできています。

できていないことは、「Google Cloud Storageに同期しない。」ということ。

最終的に「約20MB」の「GIFファイル」だと同期しました。きっちりとしたファイルサイズの制限はわかりませんが、「20MB」程度なら同期するということが分かりました。

非常に細かくいうと「Google Cloud Storage」に直接アップロードできる。でも、「WP-Stateless」では「Google Cloud Storage」と同期しない。ということは、
「Google Cloud Storage」が動機を受け付けない

ではなく、
「WP-Stateless」が同期する「ファイルサイズの上限を定義している」と思います。