前置き

前回express の環境をdockerで作成した際、importでエラーが出た状態になっていたと思うのでその解消についての記事になります。

また、Dockerdで環境構築したが、node_modulesdでエラーが出た、VS コードDev Containersを使ってみたいという方にも読んでもらたら嬉しいです。

DockerでExpress + TypeScriptの環境構築をする

https://yasdtech.com/blog/4vvnsdlai

上記記事でExpressの環境を作成すると、以下のようにexpressのモジュールがないというエラーが出ると思います。

これはコンテナ内にはnode_modulesがあるのにローカルにはないため、VSコードがnode_modulesを見れておらず、このようなエラーを吐いているという状態になります。

これを回避するためにVSコードのdev comtainersという拡張機能を使います。

これを使ってコンテナ内でVSコードを開くことでVSコードがnode_modulesを検知できる状態にしていきます。

Dev Containerとは

Dev Containersは、Dockerコンテナを使用した開発環境の構築・管理を簡単にするVS Codeの公式拡張機能です。この機能を活用すると、以下のようなメリットがあります。

• ローカルとコンテナ環境の差異を吸収
  コンテナ内で直接VS Codeを動作させるため、node_modulesのような依存関係がローカルに存在しなくても問題ない
• 統一された開発環境
  チームで同じ開発環境を共有しやすくなり、環境構築の手間を大幅に削減可能

特にnode_modulesは環境内のnode_mdulesとプロジェクト内のnode_modulesでコンフリクトさせないため、

コンテナ内にしかnode_modulesを作成しないといったことをするので、node系の何かを使う方は知っておいておいて損はないかと思います。

設定手順

まずはこのDev Containersというのをインストールしてください！

インストールが完了したら次にこれを使うために設定ファイルを書きます。

.devcontainerというディレクトリを作成して、その中にdevcontainer.json というファイルを作成し、以下の内容を記載します。

{
  "name": "Node.js Dockerized Development",
  // composeファイルの名前
  "dockerComposeFile": "docker-compose.yml",
  // composeで指定したservice名
  "service": "app",
  // コンテナ内のworkdir
  "workspaceFolder": "/usr/src/app",
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "extensions": [
    "dbaeumer.vscode-eslint", // 必要に応じて追加 (ESLint)
    "esbenp.prettier-vscode", // 必要に応じて追加 (Prettier)
    "ms-vscode.vscode-typescript-tslint-plugin"
  ]
}

• dockerComposeFile
  使用するdocker-compose.ymlファイルを指定します。
• service
  開発に使用するサービス名（例：app）を指定します。これはdocker-compose.yml内のservicesセクションで定義した名前と一致させてください。
• workspaceFolder
  コンテナ内での作業ディレクトリを指定します。このディレクトリは、Dockerfileで設定したWORKDIRと一致させる必要があります。
• extensions
  必要なVS Code拡張機能をここで指定できます（例：ESLintやPrettierなど）。

この辺は、前回のDockerでExpress環境を作成する記事で書いたDockerfileとdocker-composeファイルに合わせているので参考にしていただけたらと思います。

記載が終わったらdocker compose upで①コンテナを起動した状態で左下の青＝＞②実行中のコンテナにアタッチ＝＞③出てきたコンテナをクリックします

ここまででできればコンテナの中に入れたことになります。

最後に今回は/usr/src/app/で作業をしたいので、command + o　＝＞　/usr/src/app/と検索して、作業ディレクトリを開きます

ここはDockerfileで指定したWORKDIR の部分に合わせてください！

前回のExpress環境構築記事では/usr/src/appをWORKDIRに設定していたので、今回はここで開きます。

以下のようにexpressのところにエラーが出ていなければうまくコンテナ内に入れたことになります。

まとめ

Dockerでの開発環境構築時に起こるモジュール検出エラーは、VS CodeのDev Containers拡張機能を使うことで簡単に解消できます。

この機能を使えば、ローカル環境に依存しない統一された開発環境を構築でき、作業効率が大幅に向上します。

コンテナ内で直接作業したいといった場合に便利なのでぜひ、使ってみてください！