はじめに

私が運営している写真系インスタンスphotodn.netで Mastodon を V2.4.5 から V2.7.1 へバージョンアップしたところ、多くのページで CSS が正常に読み込まれず、レイアウトが崩れる問題が発生しました。本記事では、この問題の解決過程とそれに至るまでの調査を共有します。

問題の発生

バージョンアップ後、プロフィールページや about ページ、管理者の設定画面などで CSS が読み込まれず、レイアウトが崩れました。assets:precompileからdb:migrateまで何度やっても解決できませんでした。

公式サイトでの調査

英語が得意ではないにも関わらず、公式サイトのリリースノートを一つ一つ確認したところ、v2.5.0 のリリースノートに次のような記述がありました。

Docker only:
If you had nginx/apache configuration expecting CSS/JS assets to be under volume folders, they are no longer there. Asset precompilation now happens during image build, and is therefore not available from a volume. Instead, requests for the assets must hit Puma inside Docker, which will serve them.

解決策と反省点

この記述を見て、自分の docker-compose.yml ファイルから ./public/assets と ./public/packs を削除し、docker-compose buildを再実行したところ、問題が解決しました。

今回の経験から、特にバージョンアップする際には公式サイトのリリースノートを確認することの重要性を再認識しました。

まとめ

特にバージョンアップするときはリリースノート見るのは必須ですね。今回の件で反省したのでちゃんと見るようにしたいと思います...