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

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

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

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

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

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

環境
RailsアプリをDocker-composeで起動できるように
Visual Studio Code Remote Containerでコンテナのファイルシステムにアクセス
Visual Studio Code Remote Containerでデバッグできるように
今回作ったプロジェクト
参考資料

環境

OS: Ubuntu 18.04 LTS (MacOS Catalina 10.15.4でも同様に動きました。)
Visual Studio Code: 1.45.1
Docker version 19.03.8

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

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

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

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

Dockerfile
- https://github.com/moritamori/vscode-remote-container-prj/blob/master/Dockerfile
docker-compose.yml
- https://github.com/moritamori/vscode-remote-container-prj/blob/master/docker-compose.yml

動作確認

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

$ docker-compose up

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

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

VSCode拡張インストール

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

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

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

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

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

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

.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で開いた直後の状態

コンテナに接続された状態になります。

しかし、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"], 
        }
    ]
}