VS CodeのRemote Development機能でRuby on Rails の開発環境を構築する

Insider版で使えるようになった VS Code Remote Development 機能がすごい。VSCodeの便利な拡張機能をリモートにインストールして利用できたりとDXが非常にいいのでこの機能を利用して Ruby on Rails の開発環境をdocker docker-compose を利用しながら構築したいと思います。

リポジトリはこちら
vscode-remote-try-rails

環境

• Windows 10 Pro 1803
• Docker Desktop 2.0.0.3
• Docker Engine 18.09.2
• VS Code 1.35.0-insider

インストール

VSCodeのRemote Development機能を使うにはVSCodeのInsider版をインストールする必要があります。

1. Visual Studio Code - Insiders をインストール。
2. Remote DevelopmentのExtensionをインストール。

ディレクトリ構成

/
  ├ .devcontainer/
  │    ├ devcontainer.json
  │    └ Dockerfile       
  ├ app/
  └ docker-compose.yml

• .devcontainer/ : コンテナの設定ファイルを置くディレクトリ。Dockerfileもここに入れる
• devcontainer.json: VS Codeからコンテナを起動する設定ファイル
• Dockerfile: コンテナの設定ファイル
• app/ : ホストと共有するディレクトリ
• docker-compose.yml : docker-composeの設定ファイル

Dockerfile

.devcontainer/Dockerfile

FROM ruby:2.5.0

RUN apt-get update && apt-get install -y build-essential libpq-dev postgresql-client
RUN gem install rails
RUN mkdir /app
WORKDIR /app

Dockerfileを作成。おそらく最小構成。
postgress-client と rails をインストール。
ホスト(Windows)と共有するためのディレクトリを/appとして作成。

docker-compose.yml

docker-compose.yml

version: "3"

services:
  web:
    build: .devcontainer
    ports:
      - "3000:3000"
    environment:
      - "DATABASE_HOST=db"
      - "DATABASE_PORT=5432"
      - "DATABASE_USER=postgres"
      - "DATABASE_PASSWORD=mysecretpassword1234"
    links:
      - db
    volumes:
      - "./app:/app"
    stdin_open: true

  db:
    image: postgres:10.1
    ports:
      - "5432:5432"
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=mysecretpassword1234"

buildに.devcontainerを指定。
volumesでホストとの共有を設定。今回はホストの./appとコンテナの/appを共有する。

devcontainer.json

コンテナをVS Codeで起動するための設定をします。

.devcontainer/devcontainer.json

{
    "name": "My Project",
    "dockerComposeFile": "../docker-compose.yml",
    "service": "web",
    "workspaceFolder": "/app",
    "shutdownAction": "stopCompose"
}

• dockerComposeFile: docker-compose の設定ファイルを指定。配列で複数指定もできる。
• service: VS Codeで開くコンテナを指定。今回はwebコンテナを指定する。
• workspaceFolder: VS Codeのリモートワークスペース。コンテナ内のディレクトリを指定できる。今回はわかりやすく/appに指定。docker-compose.ymlで共有設定したのでホスト側からファイルが見えるようになる。
• shutdownAction: stopComposeを指定。VS Codeを閉じるとコンテナも停止する設定。

VS Code からコンテナを起動する

F1を押下。 > Remote-Containers: Reopen Folder in Containerでコンテナのインストールが始まります。
docker-compose buildやdocker-compose up を自動でやってくれます。

インストールが終わるとdevcontainer.jsonのworkspaceFolderで設定したワークスペースが開きます。

Ruby on Rails のプロジェクトを作成する

1. ctrl + shift + ^ を押下してターミナルを起動。

2. rails new . -d postgresqlで直下にプロジェクトを作成。データベースは今回はPostgreSQLを使用します。

3. ファイルの編集
   Gemfileを開きます。
   mini_racerをインストールするgemコマンドをコメントアウト。

Gemfile

-    # gem 'mini_racer', platforms: :ruby
+    gem 'mini_racer', platforms: :ruby

次に config/database.yml を開きます。
以下のコードを追加。postgresのユーザー名やパスワードの設定をします。docker-compose.ymlのenviromentで定義した変数が利用できます。

config/database.yml

   default: &default
     adapter: postgresql
     encoding: unicode
     pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+    host: <%= ENV.fetch('DATABASE_HOST') { 'localhost' } %>
+    port: <%= ENV.fetch('DATABASE_PORT') { 5432 } %>
+    username: <%= ENV.fetch('DATABASE_USER') { 'root' } %>
+    password: <%= ENV.fetch('DATABASE_PASSWORD') { 'password' } %>

1. 初回セットアップ
   bashに以下を入力していきます。

$ bundle install
$ rails db:create
$ rails s -b 0.0.0.0

サーバが起動したらhttp://localhost:3000をブラウザで開いてRailsの初期画面が出たら成功です。

参考

VSCodeのRemote Development機能が革命的な話。
Rails+PostgreSQLの環境をdocker-composeで作成する
[Dockerで立ち上げた開発環境をVS Codeで開く!]
(https://qiita.com/yoskeoka/items/01c52c069123e0298660)