Ruby on Sinatra を Visual Studio Code を使ってリモートデバッグする

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 にインストールします。

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

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

```ruby:/media/sf_work/repository/sinatra_debug/myapp.rb
require 'sinatra'

get '/' do
  'Hello world!'
end
```

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

```shell
$ ruby myapp.rb -o 0.0.0.0
```

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

```shell
[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 のホスト名です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123649/fdea1ce2-0608-fd82-6a87-1a600b79a2f4.png)

# Web アプリケーションにデバッガをインストール
myapp.rb と同じ場所に、Gemfile を作成します。

```ruby:/media/sf_work/repository/sinatra_debug/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` は任意で付けてください。

```shell
$ bundle install
```

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

```shell
$ bundle list
```

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

```shell
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 をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123649/1ccf7db1-c184-b3f3-cb42-9a487a91d871.png)

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

```json:/media/sf_work/repository/sinatra_debug/.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 と同じ場所で、下記コマンドを実行し、デバッグ起動します。

```shell
$ 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` が存在するかを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123649/43730b39-6e65-3132-6279-d339f3883f15.png)

任意の場所にブレークポイントは貼り、ブラウザからアクセスします。
ブレークポイントに止まれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123649/60b2d4b4-a15f-71cc-b5e7-679942a782ec.png)

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

# [参考]
http://sinatrarb.com/intro-ja.html
https://qiita.com/chimame/items/56e48ab3145312ff1786/