アップロードした画像をオブジェクトストレージへ格納するためのプラグインの紹介です。この記事での検証環境は以下の通りです。

• Google Cloud Platform が提供するオブジェクトストレージ（Cloud Storage）に格納する
• WordPress 5.8 環境で動作テスト

オブジェクトストレージとは

オブジェクトストレージはデータを「オブジェクト」という単位で扱う記憶装置です。ディレクトリ構造で管理するファイルストレージとは異なり、データサイズやデータ数の保存制限がないため、大容量データの保存に適しています。

・・・というように書き始めると長くなってしまいますので外部サイトの説明記事にリンクします。

• オブジェクトストレージとは : 富士通
• https://www.fujitsu.com/jp/products/computing/storage/lib-f/tech/beginner/object-storage/

補足すると、大容量データの保存にも適しているという意味で、小容量データの保存でも全く問題はありません。

Google が提供する Cloud Storage や、Amazon Web Service が提供する Amazon S3 (Amazon Simple Storage Service) などが有名です。

何がしたいのか

このような構成を作りたいわけです。

まだこの構成だけだと本領発揮ではないのですが、とはいえこれだけでも以下のメリットがあります。

• WordPress 本体を運営しているサイトとは別に、ストレージに特化したサイトから画像データを配信できる。つまり、プログラムによる動的アプリケーション（WordPress）の負担と、画像配信に関するサーバーの負担を分離できる。
• 画像データが外部に保存されるのでデータの紛失対策としてとても強力。一般的にオブジェクトストレージは、何世代かの世代記録ができることも多い（世代バックアップ）。

この記事では、Cloud Storage を使うケースで説明します。

WordPress で Cloud Storage を使うための選択肢

Google Cloud Storage (GCS) 関連で人気そうなプラグインを 3 種類見繕いました。そのなかで今回は WP-Stateless プラグインと WP Offload Media Lite プラグインを実際に動かしてみます。

• WP-Stateless - Google Cloud Storage
• WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage
• Media Cloud for Amazon S3, Imgix, Google Cloud Storage, DigitalOcean Spaces and more

Google Cloud Storage (GCS) 事前準備

• Google Cloud Storage (GCS) に任意の名前のバケットを作成しておく
• バケットに対して全公開するための参照権限を設定しておく
• WordPress から Google Cloud Storage (GCS) に画像を格納するためのアカウント（サービスアカウント）を作成したうえで書き込み権限を設定しておく

この記事で求めるプラグイン要件

WebP フォーマット画像を自動生成するための EWWW Image Optimizer プラグインとの相性を重要視しています。

WP-Statelss と WP Offload Media Lite の比較

2022/01/17 時点の情報より、以下の通り整理できます。どちらのプラグインもメンテナンスは程よく行われており、将来的な懸念も今の所はなさそうな印象です。と言いつつ WP-Staeless は若干停滞気味かもしれません。

結論としては、 WordPress 5.8 で正常に動作しています。ただしバケットの作成で手間取りましたので後述します。

WP Offload Media Lite はフリーミアム提供ですので、高度な機能を使おうとすると有償になります。ただし格納する用途に限定すれば無料版でも問題なさそうでした。

PRO Upgrade with Email Support and More Features

• Upload existing Media Library to Amazon S3, DigitalOcean Spaces or Google Cloud Storage
• Control offloaded files from the Media Library
• Assets Pull addon – Serve your CSS, JS and fonts via CloudFront or another CDN

Why Upgrade to WP Offload Media? - Delicious Brains Inc

「WordPress へアップロードする既存のメディアをまとめて Cloud Storage にアップロードし直したい場合」については有償版機能になってしまうようなので、その点で困る人もいそうですね。無償と有償の機能差の詳細は上記のリンク先を参照してください。

なお WP-Stateless では同等機能が利用できます。

• 既存のファイルをアップロードする行為
• URL をリプレイスする行為

ここまでを見ると、（今回求めているシンプルな使い方においては）極めてどちらが優位ということはなさそうです。

EWWW Image Optimizer プラグインへの対応

アップロード画像を WebP 変換したかったため、EWWW Image Optimizer プラグインとの組み合わせ動作は欠かせないものでした。結論としては、WP-Stateless プラグイン および WP Offload Media Lite プラグインいずれにおいても EWWW Image Optimizer プラグインが期待通りに動いてくれました。

そんな中、WP-Statelss は EWWW Image Optimizer をオフィシャルでサポートしている点も捨てがたいです。この図のように、WP-Stateless が EWWW Image Optimizer の有効化を検知すると警告を出して、「互換性を有効化するか」という問いかけをしてくれます。

WP-Stateless のセットアップ

手動セットアップ手順 https://wp-stateless.github.io/docs/manual-setup/

• Google Cloud Platform を使えるようにします（まだの人）
• Google Cloud Project を作成します
• Cloud Storage で バケット を作成します
• Google Cloud で サービスアカウント（Service Account）を作成します
• WP-Stateless プラグインを設定します

プラグインを有効化すると「メディア」欄に設定が表示されます。この画像は既にセットアップ済みですが、まだセットアップしていない場合は自動セットアップに関する項目も出てきます。これは、インターネットに接続されている環境の場合には OAuth を使って（？）自動的に Clous Storage との連携をセットアップできるようです。私は開発環境（localhost）で試してからの本番サイト構築だったため、手順を流用する都合で手動セットアップを採用しただけです。自動の方が手っ取り早いと思います。

