Docker上のRailsアプリをVSCodeのデバッグを用いると、VSCodeのデバッグ行がハイライトされない

 2020-11-25 |  2020-11-25 |  3 min read


問題の画像

はじめに

今回は勉強のために、Docker 上に構築した(docker-compose 利用)Rails 6 のアプリケーションを vscode のリモートデバッグを用いてデバッグをしようとしました。 一見 BreakPoint にも停止してくれてうまく行ったと思ったのですが、

  • 停止行がハイライトされない
  • VARIAVLES で値が参照できていない

といった、上記画像のような問題が発生しました。私の調べ方が悪いのか、調べてもなかなか出てこなかったため備忘録としてメモしておきます。

TL;DR

原因は、remoteWorkspaceRoot のパスがずれていることです。

  1. .vscode/lanch.jsonremoteWorkspaceRootを確認する。
  2. コンテナ内のアプリケーション位置とパスを修正する(恐らくパスがずれているはず)。

詳しく

VS Code を用いてリモートデバッグを行う場合、プロジェクトフォルダ/.vscode/lanch.json内に、リモートデバッグ用のコンフィグを記載していると思います。 そのコンフィグに記載している remoteWorkspaceRoot(リモート先のプロジェクトフォルダがある場所)が、実際の web サーバのコンテナ内で展開されているアプリケーションの場所とで、差異があるため起きる現象です。

検索上位に出てくるサイトを参考にして構築した場合、恐らくルート直下に保存しているはずなので、remoteWorkspaceRoot に "/myapp" と記載します。 (myapp はコンテナ内で展開しているアプリケーションのフォルダ名)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "rdebug-ide",
      "type": "Ruby",
      "request": "attach",
      "cwd": "${workspaceRoot}",
      "remoteHost": "0.0.0.0",
      "remotePort": "1234",
      "remoteWorkspaceRoot": "/myapp", // ←ここ
      "useBundler": true
    }
  ]
}

上記を実行後にデバッグを確認すれば、正しく表示されるはずです。

確認画面

現状のコンテナがどうなっているのかがわからない場合

  1. docker-compose psにて、コンテナが起動しているかを確認します。起動していない場合は docker-compose up -d で起動してから docker-compose ps で確認します。
  2. docker-compose config --serviceで、Web サーバのコンテナ名を確認し、docker-compose exec web bash(web は自身が設定した web サーバコンテナ名)を行います。
  3. web サーバのコンテナ内に入れるので、自身のアプリケーションがどこにあるのかの確認をします(恐らくルート直下にあるので、lsコマンドを打てば見つかるはず)。

上記で確認を終えたら、remoteWorkspaceRoot の設定を行ってください。

さいごに

気づけば単純な問題でしたが、最初は原因に見当がつかず、結構悩んじゃいました。 気がつけたのは、web サーバの部分をローカルで動かしてみたからです。 ローカルでは正しく動いたので、恐らく VS Code - Container 間での問題と仮定してからはすぐでした。

原因調査は、ちゃんと切り分けてやっていったほうがやっぱ早く解決できますね。 にしても、どうして開発は環境構築で必ず詰まってしまうのだろうか……

参考


このエントリーをはてなブックマークに追加

comments powered by Disqus

Tags

Hugo | 7 Setting | 5 AWS | 5 git | 5 VSCode | 4 JavaScript | 3 css | 3 ci | 3 intellij | 3 積本処理 | 2 kaspersky | 2 Terminal | 2 SpringBoot | 2 keyboard | 2 Homebrew | 2 Extention | 2 markdown | 2 windows | 2 command | 2 github-actions | 2 webpack | 2 日本語 | 2 iCloud | 2 Route53 | 2 書き方 | 2 Docker | 2 技術書典7 | 2 poem | 2 RaspberryPi | 1 scoop | 1 npm | 1 OneDrive | 1 ThymeLeaf | 1 AR | 1 GoogleDrive | 1 hhkb | 1 Karabiner-Elements | 1 SpringSecurity | 1 blame | 1 LT | 1 React | 1 port開放 | 1 docsify | 1 Front | 1 Box | 1 DB | 1 Ruby | 1 gradle | 1 node | 1 package-manager | 1




Archives

2020 (31)
2019 (22)
2017 (1)
2016 (3)