콘텐츠로 이동

CI/CD 파이프라인

GitLab CI/CD는 코드 push부터 data-sketchers.com 배포까지 자동화합니다. 전체 흐름은 lint → build-image(kaniko) → deploy 의 세 스테이지로 구성됩니다.

파이프라인 개요

flowchart TB
    A[git push / MR] --> B["stage: lint"]
    B -->|성공| C["stage: build-image"]
    C -->|kaniko로 nginx 이미지 빌드 & push| D["stage: deploy"]
    D -->|SSH로 ds-20000 호스트에서 pull & up| E[배포 완료]
    B -->|실패| F[파이프라인 중단]
    C -->|실패| F
스테이지 작업 설명
lint 코드/문서 검사 정적 검사, 워크플로 게이트
build-image kaniko 빌드 Docker없이 컨테이너 이미지 빌드·push
deploy SSH 배포 호스트에서 pull + docker compose up

.gitlab-ci.yml 주요 구조

stages:
  - lint
  - build-image
  - deploy

lint:
  stage: lint
  script:
    - pnpm lint
  rules:
    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'

build-image:
  stage: build-image
  image: gcr.io/kaniko-project/executor:debug
  script:
    - /kaniko/executor \
        --context "$CI_PROJECT_DIR" \
        --dockerfile infra/Dockerfile \
        --destination "$CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA"
  rules:
    - if: '$CI_COMMIT_BRANCH == "main"'

deploy:
  stage: deploy
  script:
    - ssh ds-20000 "cd /srv/data-sketchers && docker compose pull && docker compose up -d"
  rules:
    - if: '$CI_COMMIT_BRANCH == "main"'

워크플로 규칙 (workflow rules)

  • MR 이벤트: lint만 실행되어 빠른 피드백.
  • main 브랜치: 전 스테이지 실행 → 자동 배포.
  • workflow: rules 로 불필요한 파이프라인(tag/외부 push 등)을 걸러냅니다.

kaniko 이미지 빌드

kaniko는 Docker 데몬 없이 컨테이너 이미지를 빌드합니다. 기존 nginx 이미지에 정적 사이트 결과물을 얹어 하나의 배포 이미지로 만듭니다.

  1. 정적 빌드 산출물(apps/site/dist, apps/wiki/site)을 이미지에 복사
  2. nginx.conf로 정적 서빙 + /api 프록시(TODO) 설정
  3. 이미지를 GitLab Container Registry로 push
  4. 배포 스테이지가 호스트에서 해당 이미지를 pull

NODE_ENV=production 주의사항 (개발 환경)

로컬 개발 중 NODE_ENV=production이 설정되면 Astro가 프로덕션 최적화를 적용해 조건부 코드가 잘못 실행될 수 있습니다. 개발 시 반드시 unset NODE_ENV 후 실행하세요. (이것이 우리가 개발 명령에서 NODE_ENV 해제를 강조하는 이유입니다.)

배포: SSH pull + up

배포는 ds-20000 호스트에서 수행됩니다. 파이프라인이 SSH로 접속하여 컨테이너를 교체합니다.

# deploy 스테이지에서 실제 실행되는 흐름 (개념)
ssh ds-20000 "cd /srv/data-sketchers && \
  docker compose pull && \
  docker compose up -d"

배포 후에는 cloudflared 터널을 통해 외부 트래픽이 유입됩니다. 터널 구성은 운영 & 배포를 참고하세요.

블로그 이미지 자동화 (blog:images)

apps/blog의 커버 이미지는 pre-commit 단계에서 자동 생성됩니다. 이미지 생성 자동화를 통해 수동 작업을 없애고 일관된 크기/스타일을 유지합니다.

  • 트리거: commit 시 pre-commit 훅
  • 산출물: 블로그 커버 이미지 생성/버전 관리

최선의 관행

CI에서만 이미지를 만들지 말고 로컬 pre-commit에도 동일 훅을 설치해 PR 리뷰어가 이미지 diff를 먼저 확인할 수 있게 하세요.