Open8

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

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

$ mkdir sample_app
$ cd sample_app

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

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

VSCodeのリモートWSLでフォルダを開く

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


実行結果

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

一旦WSLに戻る

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

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

変更する箇所は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
		:

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

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

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

以上です。

Docker Dev Environments?
知らない子ですね 🤔

作成者以外のコメントは許可されていません