概要

開発者のマシンで開発環境を構築する際にDocker及びDocker composeを使って開発することが一般的になりました。ターミナルからdocker composeコマンドを実行してテストや動作確認するのがセオリーですが、VS CodeのDev Containers拡張を使うことによりVS Codeで便利に開発する方法を提案します。今回はRailsプロジェクトを使ったDev Containersのセットアップ方法を紹介します。

概要
目次
目的
対象読者
PR
本文
準備
前提条件
リモート用のコンテナの設定をする
VS Code拡張機能 Remote Development をインストール
VS Codeからコンテナを起動する
コンテナ内で使用する拡張機能を指定する
VS Codeでプロジェクト用の設定をする
GemfileにSolergraphとRubocop用のgemを追記
動作確認
Dev Containersを使ったRails 開発のリズム
Tips
コンテナから出たいと思ったら
設定が反映されないと思ったら
考察
Pros
Cons
まとめ
参考リンク
PR

目的

VS CodeとDockerを使ったRailsをより便利にします(以下コンテナと記載されている箇所はDockerコンテナ及びDocker Composeで起動したコンテナ群を指す)。

SSHでリモートサーバにアクセスするように、コンテナに入った状態のターミナルを動かせるので、 docker compose exec ~~ とDockerのコマンドを打つ必要がなくなり、開発作業を楽にします
コンテナで起動するVS Code拡張を指定できるので、RubcopやSolargraphなどの拡張機能をインストール・設定を開発者が個別にする必要がなくなり開発環境を標準化できます

対象読者

VSCodeを使うRailsエンジニアおよび、開発環境を標準化したいリーダー層

PR

UZUMAKIではアジャイル開発で新規事業の開発から、大規模Webアプリケーションのアーキテクチャ更新などの開発をしています。

お問い合わせはUZUMAKIのHPのお問合せフォームから

株式会社UZUMAKI

UZUMAKI（うずまき）はエンジニア・デザイナー・ディレクターで構成されるギルド型開発チーム。成長するWebサービスやアプリのリニューアル・リファクタリングに強みがあります。

uzumaki-inc.jp

本文

準備

本記事のサンプルコードは下記URL(vscodeタグ)にあります

GitHub - konyu/base_rails at vscode

Contribute to konyu/base_rails development by creating an account on GitHub.

github.com

前提条件

動作確認した環境は以下のとおりです

M2 CPUのMac
Docker desktop for mac: 4.16.2
Ruby: 3.2.1
Rails: 7.0.4
MySQL: 8
※ 細かいバージョンはDockerfile、docker-compose.ymlに記載
rails new コマンドで適当なRailsプロジェクトを作成し、Post, Commentモデルをscaffoldで作成

Railsを動かすベースのDockerfileを作成します

FROM ruby:3.2.1
ENV ROOT="/app"
ENV LANG=C.UTF-8
ENV TZ=Asia/Tokyo

WORKDIR ${ROOT}

COPY Gemfile ${ROOT}
COPY Gemfile.lock ${ROOT}

RUN gem install bundler
RUN bundle install --jobs 4

ミドルウェアの指定をするdocker-compose.ymlを作ります

version: '3'
services:
  web:
    build: .
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app:cached
      - bundle-volume:/usr/local/bundle
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    image: mysql:8
    volumes:
      - mysql-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      TZ: "Asia/Tokyo"
    ports:
      - "3306:3306"
volumes:
  bundle-volume:
  mysql-volume:

docker compose up

データベースを作成する

docker compose run --rm web rails db:prepare

http://localhost:3000 にアクセスしてトップページが表示されることを確認してください。

リモート用のコンテナの設定をする

VS Code拡張機能 Remote Development をインストール

下記のリンクから追加

marketplace.visualstudio.com

下記4つの拡張期の機能のパックなので、今回使用するのはDev Containersのみインストールしても構いません

Remote - SSH - Work with source code in any location by opening folders on a remote machine/VM using SSH. Supports x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) glibc-based Linux, Windows 10/Server (1803+), and macOS 10.14+ (Mojave) SSH hosts.
Remote - Tunnels - Work with source code in any location by opening folders on a remote machine/VM using a VS Code Tunnel (rather than SSH).
Dev Containers - Work with a separate toolchain or container based application by opening any folder mounted into or inside a container.
WSL - Get a Linux-powered development experience from the comfort of Windows by opening any folder in the Windows Subsystem for Linux.

この拡張機能を他のメンバーにもインストールを推奨(機能的に強制できません)するように設定ファイルを追記します。

.vscode/extensions.json

{
  "recommendations": [
    "ms-vscode-remote.vscode-remote-extensionpack", // Remote Development
  ]
}

Dev Containers用の設定ファイルを作成します。

.devcontainer/devcontainer.json

