Visual Studio Code Dev Containers での開発環境構築について調査した結果を備忘録として残しておく

Dev Containers について

以下のような構成になる

Architecture Containers

引用元: https://code.visualstudio.com/docs/devcontainers/containers

以下のようなメリットがある

  • プロジェクトごとのミドルウェアなどをコンテナに閉じ込めることができる
    • ホスト環境を汚さない
    • VS Code の Extention もコンテナに閉じ込められる
  • 環境構築を自動化できる
    • 新規に作成したり、別のPCでの作り直しが簡単

環境構築について

前提条件

VS Code で以下の Extention をインストールする

実際の例

新規で作成する場合

  1. VS Code の左下の「><」ボタンを押下
  2. 「新しい開発コンテナー…」 を選択
  3. ベースとなる設定を選択する

基本的には Dockerfile or Docker Compose の話になるのでそちらに慣れていれば問題なくできると思われる

テンプレートの使用

  1. コマンドパレットで「Add Dev Container Configuration Files…」を選択
  2. 「ワークスペースに構成を追加する」を選択
  3. 「すべての定義を表示…」を選択
  4. 以降は新規で作成する場合と同様
    4-1. ℹ️を押下することでテンプレートの使い方やカスタマイズ方法が表示される

Tips

ホスト側の DB クライアントから接続したい場合

以下の２つのファイルの設定を修正する必要がある
※ポート番号はホスト側と被らないようにしておくこと

ソースコードでの設定

設定変更した際はリビルドを行うこと

version: '3'

services:
  # 省略・・・
  db:
    # 省略・・・
    ports:
      - "5433:5432"
  # 省略・・・

{
  // 省略・・・
  "forwardPorts": ["5433:5432"],
  // 省略・・・
}

DB クライアントでの設定

ポイントとなる設定は以下

  • ホスト名/アドレス: 127.0.0.1
  • ポート番号: 5433 ※ソースコード側でマッピングした値
Architecture Containers

VS Code の設定および拡張機能の追加

以下を設定することで開発者間で同じ設定と拡張機能をインストールした状態で開発が行える

{
  "customizations": {
    "vscode": {
      // 設定値は、拡張機能 > ⚙️ > 拡張機能 ID のコピーで取得
      "extensions": [
        "misogi.ruby-rubocop"
      ],
      // 設定値は、 settings.json で取得
      "settings": {
        "editor.tabSize": 2,
        "editor.renderWhitespace": "all",
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
        "diffEditor.ignoreTrimWhitespace": false
      }
    }
  }
}