DevContainer & Docker Compose を使った Next.js の開発環境構築

これは、Next.jsの学習者が開発環境を素早く構築し、学習に専念できるようにするために作られたテンプレートです。

DevContainer & Docker Compose を使った Next.js の開発環境構築

Next.jsの学習中、何度も開発環境を作ったり消したりして開発環境を作るのに時間がかかっていたので、時間の節約のためにNext.js用のDevContainer & Docker Compose テンプレートを作りました。

https://github.com/0701pino/nextjs-devcontainer-starter

前提条件

本テンプレートを使うには、以下がインストールされるのが前提条件です。

• Visual Studio Code
• Visual Studio Code 拡張機能 Dev Containers
• Docker Desktop

テンプレートの特徴

このテンプレートは、DevContainerとDocker Composeを使って開発環境を作ります。
開発はコンテナ内で行うため、環境を汚しません。
DevContainerの設定で、Visual Studio Codeの設定や拡張機能のインストールをするので、コンテナを作り直すたびに再設定や拡張機能の設定をする必要はありません。

自動インストールされるVisual Studio Code拡張機能

開発に必要なVisual Studio Code拡張機能は自動的にインストールされます。
これによって、よく使う拡張機能がインストールされます。
インストールされる拡張機能は以下の通りです。

• Japanese Language Pack for Visual Studio Code
• ESLint
• Prettier
• Auto Rename Tag
• GitLens

これは、.devcontainer/devcontainer.jsonで設定できるので、自分の好きな拡張機能をインストールするように設定してください。

インストールされるバージョン

インストールされるバージョンは以下の通りです。

• node: v18.12.1
• yarn: 1.22.19
• next: 13.4.9
• react: 18.2.0
• typescript: 5.1.6
• tailwindcss: 3.3.2

Visual Studio Codeの設定の自動化

Visual Studio Codeの設定も自動化もしています。
ファイル保存時の自動フォーマットは必ず行いたいので、毎回設定しなくても済むように設定を行っています。

開発用とリリース用のDocker設定

Dockerの設定については、開発用とリリース用を分けています。
開発用では、"node_modules"をホスト側に置かずにDockerのvolumeにしています。
リリース用では、マルチステージビルドを用いてDockerイメージのサイズを小さくしています。

使用方法

こちらからテンプレートのリポジトリをクローンするかリポジトリのテンプレートとして使ってください。

現在、node_modulesのVolume名をnext_app_node_modulesという名前にしています。
これは、サービス名がnext_appのnode_modulesということでこういう命名にしていますが、このテンプレートから複数の開発環境を作ったときに名前が重複するので、
サービス名を変更するシェルを.devcontainerに用意しています。
以下のようにchange_service_name.shを実行すると、サービス名が"next_app"から"app_name"へ変更されます。また、"devcontainer.json"の"next_app_devcontainer"が"app_name_devcontainer"、"next_app_node_modules"が"app_name_node_modules"に変更されます。

sh change_service_name.sh app_name

まとめ

何か間違っていたら、ぜひコメントで教えてください。