はじめに
- この記事では、Next.js 14 が動作するテンプレートを Docker で構築する方法について説明します。
GitHub
- 今回作成したテンプレートは下記のリポジトリにありますので、良ければご参照ください。
Dockerfile
- 公式の Dockerfile を参考に作成しました。
- 全容
Compose ファイル
- 全容
- 下記を参考に、bind mount の構文には、long syntax を使用しています。
- node_modules の bind mount に対しても long syntax を使用しているため、起動時には、node_modules が存在せず、エラーになります。
- そのため、後述する MakeFile で、docker comose build 実行時に、
$ mkdir -p node_modulesを実行するようにしました。
- そのため、後述する MakeFile で、docker comose build 実行時に、
- node_modules の bind mount に対しても long syntax を使用しているため、起動時には、node_modules が存在せず、エラーになります。
- 下記を参考に、node_modules については、コンテナ内の node_modules を保持するために、volume を用いて永続化させています。
- ホットリロードの有効化
起動方法
- 下記の MakeFile より、
$ make initによって起動することができます。
- 下記を参考に、git clone 後、初回起動時の
sh: xxx: not foundエラーを解決するために、下記のように依存パッケージをインストールようにしました。
Linter、Formatter の設定
- 下記を参考に設定を適用しました。
おわりに
- この記事では、Next.js 14 が動作するテンプレートを Docker で構築する方法について説明しました。
- これから Next.js を触れる人の参考になればと思います。
Discussion