Directus で S3 にアップロードした画像が表示できなかった問題の解決

Directus で記事を移行していて詰まった。画像が表示できず 403 エラーとなる。ちなみに画像などの静的ファイルはアプリケーション上にアップロードするわけではなく S3 上にアップロードすることにしている。

Directus の Config のストレージ設定には local, s3, gcs, azure, cloudinary, supabase など様々なストレージオプションが用意されている。

• Configuration Options | Directus Docs

S3 バケット上に画像をアップロードするように設定してあり、実際にアップロードをすると S3 上に配置されたことは AWS マネジメントコンソールからも確認できた。加えて S3 のパーミッション関係についても問題なさそうだ。となれば Directus 側の権限制御がおかしいのかもしれない。

Directus は管理画面の Settings から Access Control にて各種コレクションの権限制御を行うことが出来るが、実は System Collections というメニューがあり、これを押すことで Directus 自体のコレクションについてのアクセス制御を行うことが出来る。

この中にある directus_files というのが、ファイル関係のコレクションのアクセス制御の設定なのだ。初期状態だとすべて拒否となっている。ということで、ここを変えれば表示が出来るようになりそうだ。

ただし、すべてのアクセスを OK にしてしまうとセキュリティ上問題がありそうなので S3 にアップロードしたオブジェクトだけを読み込み可とした。ルールは storage が s3 だった場合のみ Read を可と設定した。

結果、画像は表示されるようになった。めでたしめでたし。