build docker image ( React + TypeScript + Vite + Yarn-Berry + nginx )

nginx 기반 정적 웹페이지 빌드

• 프로젝트 루트 디렉토리에 "Dockerfile" 파일 생성

  FROM node:alpine as builder
  WORKDIR '/usr/src/app'

  COPY . .
  RUN yarn install --immutable

  RUN yarn build
  
  # run stage
  FROM nginx
  EXPOSE 80
  COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

• 도커 빌드

  docker build -t coconote-frontend .

• 도커 실행

  docker run -p 8080:80 coconote-frontend

localhost:8080 접속해서 nginx 기반으로 정적 웹페이지가 잘 렌더링 되는지 확인.

• yarn build

  yarn build

오류 해결

#13 15.11 ➤ YN0009: │ utf-8-validate@npm:5.0.10 couldn't be built successfully (exit code 1, logs can be found here: /tmp/xfs-20cd1bf2/build.log) #13 15.11 ➤ YN0009: │ bufferutil@npm:4.0.7 couldn't be built successfully (exit code 1, logs can be found here: /tmp/xfs-c44c95e0/build.log)

해당 오류 발생 시, RUN apk add --no-cache python3 make g++를 추가.

의존성의 Native Bindings

utf-8-validate와 bufferutil은 Node.js의 native bindings를 사용합니다. 이러한 패키지를 빌드하려면 해당 시스템에 필요한 빌드 도구와 라이브러리가 설치되어 있어야 합니다.

• 해결책: Dockerfile에 필요한 빌드 도구와 라이브러리를 설치하는 단계를 추가합니다. 예를 들면, alpine 기반 이미지를 사용하는 경우:

  FROM node:alpine as builder
  
  # 필요한 빌드 도구 설치
  RUN apk add --no-cache python3 make g++
  
  # 나머지 Dockerfile 내용