Railsリモート開発環境 VSCode編

10142 ワード
debugger Rails VSCode Vagrant Rails テキストリンク

前書き

VSCode(以下code)でのRuby on Rails開発とVM(Vagrant&Oracle Virtual Box)でのデバッグについてチームメンバーのセッティングのために書きます。
Rails6ですが、4や5でも同じかと思います。（４，５で試した方いればコメントくだされば助かります）

VSCodeのSSHリモートワークスペース拡張機能（=神Extention）

これをホストOSのcodeに入れます。
SSHでワークスペースやCUIを使えるすごいやつです。
GUIで開発しながら開発環境のシェルを使ってコマンドを打てるのでまるでローカル開発と変わらない感覚でゲストOSの操作ができる画期的なExtentionですね。
これでよりホストOSが汚れなくなるし、環境セッティングもローカルと同様にできるのでやりやすい。

注意点は「次回以降同じワークスペースで開く」設定の人はちゃんとvagrant upしてからcodeを開こうね。
あと横着して本番環境に接続したりしないようにしようね。
VSCodeServerが立ち上がってリソースを消費するぞ。

SSHホスト設定

  • ssh configに追加すればいいだけ。
    • できるひとはコマンドリダイレクトでパパッとやってもいいよ。
    • 指定したファイルをSSHホストとして読み込む設定がsettingsにある。

今回はVagrant先輩におんぶに抱っこで行きます。

  1. コマンドパレットCtrl+pにssh configを入れる

  2. 出てきたconfigの一番上を選択する。

  3. 開いたconfigをそのままにして次へ

  4. terminal(コマンドプロンプト、Powershell、Gitbushなど）でVagrantフォルダへ移動

  5. vagrant upしたあとvagrant ssh-configすると以下のようなSSHホスト設定がでます

    Host default
HostName 127.0.0.1
User vagrant
Port 2222
UserKnownHostsFile /dev/null
StrictHostKeyChecking no
PasswordAuthentication no
IdentityFile /home/sysman/xxxx/.vagrant/machines/default/virtualbox/private_key
IdentitiesOnly yes
LogLevel FATAL

  6. 5.の結果を3.で開いたconfigにコピペします

リモートのワークスペースを開く

コマンドパレットからssh conとかでConnect to Host...をクリックします。

うまく設定できていれば以下のようにSSHホストが表示されるのでクリックすれば接続開始。ゲストOSにVSCodeサーバーを立ててくれます。（defaultはvagrantがつけた名前。configのHostの横がSSHホストの名前です)

もう一つのvscodeが起動したりしなかったりで、初期起動時の画面が表示されます。
適当にフォルダを開こうとするといつもと違う感じになっていますね？

ここから先はゲストOSです。アプリケーションのルートを開きましょう。

Extentionの導入（Ruby）

このリモート開発機能は前述の通りVSCodeサーバーを立ち上げるので、Extentionsをリモートに導入する必要があります。
入力補完(Intellisense: Solargraphとか？)、Lint(みんな大好きRubocop)、フォーマッタ(prettierかrufo)があればだいたい大丈夫でしょ。(Railsサポートの拡張機能やRainbow bracketなど他にも使っているものは同様です)
DisableではなくInstall:defaultなどと緑の表示があればクリックして導入しましょう。

デバッガの設定

すでに俺のリモートがローカルでないわけがないので普通にローカルデバッグの設定を入れられます。

  1. 適当に.rbファイルを開く
  2. 左のアイコンからデバッグ表示にするとcreate a launch.json fileがあるのでクリックする

  3. Rubyを選択します

  4. Rails serverを選択します

  5. できたlaunch.jsonを以下のように編集します

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Rails server",
            "type": "Ruby",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/bin/rails",
            "args": ["server", "-b", "0.0.0.0"],
            "useBundler": true,

        }
    ]
}

    差分:

                "program": "${workspaceRoot}/bin/rails",
            "args": ["server", "-b", "0.0.0.0"],
            "useBundler": true,

  6. デバッグ表示に切り替えるとRails serverの横に緑の▷があるのでクリックすればデバッグモードでサーバーが起動します。

  7. 適当にブレイクポイントを設定して止まるか確認して終わり。
    下のラベルが緑はリモート接続オレンジがデバッグの目印。
    実際にブレイクしたステップは黄色のラインになっていますね。

ぼくはいんてりじぇーします

いじょ族

参考にした記事：
VSCodeのRemote Developmentを使ってリモートのRuby(Sinatra)をデバッグする

参考になる記事:
VSCodeの拡張機能でRailsと仲良くなる
【Ruby】Visual Studio CodeでRubyのコード補完を有効にする
prettier-ruby VSCode Formatter設定