본문 바로가기

설치&설정 관련

[Dockerfile] node:Alpine에서 puppeteer 기동 & 한글 깨짐 처리

node:Alpine 에서 puppeteer 기동 하고 한글 깨짐 처리 하기

GitOps 스타일의 지속적인 배포를 구축하여 자동 배포 시스템을 Git ==> jenkins ==> Kubernetes로 구축하여 사용하고 있습니다.

배포가 문제 없이 되었으나 puppeteer를 사용하는 순간 다음과 같은 오류를 만나게 되었습니다.

....
Error: Failed to launch chrome! spawn /app/node_modules/puppeteer/.local-chromium/linux-609904/chrome-linux/chrome ENOENT
...

원인 해결 방법으로 chrome을 설치하고 실행 위치를 강제로 잡아주면 된다.

# Dockerfile 내부
# chromium 설치
RUN apk add --no-cache udev ttf-freefont chromium

# npm 설치 시 chromium 다운하지 않도록 설정
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
# 설치된 위치를 환경 변수로 설정(node에서 사용)
ENV CHROMIUM_PATH /usr/bin/chromium-browser

이후 puppeteer를 실행하는 곳에서 다음과 같이 처리 해줍니다.

puppeteer.launch({
  executablePath: process.env.CHROMIUM_PATH,
  args: ['--no-sandbox'], // This was important. Can't remember why
});

이후 다음과 같은 오류가 발생할 수 있습니다.

Protocol error (IO.read): Invalid parameters handle: string value expected

이유는 node:12-alpine를 사용할 경우 발생하는 오류로 node:13-alpine를 이용하면 해결 됩니다.

마지막으로 이렇게 처리 했음에도 한글이 깨지고 맙니다.

한글 폰트를 다음과 같이 설치하여 줍니다.

# Dockerfile
# 한글 폰트 설치
RUN mkdir /usr/share/fonts/nanumfont
RUN wget http://cdn.naver.com/naver/NanumFont/fontfiles/NanumFont_TTF_ALL.zip
RUN unzip NanumFont_TTF_ALL.zip -d /usr/share/fonts/nanumfont
RUN fc-cache -f -v

추가 : 전체 Dockerfile을 예제

Alpine 이란? 알파인 리눅스는 보안, 단순성 및 자원 효율성을 높이는 고급 사용자를 위해 설계된 범용 리눅스 배포판으로 musl libc와 busybox를 기반으로 하기에 GNU/Linux 배포판 보다 작고 가벼우며 yum이나 apt 같은 패키지 관리자가 아닌 apk라는 자체 패키지 관리자를 가지며 보안에 염두해두고 설계되었기에 모든 바이너리는 독립적인 실행 파일(PIE)로 컴파일 됩니다.

FROM node:13.12.0-alpine3.11 as build

USER root

# 앱 디렉터리 생성
WORKDIR /usr/src/app

COPY . .
# chromium 설치
RUN apk add --no-cache udev ttf-freefont chromium

# 한글 폰트 처리
RUN mkdir /usr/share/fonts/nanumfont
RUN wget http://cdn.naver.com/naver/NanumFont/fontfiles/NanumFont_TTF_ALL.zip
RUN unzip NanumFont_TTF_ALL.zip -d /usr/share/fonts/nanumfont
RUN fc-cache -f -v

# 앱 디렉토리로 다시 이동
RUN cd /usr/src/app
# npm install 시 Chromium 다운로드 제외 처리
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
# chromium-browser 설치 위치를 환경 변수에 저장
ENV CHROMIUM_PATH /usr/bin/chromium-browser

# 시간을 서울로 변경 처리
RUN apk --no-cache add tzdata && \
        cp /usr/share/zoneinfo/Asia/Seoul /etc/localtime && \
        echo "Asia/Seoul" > /etc/timezone

# Set the lang
ENV LANG=ko_KR.UTF-8 \
    LANGUAGE=ko_KR.UTF-8

# node module 설치
RUN npm  install --unsafe-perm 

# docker 외부 OPEN 포트
EXPOSE 3000
CMD ["npm", "start"]

아마 나중에 다시 만날 문제일꺼 같습니다.

한글 꺠짐 문제는 늘 한번씩 돌아오네요.

참고자료