VScodeでRailsアプリをデバッグする方法でなかなか躓いたので、書いていこうと思います。
なぜこの記事を書いたか
僕はいつもPryを使ってデバッグをすることが多いのですが、いちいち書くのがめんどくさい&消し忘れることが多々あるということで、VSCode上でブレークポイントを置いてデバッグできたらいいなと思っていました。
また、Railsアプリをdocker-compose上で構築して開発することがポピュラーなのでその環境下でやりたかったのですが、検索して記事を探して試してもなかなかできなかったので、同じように悩む人の助けになればいいと思い、自分の環境でやってできた方法をまとめていきたいと思います。
環境
- Rails 6.1
- Ruby 3.0.2
設定方法
VScodeでデバッグするのに必要なGemを入れます。Gemfileに書くのが嫌ならグローバルにインストールすればいいと思います。
group :development, :test do
# 略
gem 'ruby-debug-ide'
gem 'debase'
end
次にdocker-compose.ymlです。必要なところを抜粋します。
web:
# 略
ports:
- '3000:3000'
- '1234:1234'
- '26162:26162'
# 略
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rdebug-ide --host 0.0.0.0 --port 1234 --dispatcher-port 26162 -- bin/rails s -p 3000 -b '0.0.0.0'"
次にVSCodeでアプリを開いて、実行→構成の追加からRubyを選択します。
すると、.vscode/launch.jsonがつくられると思います。その中を次のように編集します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Local Docker - Listen for rdebug-ide",
"type": "Ruby",
"request": "attach",
"cwd": "${workspaceRoot}",
"remoteHost": "0.0.0.0",
"remotePort": "1234",
"remoteWorkspaceRoot": "/usr/src/web",
"args": [
"server"
]
}
]
}
気をつける点としてはremoteWorkspaceRootでしょうか。webとコンテナのホスト名だけを入れているサイトもありますが、アプリの入ってるディレクトリ名を入れるのが正解のようです。ワークスペースルートってことですかね。
設定が終わり次第、docker-compose build
→ docker-compose run --rm --service-ports web
でコンテナを立ち上げます。その後、ブレークポイントを設定して、左上の▷ボタンを押すとサーバーが立ち上がります。
ブレークポイントのところを通してみます。しっかり止まってくれてますね👏👏
さいごに
できたのはいいですけど、ブレークポイントを外すとサーバーが落ちてしまってまた立ち上げ直さないといけないのが結構致命的なデメリットでした。特にDockerを使っているので立ち上げに時間がかかりますし、JSライブラリ色々使っているとコンパイルで余計に時間がかかるっていうので、残念ながら実際に使うことはないかなといった感じでした。なにかいいデバッグ方法あれば教えて下さい。