概要
開発者のマシンで開発環境を構築する際に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のお問合せフォームから
本文
準備
本記事のサンプルコードは下記URL(vscodeタグ)にあります
前提条件
動作確認した環境は以下のとおりです
- 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 をインストール
下記のリンクから追加
下記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を使うと設定が容易です。
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
コマンドを使う必要がないところがお気に入りのポイントです。
参考リンク
- https://zenn.dev/igaiga/books/rails-practice-note/viewer/ruby_rails_vscode
- https://dev.to/st0012/setup-rubydebug-with-vscode-1b7c
- https://techfeed.io/entries/641025516e13041cbc3b58b3
PR
XではUZUMAKIの新しい働き方や日常の様子を紹介!ぜひフォローをお願いします!
noteではUZUMAKIのメンバー・クライアントインタビュー、福利厚生を紹介!
UZUMAKIではRailsエンジニアを絶賛募集中です。
↓の記事を読んでご興味を持っていただいた方は、ぜひ応募よろしくお願いします!
是非応募宜しくおねがいします!