Dockerを用いたNext.jsの環境構築

dockerを使用したNext.jsの環境構築方法
下記の記事を参考にコードを書いています。https://qiita.com/higemegane1992/items/defd193f4c8752ca9996

vi Dockerfile

Dockerfile

FROM node:20.2.0

WORKDIR /usr/src/app

#RUN npm install -g npm@latest && npm install create-next-app
RUN npm install -g npm@9.7.1 && npm install create-next-app

vi docker-compose.yml

docker-compose.yml

version: "3.9"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src/app
    ports:
      - "3000:3000"
    command: bash -c "npm run dev"

docker-compose build

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

docker compose up

#!/bin/bash

echo "enter new app name"
read newAppName # ここで読み込み待ち
echo ${newAppName}

#新規アプリ名フォルダに移動
mkdir ${newAppName}
cd ${newAppName}

#Dockerfileセットアップ
touch Dockerfile

echo "FROM node:20.2.0 \n
WORKDIR /usr/src/app \n
RUN npm install -g npm@9.7.1 && npm install create-next-app \n
" > Dockerfile

#docker-compose.ymlセットアップ
touch docker-compose.yml

echo "version: \"3.9\"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src/app
    ports:
      - \"3000:3000\"
    command: bash -c \"npm run dev\"
" > docker-compose.yml

#docker イメージ作成
docker-compose build

#next.js 新規アプリ作成
docker-compose run --rm app npx create-next-app tmp --ts\
&& mv tmp/* . && mv tmp/.* . && rm -r tmp

#dockerコンテナ起動
docker compose up

exit 0