概要

Visual Studio Code (以下、VSCode）の Remote ContainersでNodeコンテナを作成し、仮装環境で開発する。

環境

本記事を記載時点でのバージョン等を記載する

macOS Big Sur 11.2.1
VSCode 1.53
Remote - Containers v0.158.0

手順

Nodeを使用するフォルダを作成
VSCodeのNew Windowで新しいWindowを開く
Open folderで作成したフォルダを開く
コンテナ設定ファイルを作成する
4. 左下のRemote Containerのボタン(><が重なったようなマーク)をクリック
5. コマンドパレットが開くので、Remote-Containers: Add Development Container Configuration Files...を選択
6. Node.jsを選択
7. バージョンを選択（この記事では14を選択)
コンテナ仮装環境を開く
8. 左下のRemote Containerのボタン(><が重なったようなマーク)をクリック
9. Remote-Containers: Reopen in Containerをクリック
以上で開発環境の準備が整いました
終了する場合
11. 左下のRemote Containerのマークをクリック
12. ```Close Remote Connectionを選択

参考） Docker-compose.ymlで設定する場合

docker-compose

.devcontainer/devcontainer.json

{
	"name": "Node-test",
	"dockerComposeFile": "docker-compose.yml",
	"service": "app",
	"workspaceFolder": "/dir",
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/zsh"
	},

	"extensions": [
		"dbaeumer.vscode-eslint"
	],
	"remoteUser": "node"
}

.devcontainer/docker-compose.yml

version: '3'

services:
  app:
    build: 
      context: .
      dockerfile: Dockerfile
    command: sleep infinity
    volumes:
      - ..:/dir

.devcontainer/Dockerfile

ARG VARIANT="14"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
CMD [ "sleep", "infinity" ]