🚀 CircleCI 개념부터 실전까지 완벽 정리!

🚀 CircleCI 개념부터 실전까지 완벽 정리!

 

“자동화 배포와 빌드의 마법사, CircleCI!”

CI/CD의 핵심 개념과 CircleCI의 주요 기능을 완벽히 이해해보자!

📌 목차

 

1️⃣ CircleCI란 무엇인가?

2️⃣ CircleCI의 주요 구성 요소

3️⃣ CircleCI의 기본 문법

4️⃣ Orbs, Steps, Matrix란?

5️⃣ CircleCI 대시보드 활용법

6️⃣ 실전 예제: React 프로젝트에 CircleCI 적용하기

7️⃣ 결론

1️⃣ CircleCI란 무엇인가?

 

CircleCI는 CI/CD(Continuous Integration & Continuous Deployment) 자동화 도구로,

GitHub, Bitbucket 등의 코드 저장소와 연동해 자동으로 빌드, 테스트, 배포를 수행하는 도구예요.

 

✅ CircleCI를 사용하면?

✔️ 자동화된 코드 검증: 코드가 변경될 때마다 빌드 & 테스트 실행

✔️ 빠른 배포 프로세스: 코드가 특정 브랜치에 머지되면 자동 배포 가능

✔️ 병렬 처리 지원: 여러 작업을 동시에 실행해 빌드 속도 향상

 

📌 다른 CI/CD 툴 (GitHub Actions, TravisCI)과 비교했을 때?

• GitHub Actions → GitHub과 통합이 강점, YAML 문법 유사

• TravisCI → 간단한 설정이 장점, 하지만 속도가 느림

• CircleCI → 고급 설정과 병렬 실행이 뛰어나며, 강력한 대시보드 제공

2️⃣ CircleCI의 주요 구성 요소

 

✔️ .circleci/config.yml (설정 파일)

 

CircleCI는 .circleci/config.yml 파일을 읽어 워크플로우를 실행해요.

이 설정 파일에는 빌드, 테스트, 배포 프로세스가 정의돼요.

 

✔️ Jobs (작업)

 

jobs는 특정 작업(빌드, 테스트 등)을 수행하는 단위예요.

각 job은 Docker 컨테이너나 가상 머신에서 실행돼요.

jobs:
  build:
    docker:
      - image: circleci/node:18
    steps:
      - checkout
      - run: npm install
      - run: npm test

✔️ Steps (단계)

 

각 job 안에서 실행할 명령어 목록을 steps로 정의할 수 있어요.

steps:
  - checkout   # 코드 가져오기
  - run: npm install  # 의존성 설치
  - run: npm test  # 테스트 실행

✔️ Executors (실행 환경)

 

CircleCI는 Docker, 가상 머신, MacOS 등의 다양한 실행 환경을 지원해요.

executors:
  node-executor:
    docker:
      - image: circleci/node:18

3️⃣ CircleCI의 기본 문법 (config.yml 구조)

 

CircleCI 설정 파일 .circleci/config.yml은 YAML 형식으로 작성돼요.

기본적인 구조는 아래와 같아요.

version: 2.1  # CircleCI 버전

jobs:
  build:
    docker:
      - image: circleci/node:18
    steps:
      - checkout
      - run: npm install
      - run: npm test

workflows:
  version: 2
  build-and-test:
    jobs:
      - build

✅ 이 설정이 의미하는 것은?

✔️ version: 2.1 → CircleCI의 최신 YAML 문법 사용

✔️ jobs → build 작업을 정의

✔️ docker → 실행 환경을 Node.js 18로 설정

✔️ steps → 코드 체크아웃 후 npm install, npm test 실행

✔️ workflows → build 작업을 실행하도록 정의

4️⃣ Orbs, Steps, Matrix란?

 

✔️ Orbs (재사용 가능한 코드 블록)

 

Orbs는 자주 사용되는 설정을 패키징한 재사용 가능한 코드 블록이에요.

예를 들어, node orb를 사용하면 Node.js 설치를 자동화할 수 있어요.

orbs:
  node: circleci/node@5.0.2

jobs:
  build:
    executor: node/default
    steps:
      - checkout
      - node/install-packages

✅ Orbs를 사용하면?

✔️ 반복되는 설정을 줄이고, YAML 파일을 간결하게 유지할 수 있음

✔️ Steps (작업 내에서 실행되는 단계)

 

Steps는 run, checkout, setup_remote_docker 같은 작업들을 실행하는 단위 명령어예요.

steps:
  - checkout
  - run: echo "Hello, CircleCI!"
  - run: npm install
  - run: npm test

✅ Steps는 job 내부에서 실행됨!

✔️ Matrix (다중 환경 테스트)

 

Matrix는 여러 실행 환경에서 동일한 작업을 실행하는 기능이에요.

예를 들어, Node.js 16, 18, 20 버전에서 테스트를 실행할 수 있어요.

jobs:
  test:
    docker:
      - image: circleci/node:<< matrix.node_version >>
    parameters:
      node_version:
        type: string
        default: "18"
    steps:
      - checkout
      - run: npm install
      - run: npm test

workflows:
  version: 2
  test-matrix:
    jobs:
      - test:
          matrix:
            parameters:
              node_version: ["16", "18", "20"]

✅ 이렇게 하면?

✔️ Node.js 16, 18, 20에서 테스트를 병렬로 실행할 수 있음!

5️⃣ CircleCI 대시보드 활용법

 

CircleCI는 강력한 대시보드를 제공해요.

대시보드를 통해 빌드 진행 상황, 테스트 실패 원인, 배포 이력 등을 확인할 수 있어요.

 

대시보드에서 확인할 수 있는 것

 

✅ 워크플로우 실행 상태 (성공/실패 로그)

✅ 빌드 및 배포 진행 과정

✅ 실패한 테스트의 상세 로그

 

📌 CircleCI 대시보드 접속 방법:

1️⃣ CircleCI 웹사이트 접속

2️⃣ GitHub 계정과 연동

3️⃣ 레포지토리 선택 후 실행 상태 확인

 

✅ 실패 원인을 파악하는 방법:

✔️ 대시보드에서 로그를 확인하고 stderr 메시지 확인

✔️ 실행 환경 (docker, macos, machine) 설정 문제 체크

✔️ 필요한 환경 변수가 올바르게 설정되었는지 검토

6️⃣ 실전 예제: React 프로젝트에 CircleCI 적용하기

 

React 프로젝트에서 CircleCI를 설정하려면 다음과 같이 config.yml을 작성하면 돼요.

version: 2.1

orbs:
  node: circleci/node@5.0.2

jobs:
  build-and-test:
    executor: node/default
    steps:
      - checkout
      - node/install-packages
      - run: npm test

workflows:
  version: 2
  main:
    jobs:
      - build-and-test

✅ 이 설정은?

✔️ React 프로젝트에서 npm test를 자동 실행

✔️ node orb를 활용해 Node.js 환경 설정 자동화

🎯 결론: CircleCI를 활용한 CI/CD 마스터하기!

 

💡 CircleCI는 Next.js, React, Express 등 모든 프로젝트에서 활용 가능!

✔️ 자동화된 빌드 & 배포로 개발 속도 향상

✔️ Orbs와 Matrix를 활용해 코드 최적화

✔️ 대시보드를 통해 빌드 상태를 쉽게 모니터링

 

🔥 CircleCI를 제대로 이해하고 활용하면?

개발 속도 🚀 UP!

배포 안정성 🎯 UP!

테스트 자동화 🛠 UP!

 

🌷 전설의 개발자가 되어봅시당! 🌷 🚀