Visual Studio CodeのRemote Containersはとても簡潔に開発環境の構築が出来ます。
DockerとVSCode(拡張機能含む)さえ入っていれば難しいインストール作業は不要で開発環境の構築が行えます。
公式サンプルにRubyは存在しますが、Ruby on Railsは存在しないので、作成してみました!!!
リポジトリ:
https://github.com/MasanoriIwakura/vscode-rails-remote
●目的
開発に必要なツールのインストールや設定を自動化し、開発環境依存を無くす。
●使用ツール
ツール名 | バージョン | 備考 |
---|---|---|
Visual Studio Code | 1.35.1 | |
Remote Development | プレビュー | VSCode拡張機能 |
Docker for Mac | 2.0.0.3 | UbuntuのDockerでも動作確認済み |
●使用方法
- Visual Studio Codeをインストール ※自分のOSに合わせてインストールしてください
- Remote Development拡張機能をインストール(VSCode拡張機能)
![Remote.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F199056%2Fb06a53dd-fb95-cf49-a991-5052b0cdcce0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=786b9f16fcf57fdb676f1f79a0e02101)
- Dockerをインストール ※Macの場合はDocker for Mac
※Linuxの場合はsudo
しなくても使用できるように設定を行ってください。
- 本リポジトリをクローン
git clone https://github.com/MasanoriIwakura/vscode-rails-remote.git
- VSCode起動
code vscode-rails-remote
- VSCode右下のダイアログから[Reopen in Container]を選択
コンテナイメージのインストールが実行される
- ブレイクポイントの設定
下記イメージのようにブレイクポイントを設定する
![break-point.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F199056%2F891472ed-ab40-74b7-fa38-e1cdc97f92ee.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9ad42441deb6555490decf7568708bd8)
-
[F5]キーを押下し、実行
-
ブラウザやcurlを使用して
http://localhost:3000
にアクセス
![debug.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F199056%2F4b141acb-071c-afa4-4793-617501c593a9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1ef3f9097f1b4a5c41d95cc576000fb3)
ブレイクポイントで止まります。
●ポイント
[Dockerfile]
Ruby on Railsのビルドや開発に必要なツールをインストールしておく
- build-essential ※ビルド用(これがないとbundle installでコケる)
- libsqlite3-dev
- nodejs
- git
- sqlite3 ※今回はSQLiteを使用
[devcontainer.json]
リモートデバッグに必要な設定を記載
- 使用するDockerfile
- バインディングするポート番号
- 使用する拡張機能
- 起動時に実行するコマンド
[launch.json]
デバッグ用のコマンドを設定
リモートデバッグの場合、0.0.0.0
を指定しないとアクセス出来ない
今回は以上です。
気が向いたらMySQL込みの開発環境も作成してみます。