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

$ mkdir sample_app
$ cd sample_app

TakedaTakumi

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

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

TakedaTakumi

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

TakedaTakumi

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

実行結果

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

TakedaTakumi

一旦WSLに戻る

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

TakedaTakumi

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

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

TakedaTakumi

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

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

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

TakedaTakumi

以上です。

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