22歳の大学生です、2025/4月から就職してエンジニアをやります
- サッカー好き
- 国内サッカー：柏レイソルサポーター
- 海外サッカー：プレミア、セリエを観戦 Roma推し
- ラノベが欲しい
- 昇降デスクも欲しい
- 電動シェーバーの快適さに驚いている
最近はNest.js × Next.jsで個人開発を進めています
やらなきゃいけないことがたくさん、、、
本記事のあらすじ
個人開発を進めているプロダクトで起きたことです。
以下のように、node_modulesをボリュームにマウントしています。
※docker-compose.yml
service:
nestjs:
build:
context: ./api
dockerfile: Dockerfile
volumes:
- ./api/nest-api:/app
- nestjs_node_modules:/app/node_modules
ports:
- '3000:3000'
networks:
- app-networks
networks:
app-networks:
driver: bridge
volumes:
nestjs_node_modules:
volumes:の項目で、nestjsのディレクトリとnode_modulesをそれぞれボリュームにマウントしています。
node_nodulesをボリュームにマウントすると、、、
すると、エディタでは以下の画像のように表示されてしまいます。
見て欲しいのは1行目にある赤い波線の箇所です。
エディタからは、モジュールまたはそれに対する型宣言が見つからないと言われてしまいました。
画像のファイルは、エントリポイントであるmain.tsですがあくまで一例です。
他のどのファイルを見ても同じ出力がされてしまいます。
アプリケーション自体は問題なく動きます。リクエストに対してレスポンスも返してくれました。あくまでエディタが問題を示してくれています。
解決策
結論、Dev Containsersという拡張機能に頼ることにしました。
簡単に言うと、VSCodeごとコンテナの中に突っ込んじゃおうぜ、みたいな感じです。
コンテナに入ると、ボリュームを参照できるため、エディタ側からの問題出力も改善されるということです。
以下の記事を参考にしました。
VSCode&Docker Volumeにおけるnode_modules問題を解決する
セッティングについて
この拡張機能をVSCodeからインストールしてください。
その後、使いたいプロジェクトのルートディレクトリに以下のディレクトリとファイルを作成してください。
- .devcontainerディレクトリ
- ./.devcontainer/.devcontainer.jsonファイル
この.devcontainer.jsonにもろもろの設定をするわけですが、僕は以下のように書きました。
{
//適当なプロダクト名を
"name": "〇〇",
//このファイルからdocker-compose.ymlまでの相対パス
"dockerComposeFile": "../docker-compose.yml",
//入りたいコンテナのサービス名
"service": "nestjs",
//コンテナのワーキングディレクトリ
"workspaceFolder": "/app"
}
その後、左下のアイコンから、「コンテナで再度開く」を選択してください。
VSCodeごとコンテナに入り、ワーキングディレクトリを開きながら、マウントされたnode_modulesをエディタが読み込みながら作業を進めることができます。
終わりに
僕は最近エンジニアのポッドキャストを聞くことにハマっています。
以下のポッドキャストが面白かったのでぜひ。
Apple podcastから聴くことができます。
Stirpe凄えってなります。