Cloud Storage の設定

設定の要約

• Cloud Storage のバケットを任意の名前で作成しておく
• Cloud Storage バケットに一般公開の権限設定をしておく。 allUsers に対しては ストレージのレガシーオブジェクト読み取り 権限の設定がお勧め
• サービスアカウント wp-stateless に対しては、 Storage オブジェクト管理者 と Storage レガシーバケット読み取り の 2 種類の権限設定をしておくのがお勧め

Cloud Storage は権限設定などややこしい点があるので、すべてを説明すると話が WP-Stateless の本題から逸れてしまうことため別の記事にまとめました。

WP-Stateless プラグインを利用するための Cloud Storage (GCS) 権限設定

https://fand.jp/wordpress/cloud-storage-settings-for-using-wp-stateless/

WP-Stateless プラグインを利用するための Cloud Storage 設定で気をつける点を説明します。その他のアプリケーションにも応用可能な基礎知識です。

WP-Stateless の動作確認

結果的には何とか動きましたが、いくつかの動作不良を経て苦労しました。そのトラブルシュートは記事の末尾に記載しています。

一通りの設定が完了したあと、メディアライブラリから通常の操作でアップロードすると Cloud Storage にもデータが格納されました。また、メディアライブラリから削除をすると同じく Cloud Storage からもデータ削除されます。完璧です。

メディアライブラリの画像一覧にて、特定の画像に対して複数サイズのリンク一覧が表示されます。URL を見て読み取れる通り、Cloud Storage のリンクになっています。

WP-Stateless の動作モード概要

設定画面の画像

無効化（Disabled）を除き 4 種類あります。

まとめ

WordPress のメディアライブラリにアップロードした画像を Google のオブジェクトストレージ（Cloud Storage）に格納するためのプラグインについて検証しました。

WP Offload Media Lite プラグインも実用的だとは思いますが、無償で使える範囲が WP-Stateless の方が広いため、当面はこちらでよいかと思いました。

今後 S3 などの別のストレージを利用する予定がある場合は、複数のクラウドストレージに対応している WP Offload Media Lite も捨てがたいと思います。

セットアップ時のトラブル

WP-Stateless を正常に動かすにあたっていくつか苦労したので記録します。

（１）そもそもちゃんと動かない

一番最初にハマった点です。画像アップロードしても Cloud Storage の方には一向に反映されません。いろいろ切り分けしたのですが、結果的には localhost 意外の名前を与えることで解決しました。

• 動かなかった時： http://localhost:8000 でテスト中
• 動いた時： http://dev.example.com:8000 でテスト中

結果論なので正確な事実ではないかもしれませんが、変化点がここでした。GitHub の Issue にも http://localhost だとうまく動かないんだが？的な記載が目についたので試した結果です。

確か、このようなメッセージだったはず。

WP-Stateless has the following notice:
Cloud not connect to Google Storage bucket. Please, be sure that bucket with name “バケット名” exists.

（２）Stateless モードでのみ動くがその他は全滅

Cloud Storage バケットの作成方法に問題があります。

今回やりたいことは、CDN モードでの動作でした。Cloud Storage にアップロードするだけの目的であれば Stateless モードでも問題ないのですが、EWWW Image Optimizer で WebP 変換したものをアップロードしようとすると CDN モードでなければならない成約があります。

で、CDN モードが何をやっても動かない。エラーログを探しても見当たらない（探し方が悪い？）。

いよいよ WP-Stateless プラグインを諦めて WP Offload Media Lite プラグインに乗り換え始めたところ、またもや失敗してしまいました。しかし WP-Stateless との違いは、なにやら怪しいエラーログを発見。

[Tue Jan 18 12:39:58.186463 2022] [php7:notice] [pid 32] [client 172.20.0.1:56204] AS3CF: Error offloading /var/www/html/wp-content/uploads/2022/01/2022-testImg.png to provider: {\n "error": {\n "code": 400,\n "message": "Cannot insert legacy ACL for an object when uniform bucket-level access is enabled. Read more at https://cloud.google.com/storage/docs/uniform-bucket-level-access",\n "errors": [\n {\n "message": "Cannot insert legacy ACL for an object when uniform bucket-level access is enabled. Read more at https://cloud.google.com/storage/docs/uniform-bucket-level-access",\n "domain": "global",\n "reason": "invalid"\n }\n ]\n }\n}\n, referer: http://dev.fand.jp:8000/wp-admin/upload.php

整形してみます。

{
  "error": {
    "code": 400,
    "message": "Cannot insert legacy ACL for an object when uniform bucket-level access is enabled. Read more at https://cloud.google.com/storage/docs/uniform-bucket-level-access",
    "errors": [
      {
        "message": "Cannot insert legacy ACL for an object when uniform bucket-level access is enabled. Read more at https://cloud.google.com/storage/docs/uniform-bucket-level-access",
        "domain": "global",
        "reason": "invalid"
      }
    ]
  }
}

結論、バケット作成時に「きめ細かい管理」というアクセス制御モードで作成する必要がありました。