Portfolio

History

base를 이용하여 공통 로직 먼저 이미지로 빌드

npm ci에서 유별나게 오래 걸린다.


# .dockerfile.base
FROM docker-hub-mirror.linecorp.com/node:18.17.1

RUN groupadd -g 3000 -o visual-builder-server
RUN useradd -m -u 1000 -g 3000 -o -s /bin/bash visual-builder-server
USER visual-builder-server

WORKDIR /usr/src/app
RUN chmod -R 777 /usr/src/app

COPY --chown=1000:3000 package.json package-lock.json ./
COPY --chown=1000:3000 /libs/prisma ./libs/prisma
COPY --chown=1000:3000 /scripts ./scripts

# Set the env to execute in the docker environment
ENV EXECUTE_ENV docker

RUN npm ci
RUN npm run generate

로컬에서는 빠르게 동작하나 워크플로우에서는 npm ci 명령어 처리 속도가 정말 느리다.
설상가상으로 preinstall, postinstall로 인해 더 느려진다.

도커 이미지를 빌드할 때, npm ci 과정 중 pre-install, post-install 단계가 있다.

해당 서비스는 Preview HTML을 캡쳐하는 기능이 필요하다.

Issue

도커 이미지 빌드 시, pre-install과 post-install 단계에서 도합 약 1분이 소요된다.

pre-install


const { execSync } = require('child_process')
const { isInDocker } = require('./utils')

;(function run() {
  if (isInDocker()) {
    console.log('Remove puppeteer-core...')
    execSync('npm uninstall puppeteer-core', { stdio: 'inherit' })
  }
})()

post-install


const { execSync } = require('child_process')
const { isInDocker } = require('./utils')

;(function run() {
  const packageToInstall = isInDocker() ? 'puppeteer' : 'puppeteer-core'

  console.log(`Installing ${packageToInstall}...`)

  execSync(`npm install ${packageToInstall}`, { stdio: 'inherit' })
})()

왜 이런 과정을 거치는 걸까?

Docker 환경: puppeteer 패키지를 사용하여 Chromium 브라우저를 포함한 Puppeteer를 사용
로컬 개발 환경: puppeteer-core를 사용하여 이미 설치된 브라우저를 활용하거나, Docker 이미지 빌드 시 브라우저를 설치

⇒ 환경에 따라 적절한 Puppeteer 패키지를 선택함으로써 리소스를 효율적으로 관리하고, 다양한 환경에서 일관된 동작을 보장하기 위해

Solution

로컬과 docker에서의 CI 시간이 차이나는 이유가 있었다. 바로 puppeteer 패키지 때문!!

docker에서 puppeteer를 설치하다보니 chromium 브라우저까지 다 설치해버리는 문제가 있다.
로컬에서는 puppeteer-core를 사용하여 이미 설치된 브라우저를 활용하고 있다.

환경 변수와 pre-install, post-install을 지우고 개발 환경, 도커 환경 둘 다 puppeteer-core를 이용하고 도커 이미지 빌드 시에 브라우저를 따로 설치하자.!

Docker image 빌드 최적화하기

History

Issue

Solution