VSCodeのdevcontainerで開発環境を構築する

VSCodeのdevcontainerを使って開発環境を構築するやり方をまとめる。

Docker Desktop代替

Docker Desktopでも良いが、諸般の事情により幾つかの別の選択肢を検討。まあどれでも良い。

  • Podman
  • Rancher Desktop
  • OrbStack

Dockerfileの作成

Node.jsの開発環境を構築するDockerfileを作成する。これはNode.jsのバージョン18を指定した最小限の設定。

FROM node:18
WORKDIR /app
COPY ./package.json /app
RUN npm install
COPY ./ /app

devcontainer.jsonの作成

.devcontainer/devcontainer.jsonを作成する。

{
    "name": "Existing Dockerfile",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "GitHub.copilot"
            ]
        }
    },
    "features": {
        "ghcr.io/devcontainers/features/github-cli:1": {}
    }
}

devcontainerの起動

左下の><をクリックしてVSCodeのコマンドパレットからReopen in Containerを選択する。

GitHub CLIの認証

GitHub CLIの認証を行う。gh auth loginを実行するとブラウザが開いて認証を行うことができる。

$ gh auth login

SSHでの認証を行う。

GitHubリポジトリのpull

GitHub CLIを使ってリポジトリをpullする。gh repo cloneを実行するとリポジトリをpullすることができる。

$ gh repo clone
  • Docker Desktop代替
  • Dockerfileの作成
  • devcontainer.jsonの作成
  • devcontainerの起動
  • GitHub CLIの認証
  • GitHubリポジトリのpull