はじめに
タイトルにある通り、DockerによるNext.jsの環境構築の手順を記載しています。
様々な方の記事も拝読させていただきましたが、create-next-appをルートに展開している例が見つからなかったため、投稿させていただきました。
ルートに展開した理由としましては、heroku等にデプロイする際にpackage.jsonがルートにないと正常にデプロイが完了しないことや、ツリー構造が分かりづらくなるといった観点からです。
しかしながら、苦し紛れな実装になっているため、お詳しい方はコメントでお知らせください。
Dockerfileの作成
Dockerfile
FROM node:17.6.0
WORKDIR /usr/src/app
RUN npm install -g npm@latest && npm install create-next-app
上記のDockerfileにより実行されるのは、下記の3点です。
- 公式のnodeイメージを使用
- 作業ディレクトリを定義
- create-next-appをインストール
docker-compose.ymlの作成
docker-compose.yml
version: "3.9"
services:
app:
build: .
volumes:
- .:/usr/src/app
ports:
- "3000:3000"
command: bash -c "npm run dev"
docker-compose.ymlでは下記を実行します。
- 先ほどのDockerfileを参照
- Next.jsアプリケーションを展開するディレクトリにマウントを作成
- create-next-appのデフォルトのポートに接続
- 開発モードでの起動
環境構築
初めに、イメージのビルドを行います。
terminal
docker-compose build
次に、create-next-appによりNext.jsアプリケーションを作成します。
展開用のディレクトリにルートを指定すると、Dockerfileとdocker-compose.ymlによりコンフリクトが発生するため、
ここでは一時的にtmpディレクトリに作成し、ルートへ移動しています。
terminal
docker-compose run --rm app npx create-next-app tmp --ts\
&& mv tmp/* . && mv tmp/.* . && rm -r tmp
補足
--tsはTypescriptでのNext.jsアプリケーションの作成を指定しています。Javascriptでの開発を希望される方は、省略してください。
最後に、コンテナを起動します。
terminal
docker-compose up
http://localhost:3000が正常に起動していれば成功です。
参考までに、本記事の内容のGithubリポジトリも掲載いたしますので、必要な方はご覧ください。