DockerとVSCodeで簡単にNext.jsを試すためのメモ

概要

Next.js(React)を実験的に使用する際、数行のコマンドで簡単に環境構築したいことがあるので過程をメモ程度に残しておきます。実行環境は次のとおりです。

• Arch Linux x86_64(6.2.6-arch1-1)
• Docker 23.0.1
• Visual Studio Code 1.76.0

ホストで作業ディレクトリを作る

はじめにホスト側で作業するためのディレクトリを作成します。ここでは、ホームディレクトリにnextjsというディレクトリを作成します。

mkdir ~/nextjs

Dockerコンテナを作る

使用するDockerイメージはnode:latestのみです。

docker create -it --name nextjs-playground -u node -w /home/node/workspace -v $HOME/nextjs:/home/node/workspace node

• -it(-i, -t): exec サブコマンドを実行した際に終了せず入力待ちのまま待機します。
• --name: 名前付きコンテナを作成します。
• -u: コンテナ内で操作するユーザです。
• -w: コンテナを操作する作業ディレクトリです。
• -v: コンテナへバインドマウントするディレクトリとコンテナ内のマウント先です。

Next.jsプロジェクトを作る

次のコマンドで新たにNext.jsプロジェクトを~/nextjs内へ作成します。実行後はプロジェクトの構成を対話型で構築していくので質問に答えていきます。

docker start nextjs-playground
docker exec -it nextjs-playground yarn create next-app . --ts

ここまでを1行で行う場合はrunサブコマンドを使用します。

docker run -it --name nextjs-playground -u node -w /home/node/workspace -v $HOME/nextjs:/home/node/workspace node yarn create next-app . --ts

ただし、ホスト側へ~/nextjsディレクトリがない場合所有者がrootの~/nextjsが作成されるためあらかじめmkdirコマンドを実行しておく必要があります。

VSCodeへアタッチする

VSCodeへ拡張機能ms-vscode-remote.remote-containersをインストールし、コマンドパレットから>Dev Containers: Attach to Running Containerを実行します。起動中のコンテナ一覧から、nextjs-playgroundを選択するとアタッチされます。
Dev Containerのアタッチ機能は同じDockerイメージごとに同じ構成ファイルを使用するので、名前付きコンテナ固有の設定を追加していきます。コマンドパレットから>Dev Containers: Open Named Container Configuration Fileを実行し、名前付きコンテナごとの設定ファイルを編集することができます。

{
    "workspaceFolder": "/home/node/workspace",
}

拡張機能を使用する際はアタッチしたコンテナへインストールする必要があります。dbaeumer.vscode-eslintやesbenp.prettier-vscodeはnodeイメージ用の構成ファイルへ追加しておいても良いかもしれません。