Dev Container Templateで開発環境をサクッと構築する

皆さんは Dev Container 使っていますか？

私は開発協力させていただいている現場で積極的に導入を進めるぐらい、愛用しています。

活用することで

• プロジェクトごとのミドルウェアなどをコンテナに閉じ込めることができ、ホスト環境を汚さない
• 環境構築を自動化できるので、新規に作成したり、別のPCで作り直したりするのも簡単
• VSCode Serverがコンテナ内で動作するので、VSCode + Docker でありがちな、ホスト側とコンテナ側で見えるパスの違いで混乱もない

など、コンテナを使った開発の体験がとても向上します。

Dev Containerを利用するために自分で .devcontainer/.devcontainer.json を用意する方法が良く紹介されていますが、 Development Container Templates で作成済みのテンプレートを使うことで、とても簡単に導入することができるので、今回は具体的な手順をご紹介します。

前提

• Visual Stusio Code
• Docker Compose v2

検証環境

VSCodeとDocker Compose 2が動作すればホストOS等は何でも良いと思いますが、私の環境は次の通り

• Windows 11
• Ubuntu 22.04 LTS on WSL (Microsoft Store版)
  • Docker 20.10

なお、今回はRailsの環境を構築していますが、Rails以外にもたくさんのテンプレートがあるので、各々必要な環境に読み替えてお役立てください。

新規Railsプロジェクトを作成する場合

1. プロジェクトのディレクトリを作成してVSCodeで開く

$ mkdir my_app
$ Code my_app

2. コマンドパレット（F1）で Add Dev Container Configuration Files... を実行

Show All Definitions... を選択

Ruby on Rails & Postgres を選択

Railsで検索すると Ruby on Rails と Ruby on Rails & Postgres が出てきます（2023年1月11日現在）が、今回は Ruby on Rails & Postgres を選択

テンプレートについて詳しく知りたいとき

ℹ️をクリックすると、ドキュメントページが開きます。テンプレートを利用する際、そのテンプレートの使い方やカスタマイズ方法など参考になります。
Ruby on Rails & Postgres (ruby-rails-postgres)

Rubyのバージョンを選択

Ruby on Rails & Postgres テンプレートでは、使用するRubyのバージョン（Dockerイメージ）を選択できます。
今回はデフォルトの 3.1-bullseye で進みます。

Dev Container Features を選択

Dev Container では Featuresというコンテナ内で利用できる機能を追加する仕組みがあります。たとえば AWS CLI Featureをインストールすると、自分でセットアップしなくても aws コマンドが使えるようになります。

今回は試しにNode.jsを選択してみました。

https://qiita.com/frozenbonito/items/6d73418a7e6c2d3746e4

Featureについて詳しく知りたいとき

ℹ️をクリックすると、ドキュメントページが開きます。たとえばNodeバージョンの指定など、オプション設定の参考になります。
Node.js (via nvm) and yarn (node)

Dev Container 設定ファイル作成完了

ここまでの選択内容に応じて各種設定ファイルの作成ができました。
必要に応じてカスタマイズします（Featuresの設定で使用するNodeのバージョンを指定するなど）が、今回はこのまま進みます。

3. Reopen in Container

右下に出現するポップアップまたは、画面下ステータスバーの左端 >< ボタンから、 Reopen in Container をクリックすると、Dev Container で開き直します。

Dev Containerのビルド、起動中は右下にその旨が表示されます。

Dev Container 起動完了

起動完了すると、いつものVSCodeの画面が表示されます。
左下を確認すると Dev Container で開いていることを確認できます。

VScodeのターミナル（Ctrl+@）を開き、ruby rails node それぞれインストールされていることを確認できます。

環境構築としては以上になります。
ここまでで

• Ruby 3.1
• PostgreSQL
• Node 18

が利用できる環境を立ち上げることができました。

続いて Rails のインストールと起動を試します。

4. rails new

VScodeのターミナル（Ctrl+@）を開き rails new します。
この Dev Container は rails インストール済みなので、 gem install する必要はありません。

$ rails new -d postgresql .

5. データベース接続設定

Dev Container 設定により同時に起動している PostgreSQL に接続するため、ymlを修正します。

config/database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  # 以下を追記
  host: db
  username: postgres
  password: postgres

この設定は .devcontainer/docker-compose.yml に書いてあります。

database作成

VScodeのターミナル（Ctrl+@）で

$ bin/rails db:create
Created database 'my_app_development'
Created database 'my_app_test'

6. Rails Server起動

VScodeのターミナル（Ctrl+@）で rails server を起動します。

$ bin/rails s

Port Fowarding は自動で行われるので、設定する必要はありません。
右下のブラウザーで開くボタンを押します。

無事起動できました。

既存のRailsプロジェクトに追加する場合

新規Railsプロジェクトを作成する場合と同様に、テンプレートからDev Container設定ファイルを作成すれば問題ありません。
必要に応じてDockerfileのカスタマイズなどを行って、プロジェクトにあったイメージを作成しましょう。

まとめ

テンプレートを利用して、かんたんにDevContainer環境を起動することができました。
今回使用した Rails + PostgreSQL の他にも、たくさんのTemplateやFeatureが用意されているので、是非活用してみてください。

https://containers.dev/templates

https://containers.dev/features