cloudyTye Dockerfile을 사용한 Next 14 배포

아래와 같은 에러가 발생했다.

#9 38.64 Error: A Cloudinary Cloud name is required, please make sure NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set and configured in your environment.
....
#9 38.67 Error: A Cloudinary Cloud name is required, please make sure NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set and configured in your environment.
.... 

이전에도 계속 에러가 발생했는데 원인은 BACKEND_URL을 찾을 수 없다라는 에러였다. 하지만 노트북에서는 문제 없었고 원인을 모르겠던 필자는 default값을로 BACKEND_URL을 집어 넣고 돌렸다, 그리고 처음에 보았던 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME를 찾을 수 없다는 오류를 확인하고 원인을 파악했다.

원인

ENV 설정은 아래에 있기에 npm build 과정에서 에러가는 것이었다.

# 1단계: 의존성 설치 및 애플리케이션 빌드
FROM node:22-alpine as builder
LABEL mainainer="ggrim@front"
LABEL version="0.1.0"
LABEL description="test"

# 작업 디렉토리 설정
WORKDIR ./front

# 패키지 파일 복사
COPY . .
RUN pwd && ls

# 의존성 설치
RUN  npm ci  &&  npm run build # 에러나는 부분

# 2단계: 실행 이미지
FROM node:22-alpine

# 빌드 단계에서 생성된 필수 파일만 복사
COPY --from=builder /front/.next/standalone ./
COPY --from=builder /front/.next/static ./.next/static
COPY --from=builder /front/public ./public

EXPOSE 4000

ENV PORT 4000
ENV HOSTNAME ${HOSTNAME}
ENV BACKEND_URL ${BACKEND_URL}
ENV NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME ${NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}
ENV NEXT_PUBLIC_CLOUDINARY_API_KEY ${NEXT_PUBLIC_CLOUDINARY_API_KEY}
ENV CLOUDINARY_API_SECRET ${CLOUDINARY_API_SECRET}

CMD ["node", "server.js"]

해결법

dockerfile에서 ARG를 사용하면 간단하게 문제 해결
아래 코드를 추가 후 cloudtype에서 build argument를 채우면 도된다.

# docker build 시에만 사용되는 값
ARG HOSTNAME 
ARG BACKEND_URL 
ARG NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME 
ARG NEXT_PUBLIC_CLOUDINARY_API_KEY 
ARG CLOUDINARY_API_SECRET 

완성된 dockerfile

# 1단계: 의존성 설치 및 애플리케이션 빌드
FROM node:22-alpine as builder
LABEL mainainer="ggrim@front"
LABEL version="0.1.0"
LABEL description="test"

# 작업 디렉토리 설정
WORKDIR ./front

# 패키지 파일 복사
COPY . .
RUN pwd && ls

# 의존성 설치
RUN  npm ci  &&  npm run build # 에러나는 부분

# 2단계: 실행 이미지
FROM node:22-alpine

# 빌드 단계에서 생성된 필수 파일만 복사
COPY --from=builder /front/.next/standalone ./
COPY --from=builder /front/.next/static ./.next/static
COPY --from=builder /front/public ./public

EXPOSE 4000

ENV PORT 4000
ENV HOSTNAME ${HOSTNAME}
ENV BACKEND_URL ${BACKEND_URL}
ENV NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME ${NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}
ENV NEXT_PUBLIC_CLOUDINARY_API_KEY ${NEXT_PUBLIC_CLOUDINARY_API_KEY}
ENV CLOUDINARY_API_SECRET ${CLOUDINARY_API_SECRET}

CMD ["node", "server.js"]

마침

mac으로 작업을 하면서는 경험하지 못한 문제를 만나서 많이 당황했다. 배포를 하면서 기존에 개발 환경이 정말로 편하고 좋은 것인지 깨닮았고 앞으로 배포를 하기 위한 환경을 생각하면서 개발해야겠다고 느꼈다