Zenn
Open8

Docker on WSL2でNode.jsをVSCodeで開発する方法

Docker
Node.js
WSL 2
TakedaTakumiTakedaTakumi

WSL上に開発用フォルダを作成し、そこに移動する。

$ mkdir sample_app
$ cd sample_app
TakedaTakumiTakedaTakumi

doker-composeファイルを格納する。

Node.jsで開発するための下記のファイルを格納する。

docker-compose-localdev.yaml
version: "3"
services:
  node:
    image: node:14-buster
    stdin_open: true
    tty: true
    volumes:
      - .:/work
    working_dir: /work
    ports:
      - 3000:3000

ポート番号等、必要に応じて修正する。

TakedaTakumiTakedaTakumi

VSCodeのリモートコンテナでフォルダを開きなおす


実行結果

.devcontainerディレクトリが生成され、カレントディレクトリがworkspaceになれば成功。

TakedaTakumiTakedaTakumi

一旦WSLに戻る

カレントディレクトリがworkspaceのままだと最近使用した項目を開くメニューで見分けがつかなくなるので、ディレクトリ名を変更する必要があります。

TakedaTakumiTakedaTakumi

カレントディレクトリ名を変更する

変更する箇所は2カ所です。
workspaceを任意の名前に変更してください。

変更前

.devcontainer/devcontainer.json
{
		:
	"workspaceFolder": "/workspace",
		:
}
.devcontainer/docker-compose.yml
version: '3'
services:
		:
    volumes:
      # Update this to wherever you want VS Code to mount the folder of your project
      - .:/workspace:cached
		:

↓
変更後

.devcontainer/devcontainer.json
{
		:
	"workspaceFolder": "/sample_app",
		:
}
.devcontainer/docker-compose.yml
version: '3'
services:
		:
    volumes:
      # Update this to wherever you want VS Code to mount the folder of your project
      - .:/sample_app:cached
		:
TakedaTakumiTakedaTakumi

リモートコンテナで再度フォルダを開く

コンテナがリビルドされて、カレントディレクトリの名前が変更されているのが確認できます。

最近使用した項目を開くの項目も、指定したディレクトリ名に代わっているのが確認できるかと思います。