DevContainer & Docker Compose を使った Next.js の開発環境構築
これは、Next.jsの学習者が開発環境を素早く構築し、学習に専念できるようにするために作られたテンプレートです。
DevContainer & Docker Compose を使った Next.js の開発環境構築
Next.jsの学習中、何度も開発環境を作ったり消したりして開発環境を作るのに時間がかかっていたので、時間の節約のためにNext.js用のDevContainer & Docker Compose テンプレートを作りました。
前提条件
本テンプレートを使うには、以下がインストールされるのが前提条件です。
- 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
まとめ
何か間違っていたら、ぜひコメントで教えてください。
Discussion
こちらdevcontainerで立ち上げた際に、componentsなどで新規作成したファイルが、@components/xxx でimport使用すると型宣言がみつかりません、というエラーになります。
devcontainer自体は立ち上げなおすとなおるのですが、立ち上げなおす以外に方法はありますか?
やってみたんですが起こらないみたいで、コンテナーでプロジェクトを開いた後、
src/components/sample.tsxを作った場合、
import Sample from "@/components/sample";
で、コンポーネントが見つからないでしょうか。
回答ありがとうございます。
また、お返事遅くなりすみません。
上記について、もう一度さらで作成しなおすと見つかりました。
おそらく私のプロジェクトの環境によるものだったんだと思います。
申し訳ないです。
ただ別の問題がありまして、
一つはpackageをaddしたときに、そのpackageの方宣言が見つからずにエラーがでます。
これは実際yarn devをしたときにエラーがでることはないのですが、vscode上では開発コンテナをリビルドするまでエラーがでたままになります。
もう一つは、next.jsのhotreloadが聞かないことです。
ただこちらに関しては調べてみて、nextconfig上でのポーリング設定を行うことで解消はできました。
@の後ろに/が抜けてませんか?
@/の設定は上のようになってるので、/workspace/next_app/src/yamada-ui/core.ts[x]があれば、
@yamada-ui/coreではなく@/yamada-ui/coreでインポートできると思います。