Visual Studio Code の Remote Containers でNodeの仮装環境を作成する

概要

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

環境

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

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

手順

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