VS CodeとDockerを使用した開発コンテナの準備手順

開発環境を統一し、チーム全員が同じ環境で作業できるように、VS CodeとDockerを使用してプロジェクトごとの開発コンテナを準備する方法を紹介します。

必要なソフトウェアのインストール

1. Dockerのインストール
   Docker公式サイトからDocker Desktopをダウンロードし、インストールします。

2. VS Codeのインストール
   VS Code公式サイトからVS Codeをダウンロードし、インストールします。

3. VS Codeの拡張機能のインストール
   VS Codeを開き、拡張機能タブからDev Containersを検索し、インストールします。

プロジェクトのディレクトリ構成

新しいプロジェクトを開始する場合、または既存のプロジェクトにDockerを導入する場合、以下のディレクトリ構成を目指します。

/my-project
　　|-- .devcontainer
　　| |-- devcontainer.json
 | |-- node_modules
　　|-- Dockerfile
 |-- gulpfile.js
　　|-- src
　　|-- package.json

Dockerfileの作成

プロジェクトのルートディレクトリにDockerfileを作成し、以下の内容を記述します。

# ベースイメージとして Node.js のバージョン 10.17.0 を使用
FROM node:10.17.0

# アプリケーションディレクトリを作成
WORKDIR /usr/src/app

# アプリケーションの依存関係をインストール
COPY package.json ./
RUN npm install

# アプリケーションのソースをバンドル
COPY . .

# ポート 3000 でアプリを実行
EXPOSE 3000
CMD [ "npx", "gulp" ]

devcontainer.jsonの作成

.devcontainer/devcontainer.jsonを作成し、以下の内容を記述します。

{
    // コンテナの名前を指定します。VS CodeのUI上で表示される名前として使用されます。
    "name": "my-project",

    // コンテナのビルドに関する設定を行います。
    "build": {
      // 使用するDockerfileのパスを指定します。
      "dockerfile": "../Dockerfile",
      // Dockerのビルドコンテキストとして使用するディレクトリのパスを指定します。
      // 通常、プロジェクトのルートディレクトリを指定します。
      "context": ".."
    },

    // コンテナを起動する際の追加の引数を指定します。
    // この例では、コンテナ内のユーザーとして"node"を使用することを指定しています。
    "runArgs": [
      "-u", "node"
    ],

    // VS Codeの設定を指定します。この例では、統合ターミナルのシェルとしてbashを使用することを指定しています。
    "settings": {
      "terminal.integrated.shell.linux": "/bin/bash"
    },

    // コンテナ内で自動的にインストールするVS Codeの拡張機能を指定します。
    "extensions": [
      "dbaeumer.vscode-eslint"
    ],

    // ホストマシンとコンテナ間で転送するポートを指定します。
    // この例では、ホストの3000番ポートがコンテナの3000番ポートに転送されます。
    "forwardPorts": [3000]
}

コンテナの起動

cmd + shift + p で以下添付の「開発コンテナー...」を検索して、対象のプロジェクトのディレクトリを開きます。これにより、VS CodeはDockerイメージをビルドし、コンテナ内でプロジェクトを開きます。

開いたら自動でイメージからコンテナが作成され環境立ち上がります。

まとめ

VS CodeとDockerを使用して、プロジェクトごとの開発コンテナを準備することで、チーム全員が同じ開発環境で作業を進めることができます。これにより、環境差によるトラブルを大幅に減少させることができます。