Rails × AWS EC2で発生した「Team must exist」エラーとTurbo Streamのレイアウト崩れを解決した話
はじめに
Rails 8で開発したタスク管理アプリをAWS EC2へデプロイした際に、開発環境では発生しなかった不具合が本番環境で発生しました。
今回は、
- Team must exist エラー
- Turbo Stream更新後のレイアウト崩れ
を調査し、解決した流れをまとめます。
発生した問題① Team must exist
Taskモデルには以下の関連を定義していました。
class Task < ApplicationRecord
belongs_to :user
belongs_to :team
end
タスク作成時には、
@task = current_user.tasks.build(task_params)
@task.team = current_user.team
としていました。
しかし本番環境では、
Team must exist
が表示され、タスクを作成できませんでした。
調査
EC2へSSH接続し、Rails Consoleを起動しました。
RAILS_ENV=production bin/rails console
確認すると、
Team.count
# => 0
User.first.team
# => nil
となっていました。
つまり、
- Teamデータが存在しない
- UserがTeamに所属していない
状態でした。
解決方法
Teamを作成し、
team = Team.create!(name: "開発チーム")
ユーザーへ紐付けました。
User.first.update!(team: team)
これで新規タスク作成が可能になりました。
発生した問題② 既存タスクが表示されない
新規作成はできるようになりましたが、以前作成したタスクが表示されなくなりました。
確認すると、
Task.pluck(:id, :title, :team_id)
結果は、
[[1, "デプロイ", nil]]
でした。
team_id が nil になっていたため、Punditのpolicy_scopeから除外されていました。
解決方法
既存データへteam_idを付与しました。
Task.where(team_id: nil)
.update_all(team_id: team.id)
これで既存タスクも表示されるようになりました。
発生した問題③ Turbo Stream後だけレイアウトが崩れる
スマホ対応として、
grid-cols-1 md:grid-cols-2 lg:grid-cols-3
へ変更しました。
初回表示は正常でしたが、
- ステータス変更
- 編集
- 削除
を行うと、
再び横3列レイアウトへ戻ってしまいました。
原因
Turbo Streamテンプレートに古いクラスが残っていました。
class="grid grid-cols-3 gap-6"
以下のファイルを修正しました。
create.turbo_stream.erb
update.turbo_stream.erb
destroy.turbo_stream.erb
_list.html.erb
さらに見つかった問題
本番環境で確認すると、
update.turbo_stream.erb にHTMLの記述ミスがありました。
修正前
<div id="tasks"
data-controller="sortable"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
修正後
<div id="tasks"
data-controller="sortable"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
閉じタグの > が抜けていました。
Turbo StreamでDOMを書き換えた際にレイアウトが崩れる原因になっていました。
学んだこと
今回の対応で学んだことは以下です。
- 本番DBと開発DBは別物
- Rails Consoleは強力な調査ツール
- Pundit導入時は関連データの整合性が重要
- Turbo Stream利用時はテンプレート側も確認する
- HTMLの小さなミスが大きな不具合につながる
おわりに
開発環境では正常でも、本番環境ではデータや設定の違いから予期しない不具合が発生します。
今回の経験を通して、
「エラーを直す力」
だけでなく、
「原因を特定する力」
の重要性を実感しました。