【Docker】Next.jsの環境構築

はじめに

　本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

Next.jsの環境構築

Dockerfileを作成する

Dockerfile

FROM node:16.14.2

ENV APP_NAME=myapp
ENV USER_NAME=myuser
ENV TZ=Asia/Tokyo

WORKDIR /${APP_NAME}

RUN adduser ${USER_NAME} && \
  chown -R ${USER_NAME} /${APP_NAME}
USER ${USER_NAME}

EXPOSE 3000

CMD ["npm", "run", "dev"]

docker-compose.ymlを作成する

docker-compose.yml

version: '3.9'
services:
  front:
    build: .
    volumes:
      - .:/myapp
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000

npx create-next-appを実行する

ターミナル

$ docker compose run --rm front npx -y create-next-app tmp --ts && mv tmp/* tmp/.* . && rm -r tmp

カレントディレクトリに展開するためにmv tmp/* tmp/.* . && rm -r tmpを追加で実行しています。
また、-yオプションを使用するとcreate-next-appのインストール確認メッセージが出力されませんので、「create-next-app」の入力ミスにご注意ください。
-yオプションについては以下をご参照ください。

docker compose upを実行する

ターミナル

docker compose up

http://localhost:3000 にアクセスし、以下の画面が表示されることを確認してください。