🎡

Devcontainer がデバッグ環境構築のハードルを一気に下げるお話

seiji_omi

2024/03/08に公開

これは何？

Devcontainerの導入することで、参画者の環境構築ハードルを一気に下げることができるお話です。
構築の手順を一通り載せておりますので、参考になれば幸いです。

Devcontainerとは？

ざっくり私の認識ですが、Dockerコンテナの中に開発環境を作成して、開発環境のコード化を行うことで、環境構築を楽にするVSCodeの機能です。

メリット

環境構築にかかるコストを大きく減らせる。
- Dockerインストール済みであれば、ほぼ０に近づけられます。
環境構築のナレッジのコード化
- 環境構築で躓く部分をDockerfileに記述することで、次の人は何もせずとも躓きポイントを超えることができます。
デバッグ環境も容易に構築可能
- デバッグ環境は、意外と躓くポイントが多いですし、環境依存のことも多いので解決に時間がかかりますが、Devconteinerを利用することで容易に構築可能です。

デメリット

Devcontainerの記事が少ないので、導入時に発生するエラーへの対処の難易度が高い
ですので、今回の記事を１例にしていただければと思います。

実際にやってみる

今回はNestjsの環境構築を行なってみます。

Nestjsの初期設定

参考
https://docs.nestjs.com/first-steps

インストール

yarn global add @nestjs/cli
nest new nest_devcontainer

起動

yarn run start

起動確認
http://localhost:3000/

いつもの

初期設定

VSCode左下の><をクリック

開発コンテナー構成ファイルを追加

ワークスペースに構成を追加する
こちらを選択することでGit上で構成ファイルを管理出来ます。

定義済みのコンテナー構成定義から

Node.js & TypeSctipt
導入する、言語などを選択してください。

バージョンを指定してください。

お好きな拡張機能を追加してください。

.devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-18-bullseye",
	"features": {
		"ghcr.io/devcontainers/features/github-cli:1": {},
		"ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {}
	}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

数箇所修正を加えて行きます。

imageの変更

imageがデフォルトのものが設定されていますが、ライブラリを追加したいとか、MySQLも一緒に建てたい等の拡張性を持たせるために、docker-composeを指定する方が良いと思います。

.devcontainer/devcontainer.json

...
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"dockerComposeFile": "docker-compose.yml",
	// 開発環境として利用する、docker-compose.ymlのserviceを指定
	"service": "app",
	// 
	"workspaceFolder": "/workspace",
	// 以下定義は、削除
	// "image": "mcr.microsoft.com/devcontainers/typescript-node:1-18-bullseye",
...

.devcontainer/docker-compose.yml

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      # .devcontainer ディレクトリのdocker-comopse.yml なので、1つ上のディレクトリをマウントする
      - ..:/workspaces:cached
      - nestjs_devcontainer_node_modules:/workspaces/node_modules
    command: sleep infinity

volumes:
  nestjs_devcontainer_node_modules:

.devcontainer/Dockerfile

FROM mcr.microsoft.com/devcontainers/typescript-node:1-18-bullseye

パッケージマネージャーのインストール

Devcontainerでは、Dockerfileでyarn installやbundle installを行わず、postCreateCommandでインストールを実施するのが恐らく一般的です。

.devcontainer/devcontainer.json

...
    // node_modulesをvolumeに指定しているので、root から　node にchownした後インストール
	"postCreateCommand": "sudo chown node node_modules && yarn install",
...

デバッグ環境の整備

デバッグタブから、launch.jsonファイルを作成します。を選択

Node.js

.vscode/launch.jsonが出来上がりますので、以下の様に変更をして下さい。
launch.jsonはなかなかナレッジが溜まりずらい部分でこの部分で沼ることはよくありますが、Devcontainerを利用することで沼らなくてすみます。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "プログラムの起動",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "start:debug",
      ],
      "console": "integratedTerminal",
    }
  ]
}

拡張機能の設定

Devcontainerには、拡張機能も共通化することが出来ます。
拡張機能を右クリックして、devcontainer.jsonに追加を選択することで、

拡張機能がコード上反映されているのでgit上で管理をして下さい。
.devcontainer/devcontainer.json

...
	"customizations": {
		"vscode": {
			"extensions": [
				"firsttris.vscode-jest-runner"
			]
		}
	},
...

立ち上げ

VSCode左下の><をクリック>コンテナで再度開く

Gitタブから安全でないリポジトリの管理を選択してworkspacesを選択

F5キーもしくは、デバッグタブの▶️をクリック

起動を確認

ブレイクポイントを設定して、アクセスしてブレイクすることを確認
http://localhost:3000/
デバッグコンソールも動作していることを確認

以上でDevcontainerの構築一例となります。

まとめ

開発環境を構築するのは慣れない言語や現場などで、最初に躓くポイントだと思いますし、沼ると出口が見えずかなり精神的にも苦しみます。
こういった無駄な苦悩をしない様にDevcontainerが役に立てば幸いです。

また、デバッグ環境はローカル環境に強く依存する場合も多いですし、そもそも現場で使っている人も少数派のこともあり、結局使わないという選択肢になってしまう人も多いと思います。
デバッグ環境があれば個人的には生産性は上がると思っているので、ここの普及に繋がれば嬉しいです。

一応ここまで対応を行ったリポジトリを置いておきますので、参考になればと思います。

宣伝

スペースマーケットエンジニア募集しております！
こういったDX改善もどんどんできる環境ですので、ぜひご興味ある方は是非以下をご覧ください。

弊社は人、文化が良いなと個人的には感じておりますのでこちらも併せて読んでいただけますと嬉しいです。

スペースマーケット Engineer BlogPublication

スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket