ALBERT SITE

배포방식비교

1. 대부분의 회사: CI/CD 파이프라인에서 빌드 (권장)

' GitHub Actions에서 빌드하는 방식
- Build → Test → Docker Image Build → Push → Deploy

장점:

• ✅ 재현 가능한 빌드 환경
• ✅ 빌드 과정 추적 가능
• ✅ 보안 (소스코드만 관리, 빌드 산출물은 제외)
• ✅ 팀 협업 용이

단점:

• ❌ 빌드 시간 소요
• ❌ GitHub Actions 무료 시간 제한

2. 일부 소규모 팀: 로컬 빌드 후 업로드

' 로컬에서
npm run build
docker build -t myimage .
docker push myimage

장점:

• ✅ 빠른 배포 속도
• ✅ CI/CD 비용 절감

단점:

• ❌ "내 컴퓨터에서는 되는데..." 문제
• ❌ 누가, 언제, 어떻게 빌드했는지 추적 어려움
• ❌ 팀원마다 다른 환경으로 빌드 가능
• ❌ 보안 리스크 (빌드 산출물을 Git에 커밋하면 저장소 크기 증가)

GitHub Actions 빌드 속도 개선 방법

1. 의존성 캐싱 (가장 효과적)

name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      ' Node.js 의존성 캐싱
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'  ' 또는 'yarn', 'pnpm'
      
      ' package-lock.json 기반 캐싱 (더 세밀한 제어)
      - name: Cache node modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      
      - name: Install dependencies
        run: npm ci  ' npm install보다 빠름
      
      - name: Build
        run: npm run build

2. Docker 레이어 캐싱

      ' Docker Buildx 설정
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      
      ' Docker 레이어 캐싱
      - name: Build and push Docker image
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: babycut/frontend:${{ github.sha }}
          cache-from: type=registry,ref=babycut/frontend:buildcache
          cache-to: type=registry,ref=babycut/frontend:buildcache,mode=max

3. 멀티스테이지 Docker 빌드 최적화

' 개선된 Dockerfile
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV production

COPY --from=deps /app/node_modules ./node_modules
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/package.json ./

EXPOSE 3000
CMD ["npm", "start"]

4. 병렬 처리

jobs:
  build:
    strategy:
      matrix:
        node-version: [20]
    steps:
      - name: Build with parallel
        run: npm run build -- --max-workers=2

5. 조건부 빌드 (변경된 파일만)

on:
  push:
    paths:
      - 'src/**'
      - 'package.json'
      - 'Dockerfile'

jobs:
  build:
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2
      
      - name: Check if build needed
        id: check
        run: |
          if git diff --name-only HEAD~1 | grep -E '^(src/|package\.json|Dockerfile)'; then
            echo "build=true" >> $GITHUB_OUTPUT
          else
            echo "build=false" >> $GITHUB_OUTPUT
          fi
      
      - name: Build
        if: steps.check.outputs.build == 'true'
        run: npm run build

실전 최적화 예시

name: Optimized Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      ' 1. Node 캐싱
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      ' 2. 의존성 설치 (ci 사용)
      - name: Install dependencies
        run: npm ci
      
      ' 3. 빌드
      - name: Build
        run: npm run build
      
      ' 4. Docker Buildx 설정
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      
      ' 5. Docker Hub 로그인
      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      
      ' 6. 캐시를 활용한 Docker 빌드
      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: |
            babycut/frontend:main-${{ github.sha }}
            babycut/frontend:latest
          cache-from: type=registry,ref=babycut/frontend:buildcache
          cache-to: type=registry,ref=babycut/frontend:buildcache,mode=max
          build-args: |
            BUILDKIT_INLINE_CACHE=1

성능 비교

방식첫 빌드캐시 적용 후캐싱 없음10-15분10-15분npm 캐싱10-15분3-5분Docker 캐싱10-15분2-3분모두 적용10-15분1-2분

권장 사항

프로덕션 환경:

• ✅ GitHub Actions에서 빌드 (캐싱 최적화 적용)
• ✅ 재현 가능한 빌드 환경 유지
• ✅ 빌드 히스토리 추적

개발 환경:

• 로컬에서 빌드 후 테스트
• PR 시에만 GitHub Actions 빌드

캐싱을 제대로 설정하면 GitHub Actions 빌드도 충분히 빠르게 만들 수 있습니다!