{
	"name": "Existing Docker Compose",
	"dockerComposeFile": [ //2つ目のdocker-compose.ymlで1つ目の設定を上書きます
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "web",//docker-compse.ymlで記載されている起動対象のサービス名、Railsのサービスを指定します
  "workspaceFolder": "/app"//起動時に接続するディレクトリ
}

上書きするdocker-compose.ymlを作成し、起動時のコマンドでRailsが起動しないようにします

.devcontainer/docker-compose.yml

version: '3'
services:
  web:
    # docker起動時にRailsが起動しないようにする
    command: /bin/sh -c "while sleep 1000; do :; done"

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

VS Codeの左下の緑の部分をクリックまたは、コマンドパレットからRopen in Containerを選択します。

コンテナ内で使用する拡張機能を指定する

コンテナ内ではコンテナ外でインストールしている拡張機能は使えません。改めてインストールする必要があります。一見この点は不便なのですが、コンテナ内で使用する拡張機能は設定ファイルで指定することができセットアップが簡単になります。

今回は下記を導入します。

solargraph
rubocop
Ruby拡張
rdbg ※ デバッグ用

.devcontainer/devcontainer.jsonファイル書きを追記します。

{
  // 中略

  // コンテナ内で使う拡張機能
	"customizations": {
		"vscode": {
			"extensions": [
				"castwide.solargraph", // solargraph
				"rebornix.Ruby", // Rubyのシンタックスハイライトなど
				"misogi.ruby-rubocop", // Rubocop
				"KoichiSasada.vscode-rdbg" // Ruby Debug　後述
			]
		}
	}
}

VS Codeでプロジェクト用の設定をする

プロジェクト専用の設定をします。ここではRubyのインデントをスペース2にします。

.vscode/settings.json

{
    "[ruby]": {
        "editor.tabSize": 2
    }
}

GemfileにSolergraphとRubocop用のgemを追記

拡張機能で利用するgemをインストールするよう指定します。

group :development do
  gem 'solargraph'
  gem 'rubocop', require: false
  gem 'rubocop-rails', require: false
  gem 'rubocop-performance', require: false
end

動作確認

VS Codeからコンテナを起動してRubocpや、Solargraphが動いていることを確認してください。

Rubocop

おなじみのRuby用のLinterはProblemsのパネルから見ることができます。

Solargraph

自動補完や、メソッドやクラスの定義へジャンプできる便利なツールです。使っていない方はぜひ導入してみてください。

※ SolargraphとVS Codeの組み合わせはコンテナ外から動かそうとすると設定が煩雑ですがDev Containersを使うと設定が容易です。

Solargraph: A Ruby Language Server

solargraph.org

Dev Containersを使ったRails 開発のリズム

Dev Containersを使って開発することで、Railsのコンテナに入った状態のターミナルが開けるので、まるでDockerを使わないでローカル開発するような感覚で開発ができます。

コンテナの外からコンテナ内のRailsに対してコマンドを実行する場合、DockerのコマンドとRailsのコマンドの両方を考慮して考える必要があり若干脳に負荷がかかります。 Docker Composeの起動時にRailsを起動させる設定でコンテナの外からRailsに対するコマンドと、コンテナ内から打つコマンドを比較すると、下記の表のようにコマンドを少なくすることができ便利です。

コンテナの外からRailsに対するコマンド	コンテナ内から打つコマンド
docker compose run --rm web bundle install	bundle install
docker compose run --rm web bin/rails db:migrate	bin/rails db:migrate
docker compose exec web bin/rails c	bin/rails c
docker compose exec web bundle exec rspec	bundle exec rspec
docker compose run -e EDITOR=emacs web bin/rails credentials:edit	bin/rails credentials:edit

またTerminalパネルから、rails serverを起動したりrspecをターミナルから実行することができるのでブレークポイントで止めて動作確認をすることもできます。

Tips

コンテナから出たいと思ったら

コマンドパレットから Reopen Folder Locally を実行する

設定が反映されないと思ったら

コンテナをリビルドしてみると解決しやすいです。コマンドパレットから下記のどちらかを実行してみると良いでしょう

考察

Pros

VS Codeの拡張機能を開発メンバーで標準化できる

コンテナ内のRubyを使う拡張機能の設定が楽

VS Codeのターミナルはコンテナに入った状態で作業でき、Docker(Docker Component)のコマンドを省略して開発できる
Railsをdevelopment環境で起動した際にブレークポイントでデバッグするのが楽

docker attachコマンドが不要なので、動作確認やバグの調査が楽

Cons

VS Code以外のエディタには適用できない
Dev Containersの拡張機能が若干クセがある
コンテナ内のシェルの設定を普段の開発環境のものが使えない

Zshやインクリメンタルサーチを入れるべきか、エイリアスなど

まとめ

VS Codeで開発する際に、Docker及びDocker composeとVS Codeの拡張機能Dev Containersを使う方法を紹介しました。Railsのプロジェクトでの例を紹介しました。

個人的には、Solargraphの設定が楽なのと、 docker attach コマンドを使う必要がないところがお気に入りのポイントです。

参考リンク

PR

XではUZUMAKIの新しい働き方や日常の様子を紹介！ぜひフォローをお願いします！

noteではUZUMAKIのメンバー・クライアントインタビュー、福利厚生を紹介！

UZUMAKI｜note

株式会社UZUMAKIです。主に代表の工藤が投稿してますが、ほかのメンバーもたまに投稿します。https://uzumaki-inc.jp/ 受託開発を生業としてますが、リモートワークを通じて、今までにない組織形態での働き方を模索、実践しています。

note.com

UZUMAKIではRailsエンジニアを絶賛募集中です。

↓の記事を読んでご興味を持っていただいた方は、ぜひ応募よろしくお願いします！

UZUMAKI 採用情報

これを実践するには、通常の社会で求められる上司による部下の管理が必要という前提が不要になってきます。例えば、時間管理をしない、圧倒的な性善説で動く、メンバーは自発的に動くということをUZUMAKIでは当たり前のように行っております。現在は、コーポレートサイト記載の企業 ...

job.uzumaki-inc.jp

是非応募宜しくおねがいします！

VSCodeでDockerを使ったRailsを開発しよう~Dev Containers編~

概要

目次

目的