🎉

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

takeyuweb2023/01/11に公開

皆さんは 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

my_app [WSL: Ubuntu] - Visual Studio Code

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

Add Dev Container Configuration Files...

Show All Definitions... を選択

Show All Definitions...

Ruby on Rails & Postgres を選択

Railsで検索すると Ruby on RailsRuby 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 で進みます。
Ruby version

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のバージョンを指定するなど)が、今回はこのまま進みます。
Added Dev Container Configuration Files

3. Reopen in Container

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

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

Dev Container 起動完了

起動完了すると、いつものVSCodeの画面が表示されます。
左下を確認すると Dev Container で開いていることを確認できます。
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 .

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プロジェクトに追加する場合

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

まとめ

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

https://containers.dev/templates

https://containers.dev/features

タケユー・ウェブ株式会社

Ruby on Rails や AWS が得意なWebサービス受託開発会社です。 中小規模のWebサービスの新規開発の他、他の個人開発者などから引き継いで保守運用を行ったりしています。 新規開発、お手伝いや顧問、レガシーなRailsプロジェクトの保守など、ニーズにあわせて対応できます。ご相談ください。

Discussion

ログインするとコメントできます