さくっとNode.js開発環境構築 (WSL2 + Docker-Compose + VSCode Remote - Containers)

先ほど、WSL2 + Docker + VSCode Remote - Containers でNode.js開発環境構築を行った。

さくっとWSL2 + Docker + VSCode Remote - Containers でNode.jsが動く開発環境を構築する（devcontainer.jsonは自動生成する） - 愛と幻想のアジャイル

しかし、コンテナ名が自動生成だったので、固定にしたいと思った。 その場合、Docker Compose を使えばコンテナ名を指定できたので、手順を記す。

なお、大まかな手順は上記記事と同様なので、差分のみ記す

docker-compose.yml を作成

• プロジェクトルートに下記docker-compose.yml を作成する

version: '3'
services:
  node:
    image: node:lts
    container_name: node-container # コンテナ名

VSCode起動

• プロジェクトルートで下記コマンドを実行する

$ code .

VSCode Remote - Containers でコンテナ起動

• Ctrl+Shift+P でコマンドパレットを表示
• Reopen in Container を選択
• From 'docker-compose.yml'を選択

• .devcontainer/devcontainer.json、.devcontainer/docker-compose.yml が生成される

• .devcontainer/devcontainer.json の内容

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.154.0/containers/docker-existing-docker-compose
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
    "name": "Existing Docker Compose (Extend)",

    // Update the 'dockerComposeFile' list if you have more compose files or use different names.
    // The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
    "dockerComposeFile": [
        "../docker-compose.yml",
        "docker-compose.yml"
    ],

    // The 'service' property is the name of the service for the container that VS Code should
    // use. Update this value and .devcontainer/docker-compose.yml to the real service name.
    "service": "node",

    // The optional 'workspaceFolder' property is the path VS Code should open by default when
    // connected. This is typically a file mount in .devcontainer/docker-compose.yml
    "workspaceFolder": "/workspace",

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": null
    },

    // Add the IDs of extensions you want installed when the container is created.
    "extensions": []

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Uncomment the next line if you want start specific services in your Docker Compose config.
    // "runServices": [],

    // Uncomment the next line if you want to keep your containers running after VS Code shuts down.
    // "shutdownAction": "none",

    // Uncomment the next line to run commands after the container is created - for example installing curl.
    // "postCreateCommand": "apt-get update && apt-get install -y curl",

    // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
    // "remoteUser": "vscode"
}

• .devcontainer/docker-compose.yml の内容

version: '3'
services:
  # Update this to the name of the service you want to work with in your docker-compose.yml file
  node:
    # If you want add a non-root user to your Dockerfile, you can use the "remoteUser"
    # property in devcontainer.json to cause VS Code its sub-processes (terminals, tasks, 
    # debugging) to execute as the user. Uncomment the next line if you want the entire 
    # container to run as this user instead. Note that, on Linux, you may need to 
    # ensure the UID and GID of the container user you create matches your local user. 
    # See https://aka.ms/vscode-remote/containers/non-root for details.
    #
    # user: vscode

    # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer 
    # folder. Note that the path of the Dockerfile and context is relative to the *primary* 
    # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
    # array). The sample below assumes your primary file is in the root of your project.
    #
    # build:
    #   context: .
    #   dockerfile: .devcontainer/Dockerfile
    
    volumes:
      # Update this to wherever you want VS Code to mount the folder of your project
      - .:/workspace:cached

      # Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker-compose for details.
      # - /var/run/docker.sock:/var/run/docker.sock 

    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
    # cap_add:
    #   - SYS_PTRACE
    # security_opt:
    #   - seccomp:unconfined

    # Overrides default command so things don't shut down after the process ends.
    command: /bin/sh -c "while sleep 1000; do :; done"

• これでNode.jsのコンテナが生成されアクセスされた

以上。