目標

Mac OS で Node.js の開発環境を構築する。

要件

バージョンを切り替えられるようにする。
ただしプロジェクトの開発や実行はコンテナ上で行うため、プロジェクト毎に切り替える必要はない。

選択

nodebrew でのインストールを選択。

nodebrew のインストール

ちょっと面倒くさい。

まずインストール。

brew install nodebrew

初期セットアップ。

nodebrew setup

パスを通すために以下を追加

# Setting PATH for nodebrew
PATH="${HOME}/.nodebrew/current/bin:${PATH}"

export PATH

node.js のインストール

最新の安定版のインストール

nodebrew install stable

Fetching: https://nodejs.org/dist/v20.10.0/node-v20.10.0-darwin-arm64.tar.gz
######################################################################### 100.0%
Installed successfully

安定版の利用

nodebrew use stable

use v20.10.0

Dev Containerの作成

下記参考
https://qiita.com/nikawamikan/items/74e9a561e2d07feb8566

.devcontainer/devcontainer.json 追加

VSCの機能で Dev Containers: Add Dev Containers Configuration files... 開発コンテナ： 開発コンテナ構成ファイルを追加... を選択。

既存の docker-compose.yml の利用を選択して、あとはデフォルトで作成。

リモートのビルドと接続

VSCの歯車アイコンから「コンテナで再度開く」を選択すると、イメージが無ければ自動でビルドして接続まで行われる。

リモートの拡張機能の追加

リモートのリポジトリで開発コンテナ上に必要なVSC拡張機能をインストールする。
ここにインストールしただけでは devcontainer.json に反映されないため、歯車アイコンから「devcontainer.jsonに追加」を選択して追加する。

...
	// 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": "/app",
	"customizations": {
		"vscode": {
			"extensions": [
				"mhutchie.git-graph",
				"GitHub.copilot",
				"GitHub.copilot-chat"
			]
		}
	}
...

node_modules をホストから名前付きボリュームに変更

nodeモジュール追加の高速化のため、VSCマニュアルのAdvanced Performanceページを参照して next-app/node_modules フォルダをコンテナ管理の名前付きボリュームに変更。

services:
  next-app:
    container_name: next-app
...
    # volumes:
      # Update this to wherever you want VS Code to mount the folder of your project
      - ..:/app:cached
      - node-node_modules:/app/next-app/node_modules
...

volumes:
  node-node_modules:

デバグ環境の整備

launch.json の設定

Next.js公式ドキュメントのDebugging with VS Code をそのまま使えばデバグ操作が可能。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "cwd": "${workspaceFolder}/next-app"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "cwd": "${workspaceFolder}/next-app",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

TypeScriptコードのChrome上デバグ

上記のように VSCode の Chrome デバグモードで起動すると、Chrome の _N_E ディレクトリ内にデバグ用の tsx ファイルが含まれており、ブレークやステップ実行を行う事ができる。

_N_E はNext.jsによって生成されたビルドアーティファクトを含むディレクトリ。