소개

최근, 개발 환경을 모두 docker로 완결시키면 로컬이 깨끗한 상태로 유지할 수 있는 것을 깨달았기 때문에 Docker로 하고 싶어 경향이 있습니다.
그래서, 화제의 Next.js를 docker-compose로 시작해 보았으므로, 자신용 비망록으로서 남겨 두려고 생각합니다

환경

macOS High Sierra v10.13.6
Docker version 19.03.8
docker-compose version 1.25.5

구현

docker에서 모두 완료하고 싶습니다.

준비

새롭게 프로젝트용 디렉토리를 작성해, 그 아래에 아래와 같이 2개의 파일을 두어 주세요.
Dockerfile 및 docker-compose.yml입니다.
docker-compose.yml 의 command 에 있는 디렉토리 이동 명령은, 프로젝트의 이름에 따라서 적절히 변경해 주세요. 이번은 sample-app 라고 합니다.

Dockerfile

FROM node:14.15.3-alpine
WORKDIR /usr/src/app

docker-compose.yml

version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd sample-app && npm run dev"
    ports:
      - "3000:3000"

현재입니다.

$ ls
Dockerfile  docker-compose.yml

create-next-app 명령 설치

create-next-app 명령을 설치합니다.

$ docker-compose run --rm node npm install create-next-app

create-next-app 명령 실행

이제 다음 앱을 만듭니다.
create-next-app는 create-react-app와 달리 설치 대상 디렉토리를 지정할 수 없으므로 앱 이름은 docker-compose.yml의 command에 지정된 디렉토리 이름과 동일해야합니다.
(만약, 설치처의 디렉토리 지정할 수 있는 경우는 가르쳐 주세요..)

$ docker-compose run --rm node npx create-next-app sample-app

docker-compose up 실행

안전하게 next-app 설치가 완료되면 앱을 시작할 수 있어야합니다.Welcomet to Next.js! 가 나오면 성공입니다.

$ docker-compose up

끝에

이번에는 docker-compose를 사용하여 next.js의 개발 환경을 구축했습니다.
docker-compose를 사용하면 API 컨테이너 등과 연계할 수 있으므로 매우 편리하다고 생각합니다.
create-next-app 명령도 디렉토리 지정할 수 없게 될까.