[Docker] Next.js 프로젝트 빌드하기

우선 Next.js 에 대한 프로젝트 빌드를 해보기 위해서는 node와 별개로 아래의 모듈이 필요하다

"create-next-app" npm을 사용해서 설치할 수 있다.

 

우선 노드에 대한 설치가 정상적으로 되었는지 확인한다.

node -v

 

추가로 next.js 를 사용하기 위해서는 앱을 만들어 주거나 해당 next app을 구동시키기 위한 모듈을 설치해야한다.

symbolic link 권한 문제로 인해, sudo 로 설치를 해주는 것이 좋다

 

sudo npm install -g create-next-app

설치가 정상적으로 되었는지 확인한다.

create-next-app --version

 

우선 이렇게 하면 nextjs 를 빌드해서 로컬에서 실행해볼 수 있다.

next.js nest.js 들은 각각 환경별로 다르게 빌드할수있다

npm run dev, npm run prod 등등. 무튼 프로덕션 서버를 빌드할때 불필요한 내용은 제외되고 클라이언트에게 보여주는 등의 기능이 조금 씩 다르다.

 

무튼 DockerFile을 작성하여 nextJs를 빌드 및 이미지를 만들어주는 스크립트 파일을 작성해보겠다

노드 기반의 프레임워크들은 이미지가 너무 용량이 커지지않게 하는것이 중요하다.

아래 공식 문서의 가이드를 기반으로 만들었다.

https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

 

 

 

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs


COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]
#CMD ["yarn", "start"]

 

해당 과 같이 하면, next.js 의 프로젝트를 빌드할수 있다.

리눅스에 올려야 함으로 커맨드 및 이미지 빌드는 아래 명령어로 진행한다.

docker build --platform linux/amd64 -t dbtjdwocjswo/boiler-front:0.0.2 -f ./DockerFile .
docker run -p 3000:3000 -itd dbtjdwocjswo/boiler-front:0.0.2

 

간단하지만 이런저런 삽질을 하면서 완성했다