Dev Containerで開発環境構築

自分のMacに開発環境構築のためだけにNode.jsをインストールするのは、なんとなくローカル環境が汚れるような気がして嫌なのでVS CodeのDev Containerを使って開発している。

開発環境を構築する機会はそれほど多くないので、毎回手順を調べ直してしまう。ということで、自分用の手順メモ。

プロジェクト用のディレクトリ作成

まずは、適当なプロジェクト用のディレクトリを作成して、そこに移動してVS Codeを起動する。

% mkdir project-name
% cd project-name
% code .

Dev Containerの作成

VS Codeのターミナルで.devcontainer/を作成して、devcontainer.jsonとDockerfileを作成。

% mkdir .devcontainer
% touch .devcontainer/devcontainer.json
% touch .devcontainer/Dockerfile

// devcontainer.json

{
  "name": "project-name",
  "build": {
    "dockerfile": "Dockerfile",
  },
  "forwardPorts": [3000], //Next.jsなら3000、Astroなら4321

  "remoteUser": "node",

  "customizations": {
    // カスタム設定
  },
}

# Dockerfile
FROM mcr.microsoft.com/devcontainers/javascript-node:22

コマンドパレットから Reopen in Container を選択して、コンテナ内でプロジェクトを開く。

フレームワークのインストール

$ npx create-next-app@latest project-name

※コンテナ内の/workspaces/project-nameで例えば、npx create-next-app@latest .を実行するとディレクトリが空ではない（.devcontainer/があるから）ということでインストールができない。

インストールが完了すると、以下のような構造になる。

$ tree -a -L 2

. ← project-name/
├── .devcontainer
│   ├── devcontainer.json
│   └── Dockerfile
└── project-name
    ├── eslint.config.mjs
    ├── .git
    ├── .gitignore
    ├── .next
    ├── next.config.ts
    ├── next-env.d.ts
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── postcss.config.mjs
    ├── public
    ├── README.md
    ├── src
    └── tsconfig.json

作成された project-name/ 内の必要なファイルを、一つ上のディレクトリへ移動してから削除する。

$ mv project-name/* . # 隠しファイル以外が移動される
$ mv project-name/.gitignore . # .gitignoreも移動
$ rm -rf project-name # project-nameディレクトリ（中の.gitや.nextなども含め）を削除。

移動してきた node_modules は一旦削除し、package-lock.jsonをもとに依存関係を再インストールする。

$ rm -rf node_modules
$ npm ci

Git

Gitでの管理を始める。

$ git init
$ git branch -m main # masterならmainに変更

git init した直後のディレクトリ構成は以下。

$ tree -a -L 1

. ← project-name/
├── .devcontainer
├── eslint.config.mjs
├── .git
├── .gitignore
├── next.config.ts
├── next-env.d.ts
├── node_modules
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── public
├── README.md
├── src
└── tsconfig.json

git addして、Initial commitする。

$ git add .
$ git commit -m "Initial commit"

GitHub

GitHubのダッシュボードでリポジトリを作成して、ローカルで git remote add 、プッシュして完了。🎉

$ git remote add origin https://github.com/hayamak/project-name.git
$ git remote -v
  origin  https://github.com/hayamak/project-name.git (fetch)
  origin  https://github.com/hayamak/project-name.git (push)
$ git push -u origin main