Next.js+Type Script+Docker를 사용한 환경 구성

Next.js+Type Script+Docker를 사용한 환경 구성

개요

Next.js환경을 구축할 때 현지 환경을 오염시키고 싶지 않기 때문에 Docker 컨테이너로 환경을 만들고 싶을 때의 총결산.가능한 한 낭비하지 않기 위해 필요한 최소한의 물건으로 구축한다.

절차.

먼저 작업 디렉토리를 만듭니다.

$ mkdir nextjs-app
$ cd nextjs-app

여기서 제작Dockerfile.

$ touch Dockerfile

Dockerfile의 내용은 다음과 같다.node의 버전은 구축할 때 최신판 17개 버전을 사용했다.
* Docker Hub 링크는 여기.입니다.Dockerfile의 내용은 다음과 같다.

FROM node:17-alpine

WORKDIR /opt/app

FROM에 기본 이미지를 지정하고WORKDIR에 작업 디렉토리를 지정합니다.WORKDIR 존재하지 않으면 생성됩니다.
다음으로docker-comopse.yml

$ touch docker-compose.yml

docker-comopse.yml의 내용은 다음과 같다.

version: '3'

services:
  app:
    build: ./
    volumes:
      - ./src:/opt/app
    ports:
      - '3000:3000'

여기서부터 다음과 같은 조작을 실행한다Next.js.

$ docker-compose run --rm app yarn create next-app . --ts

여기Next.js는 src/ 아래에 설치됩니다.
마지막으로 용기를 시작할 때 실행된 스크립트 ENTRYPOINT 를 Dockerfile 로 기술합니다.
이번에는 조개 스크립트 파일을 만들어 실행하기로 했다.

$ cd src
$ touch setup.sh

setup.sh의 내용은 다음과 같다.

set -eu

yarn && yarn dev

Dockerfile의 ENTRYPOINT에 명령 집행을 기술하다.

FROM node:17-alpine

WORKDIR /opt/app

ENTRYPOINT ["sh" "./setup.sh" ]

이렇게 설정하면 완성됩니다.

$ docker-compose build
$ docker-compose up -d

실행 후http://localhost:3000에 액세스하면 다음 이미지가 표시됩니다.

참고 자료

Docker，Next。환경 구축 방법

run - Docker-docs-ja 19.03 문서