Ruby on Sinatra を Visual Studio Code を使ってリモートデバッグする環境を構築したいと思います。
Ruby on Sinatra は VirtualBox の Ubuntu 上で実行します。
Visual Studio Code は Windows 上で実行します。
Ruby はすでにインストールされているものとします。

環境

Windows 10
Visual Studio Code 1.39.2
VirtualBox 6.0.14
Ubuntu 18.04
Ruby 2.6.5

sinatra とデバッガのインストール

gem を使って sinatra とデバッガを Ubuntu にインストールします。

$ gem install sinatra
$ gem install ruby-debug-ide
$ gem install debase

sinatra で Web アプリケーションの実装

公式サイトのサンプルに従って、Web アプリケーション myapp.rb を Ubuntu 上の任意の場所に作成します。
ここでは、/media/sf_work/repository/sinatra_debug 配下に作成しています。

require 'sinatra'

get '/' do
  'Hello world!'
end

下記コマンドで試しに起動してみます。

$ ruby myapp.rb -o 0.0.0.0

ポート 4567 で起動したことを確認します。

[2019-10-28 00:39:05] INFO  WEBrick 1.4.2
[2019-10-28 00:39:05] INFO  ruby 2.6.5 (2019-10-01) [x86_64-linux]
== Sinatra (v2.0.7) has taken the stage on 4567 for development with backup from WEBrick
[2019-10-28 00:39:05] INFO  WEBrick::HTTPServer#start: pid=28159 port=4567

実際にブラウザでも確認します。
URL ドメインの ubuntu は実行している Ubuntu のホスト名です。

Web アプリケーションにデバッガをインストール

myapp.rb と同じ場所に、Gemfile を作成します。

source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'sinatra'
gem 'ruby-debug-ide'
gem 'debase'

Gemfile がある場所で、下記コマンドを実行し、Web アプリケーションにもデバッガをインストールします。
オプション --path vendor/bundle は任意で付けてください。

$ bundle install

続けて、下記コマンドを実行し、インストールされているかを確認します。

$ bundle list

下記のようにインストールされていることを確認します。

Gems included by the bundle:
  * bundler (1.17.2)
  * debase (0.2.4.1)
  * debase-ruby_core_source (0.10.6)
  * mustermann (1.0.3)
  * rack (2.0.7)
  * rack-protection (2.0.7)
  * rake (13.0.0)
  * ruby-debug-ide (0.7.0)
  * sinatra (2.0.7)
  * tilt (2.0.10)

Visual Studio Code の設定

Visual Studio Code の Extension で Ruby をインストールします。

myapp.rb の保存場所に、.vscode フォルダを作成し、その配下に launch.json を作成します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Sinatra Remote Debug",
            "type": "Ruby",
            "request": "attach",
            "cwd": "${workspaceRoot}",
            "remoteHost": "ubuntu",
            "remotePort": "14567",
            "remoteWorkspaceRoot": "/media/sf_work/repository/sinatra_debug"
        }
    ]
}

• remoteHost は実行しているホスト名に書き換えてください。
• remoteWorkspaceRoot は myapp.rb の保存場所に書き換えてください。
• remoteWorkspaceRoot にシンボリックリンクを指定すると動作しない可能性があります。

Web アプリケーションのデバッグ起動

myapp.rb と同じ場所で、下記コマンドを実行し、デバッグ起動します。

$ bundle exec rdebug-ide --host 0.0.0.0 --port 14567 --dispatcher-port 26162 -- myapp.rb -o 0.0.0.0

Visual Studio Code の「フォルダーを開く」で myapp.rb の保存場所 /media/sf_work/repository/sinatra_debug を開きます。
Visual Studio Code のデバッグから Sinatra Remote Debug を選択し、デバッグを開始します。
Sinatra Remote Debug が表示されない場合、開いたフォルダの配下に .vscode/launch.json が存在するかを確認してください。

任意の場所にブレークポイントは貼り、ブラウザからアクセスします。
ブレークポイントに止まれば成功です。

まとめ

近年、Windows でトレンド技術の開発環境を作ることが難しくなってきた印象を受けます。
素直に Mac や Linux で開発環境を作った方が楽だと思いますが、なんらかの理由により、Ruby on Sinatra を Linux 上で実行し、Windows 上で開発している、という変わった環境の方の助けになれば幸いです。

[参考]

http://sinatrarb.com/intro-ja.html
https://qiita.com/chimame/items/56e48ab3145312ff1786/