愛と幻想のアジャイル

道産子ソフトウェアエンジニアの技術メモ

さくっとWSL2 + Docker + VSCode Remote - Containers でNode.jsが動く開発環境を構築する(devcontainer.jsonは自動生成する)

以前、VSCode Remote -Containers を使ってDockerコンテナにアクセスする方法を記事に書いた。

takeken1.hatenablog.com

しかし上記記事ではdevcontainer.jsonを手書きする必要があった。

今回は、devcontainer.jsonを用意せず、Dockerfileのみ用意してコンテナにアクセスする方法を記載する。

目次

前提

  • WSL2
  • Docker 20.10.0
  • VSCode Remote -Containers

ローカルにDockerfileを作成する

$ mkdir /home/<ユーザ>/workspace/my-project
$ cd /home/<ユーザ>/workspace/my-project
$ touch Dockerfile
  • Dockerfileの中身を書く
    • Node.jsを使えればいいので、これだけ
FROM node:lts

VSCode Remote - Containers でDockerコンテナを生成・アクセスする

(/home/<ユーザ>/workspace/my-projectにて)
$ code .
  • 下記が起動することを確認(左下がWSL:Ubuntuとなっている)

f:id:k1take:20210102190837p:plain

  • Ctrl+Shift+P, コマンドパレットを表示
  • Reopen in Container を選択

f:id:k1take:20210102191236p:plain

  • Dockerfile を選択

  • From 'Dockerfile'を選択

f:id:k1take:20210102191618p:plain

  • 下記の通り、DockerコンテナにアクセスしたVSCodeが新たに起動すればOK
    • 左下にDev Container:と表示されればOK。

f:id:k1take:20210102192008p:plain

  • devcontainer.jsonが自動生成されていることを確認

.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-dockerfile
{
    "name": "Existing Dockerfile",

    // Sets the run context to one level up instead of the .devcontainer folder.
    "context": "..",

    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
    "dockerFile": "../Dockerfile",

    // 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 to run commands after the container is created - for example installing curl.
    // "postCreateCommand": "apt-get update && apt-get install -y curl",

    // Uncomment when using a ptrace-based debugger like C++, Go, and Rust
    // "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

    // Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
    // "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],

    // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
    // "remoteUser": "vscode"
}
  • カレントディレクトリが/workspace/my-projectになっていることを確認

f:id:k1take:20210102193150p:plain

Node.jsが動くか動作確認

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
$ cd nextjs-blog
$ npm run dev
  • ブラウザに下記が表示されればOK

f:id:k1take:20210102193726p:plain

おわりに・余談

  • この方法の良い点
    • さくっとNode.jsの開発環境が構築できる
    • ディレクトリのマウントは自動でしてくれている(っぽい)
    • Git も入っている。また、GitHubなどにpushもできる(Gitアカウント設定はホスト側の設定を読み込んでいるっぽい)
  • 変更した方がいいかもしれない点
    • devcontainer.jsonのname(VSCode接続名)は変えても変えなくてもいいが、変えたほうがVSCode上分かりやすそう
    • Dockerfileの配置場所を.devcontainer直下にした方がすっきりしそう
      • その際は、devcontainer.jsonのcontextを"/"に、dockerFileをDockerfileに変更すればよい(はず)
  • その他
    • VSCodeを終了するとコンテナも終了する

以上。