DevContainerで快適開発

はじめに

WEBアプリ開発の際、開発環境構築に無駄に時間がかかってしまいました。
今回は、それを防ぐためにDevContainerの学習をしたので共有します。

DevContainerとは

Dockerのコンテナ技術を利用した、VSCodeで利用できる開発環境構築ツールです。

DevContainerは、公式テンプレートからの新規作成のほか、既存のDockerfile、compose.yamlから作成することもできます。

開発環境の作成

この記事の環境は以下の通りとなっています。

• Windows11 Home
• Docker Desktopインストール済み

今回は、Microsoftが用意したDevContainer用のイメージではなく、Dockerfileとcompose.yamlを用意してDevContainerを作成することにします。
まず以下の通り、ファイルを用意します。

DevContainer-test
│  compose.yaml
│
└─.devcontainer
        devcontainer.json
        Dockerfil

Goを使ったWEB APIサーバーを開発するため、Go開発用のDockerfileを用意します。

Dockerfile

FROM golang:1.22.3-bullseye

RUN useradd -ms /bin/bash dev

USER dev

WORKDIR /app

EXPOSE 8080

COPY . /app

CMD ["go", "mod", "tidy"]

docker composeには、データベースserviceを用意して、通信できるようにします。

compose.yaml

services:
  devcontainer:
    build:
      context: .
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - .:/app
    tty: true
    command: /bin/bash
    ports:
      - "8080:8080"

  database:
    image: postgres:13.15-bullseye
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: devTest
    ports:
      - "5432:5432"

肝心のdevcontainer.jsonファイルの中身を見ていきましょう。

devcontainer.json

{
  "name": "DevContainer test",
  "dockerComposeFile": "../compose.yaml",
  "service": "devcontainer",
  "workspaceFolder": "/app",
  "customizations": {
    "vscode": {
      "extensions": [
        "golang.go"
      ]
    }
  }
}

devcontainer.json

各プロパティについて説明していきます。

公式リファレンス

name

左下の><や、上部の検索ボックスに表示される名前

dockerComposeFile

compose.yamlがあるファイルを相対パスで記述

service

どのserviceで作業するか

workspaceFolder

コンテナ接続時、自動で開くフォルダを選択

customizations

devcontainer.json対応サービス固有の設定が記述できる。ここでは、VSCodeを使用しているため、VSCodeの設定を記述

extensionsで、コンテナ起動時に自動でインストールする拡張機能を設定できる

settingsでVSCodeの設定ができるが、settings.jsonをワークスペースに用意したほうが直感的でわかりやすいため、ここには記述しないことにしました。

最後に

以上で、開発環境を簡単に用意できました。
ただ、実際には全く簡単にできなくて、何度もコンテナがうまく作成できませんでした。
ここでは、その内容を説明していきます。

失敗談

dockerComposeFileの指定

相対パスではなく、ただcompose.yamlとだけ書いていたため起動してもすぐエラーが出ました。

- "dockerComposeFile": "compose.yaml"
+ "dockerComposeFile": "../compose.yaml"

devcontainerserviceが勝手に停止してしまう

DevContainerを開いても、すぐにdevcontainerservice(Go開発環境)が停止してしまい、VSCodeがエラーを吐いてしまいました。
そのため、compose.yamlに以下の2行を追加し、serviceがbashを起動し続けるようにしました。

services:
  devcontainer:
  #...
+    tty: true
+    command: /bin/bash

データベースとの通信

当初は、Dockerfileだけ用意して、compose.yamlは用意していませんでした。
そのため、個別にDocker Networkを用意したり、DevContainerとデータベースコンテナを別々に起動する手間がありました。
その後、compose.yamlからもDevContainerを作成できると知って今回の方法になりました。

コンテナのリビルド

コンテナの構成を変更するため、Dockerfile compose.yaml devcontainer.jsonの内容を書き換えても、コンテナのリビルドをしなければ変更が反映されません。リビルドの方法を紹介します。

ctrl+SHIFT+Pでコマンドを表示し、Dev Containers: Rebuildと入力したら出てきます。

感想

なんとなく難しそうで避けていたDevContainerですが、いざ使ってみるとかなり便利そうでワクワクしました。
これまではWSL上で開発していましたが、様々なアプリをインストールすることで環境が汚れてしまっているのが気になっていました。コンテナ上で開発すれば、その問題も解決できるので、今後も使っていきたいです。