RailsプロジェクトでVisual Studio Code Remote Container使ってみた

ローカル環境でDockerを使ってRailsプロジェクトを開発する際に

  • Railsのmigrationのようなコマンドが実行しにくい
  • アプリケーションログが見づらい

といった課題があり、Dockerを使わない場合と比べて少し手間がかかっていました。

コンテナ内のファイルシステムを直接触れるVisual Studio Code Remote Containerを使い始めたのですが、手間を減らしつつも便利開発できていそうな感じがしています。 シンプルなRuby on railsアプリケーションを例に取って導入方法を紹介したいと思います。

イメージとしては、下の図のような感じでVSCodeというインタフェースを介して、Dockerコンテナ内であらゆるタスクが実行できます。

f:id:moritamorie:20200609180240p:plain

環境

RailsアプリをDocker-composeで起動できるように

まずは、 docker-composeRailsアプリケーションサーバのコンテナを起動できるようにします。

Railsプロジェクト準備

構成はできるだけシンプルな方が分かりやすいので

  • データベースはデフォルトの SQLite3
  • Webpackerなし

になるように、rails new して新規アプリケーションを作ってみます。

$ rails new vscode-remote-container-prj --skip-webpack-install

あとでデバッグ実行を試すので Gemfileに

group :development do
  gem 'debase'
  gem 'ruby-debug-ide'
end

を追加しておきます。

Dockerfile, docker-compose.yml

シンプルなものを作っておきます。

動作確認

Webブラウザから http://localhost:3000 にアクセスして、動くことを確認しておきます。

$ docker-compose up

Visual Studio Code Remote Containerでコンテナのファイルシステムにアクセス

ここからはVS code側の設定です。コンテナは停止状態でOK。

VSCode拡張インストール

Remote - Containersをインストールします。

f:id:moritamorie:20200608224328p:plain

Visual Studio Codeで開くディレクトリを指定

左下の緑色の箇所を選択し、先程作ったローカルのRailsプロジェクトのディレクトリを指定します f:id:moritamorie:20200608225919p:plain

開発コンテナ設定ファイルの作成

from docker-compose.yml、サービス名 web 、と順番に選択すると自動的に設定ファイルができます。Dockerfileも選択できますが docker-compose.yml 使った方が設定の柔軟性が高いです。

f:id:moritamorie:20200608225056p:plain

開発コンテナ設定ファイルについて

.devcontainerディレクトリに設定ファイルが2つできます。

devcontainer.json
  • docker-compose.ymlのパス
  • VSコードで使うdocker-compose.yml内のサービス名
  • ワークスペースのフォルダ
  • コンテナ作成時に自動インストールする

などが設定できます。

docker-compose.ymlのパスはデフォルトで、["../docker-compose.yml", "docker-compose.yml"]のように複数指定されていて、次のVSCode Remote Container用の docker-compose.ymlで指定される項目は上書きされます。

詳しくは devcontainer.jsonのリファレンスをご参考ください。

docker-compose.yml

シンプルな以下の設定

version: '3'
services:
  web:
    volumes:
      - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"

で上書きするようになっているので、プロジェクトのdocker-compose.ymlを変更せずにVSCode側で柔軟にデバッグ実行などができます。

docker-compose.yml を使った設定方法に関して、詳しくはこちらのドキュメントに記載があります。

VS Code Remote Containerで開いた直後の状態

コンテナに接続された状態になります。 f:id:moritamorie:20200608232535p:plain

しかし、rails serverは起動しなくなっているので、http://localhost:3000にアクセスしてもレスポンスは返ってきません。

Visual Studio Code Remote Containerでデバッグできるように

ここからはRemote Containerとは関係ない部分にはなりますが、作ったRailsプロジェクトをデバッグ実行できるようにしてみます。

開発コンテナ設定ファイルの編集

先程生成された設定ファイル .devcontainer/devcontainer.json のExtensionsを以下のように変更し、Rubyのコードをデバッグできるようにします。

"extensions": [
    "rebornix.ruby"
]

launch.jsonを作成

以下のような .vscode/launch.jsonを作り、VS Code上からRails serverを実行できる状態にしておきます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Rails App",
            "type": "Ruby",
            "request": "launch",
            "cwd": "${workspaceRoot}", 
            "program": "bin/rails",
            "args": ["s", "-b", "0.0.0.0", "-p", "3000"], 
        }
    ]
}

一度、左下の緑色の箇所から、リモート接続を終了し、接続し直します。

設定ファイルは変更するとコンテナを再度ビルドし直す必要があり、以下のようなダイアログが表示されるので、Rebuildを選択します。 f:id:moritamorie:20200609025710p:plain

デバッグの実行

デバッグ実行します。

f:id:moritamorie:20200608235129p:plain

scaffold(↑は rails g scaffold user name:string した)を作ったりして、breakpointに止まることを確認してみてください。

今回作ったプロジェクト

コードはリポジトリにあげておくので、よかった試してみてください。

github.com

参考資料