Docker_1탄 DockerFile Example with Next.js 도커파일 작성방법!

개발을 하다보면 운영체제에 따라서 오류가 발생하거나 실해이 안되는 경우가 발생할 수 있다.

그래서 가상의 PC환경을 셋팅하고 해당 환경에 작업중인 프로젝트를 이용해서 개발하는 도구를 사용한다.

오늘 알아볼 이 도구가 바로

Docker

 

도커를 사용하는 이유는  여러가지가 있는데 대표적으로 꼽자면 다음과 같다.

1.  개발환경과 배포 환경을 동일하게 맞추어 개발 시 발생하지 않았던 문제를 마주하지 않기 위해서
2.  배포하는 과정자체가 단순화되고 도커로 개발하다가 해당 도커를 활용해 배포까지 이어질 수 있어서

하나 더 Docker Compose를 이용할때 진정 편리함이 두드러진다는 것이다.

 

본 글은 Next.js를 기반으로 하기때문에 파일예시는 다른 프레임워크와 다를 수 있다.

그럼 본격적으로 Docker를 설치하고 셋팅해보자.

 

1. Docker 설치

Docker: Accelerated Container Application Development

위 도커닷컴에서 본인의 칩셋을 선택한 후 다운로드하면 된다.

다운로드 - 칩셋 선택

설치과정은 특별히 설명하지 않아도 될것같아 생략하고

설치가 되었다면 실행해보자

도커가 켜지면서 로그인하라는 메시지가 뜰것이다.

도커 실행화면

아래 보이는 continue without signing in 을 클릭하면 로그인 없이 실행할 수 있다.

다음화면도 마찬가지로 Skip 해도된다.

 

실행완료

실행완료!

 

2. DockerFile 작성과 예시

docker파일은 docker에 프로젝트를 알맞게 업로드 해주고

필요한 설정이 있다면 적용해주기 위한 파일이라고 보면 된다.

 

아래는 작성자의 프로젝트 구조이다.

Project
├── local (Local Docker 폴더)
├── app (Next.JS 폴더)
├── .gitignore
└── README.md

app 안에 docker를 파일로 넣어 사용이 가능하지만 개인적으로 이게 좀더 깔끔한 것 같다.

다음은 local폴더 안에 'Dockerfile'을 생성하고 아주 기본적인 셋팅만 예시로 설명하겠다.

# Install dependencies only when needed

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat tzdata
WORKDIR /app
COPY resource/package.json ./
RUN npm install --force

# Develope image, copy all the files and run next

FROM node:18-alpine AS runner
WORKDIR /app

# You only need to copy next.config.js if you are NOT using the default configuration

COPY /app .
COPY /app/next.config.js ./
COPY --from=deps /app/node_modules ./node_modules

# Next.js collects completely anonymous telemetry data about general usage.

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

크게 보면 2구역으로 나뉘어져 있는 모습을 볼 수 있다.

deps라는 이름으로 정의한 빌드단계

runner라는 이름으로 정의한 빌드구성과 실행단계

 

먼저 deps를 보자.

• FROM node:18-alpine AS deps
  node:18-alpine 이미지를 사용하여 빌드한다는 정의이다.
  node버전이 다르거나 버전만 아는데 alpine과같은 이미지들이 뭐가 있는지 모르겠다면 여길 참고해보자.
  https://hub.docker.com/_/node/
  
  
• RUN apk add --no-cache libc6-compat tzdata
  Alpine 리눅스 기반의 도커 이미지를 사용해 앱을 실행하기 위해 패키지를 설치하는 과정이다.
  libc6-compat(호환성 라이브러리), tzdata (시간대 데이터 제공 라이브러리)
  
  
• WORKDIR /app
  내 프로젝트 작업 디렉토리를 설정해준다. 위에서 본 디렉토리 구조를 보면 /app에 내 소스들이 있다.
  
  
• COPY resource/package.json ./
  프로젝트 내 package.json파일을 지금 빌드 컨텍스트로 복사한다.
  
  
• RUN npm install --force
  복사한 package.json에 명시된 종속성들을 설치한다. --force는 이미 종송석이 설치되어있어도 강제설치를 하게 한다.

 

다음으로는 runner를 보자.

• FROM node:18-alpine AS runner
  runner로 명명하고 앱을 실행하는 설정들을 구성한다는 정의이다.
  
  
• WORKDIR /app
  동일하게 작업 디렉토리를 설정한다.
  
  
• COPY /app .
  프로젝트 내 모든 파일을 작업 디렉토리로 복사한다.
  
  
• COPY /app/next.config.js ./
  이건 기본구성이 아닌 사용자정의 next.config.js가 있는 경우에 복사하도록 한다.
  
  
• COPY --from=deps /app/node_modules ./node_modules
  이미 설치한 종속성을 다시 복사한다. 다시 복사하는 이유는 이미 설치된 종속성을 빌드 과정에서 변경하지 않고
  이전 단계에서 설치한 것과 동일한 종속성을 사용하기 위함이다.
  
  
• CMD ["npm","run", "dev"]
  마지막으로 컨테이너가 실행하는 명령어를 정의한다. Local에서 development 환경이기때문에
  npm run dev로 정의했다.

 

이 정도 설명만 알아도 수정은 검색과 함께 활용해보면 충분히 다른 프로젝트에도 적용이 가능하다고 생각한다.

 

이제 실시간으로 사용하고 좀더 편리하게 쓰기위해 docker compose로 이미지빌드하는 것을 알아볼 것이다.
이건 2탄에서!

Docker_2탄 docker-compose Example with Next.js 도커컴