[Bitbucket] Pipeline으로 빌드, 타입 체크 자동화하기

서문

안녕하세요. 마이다스인에서 인재 채용 플랫폼 잡다의 웹 프론트엔드 개발을 담당하고 있는 배준형입니다.

최근 잡다매칭 서비스 큐레이팅을 위한 매칭 백오피스 개발 프로젝트를 시작하면서, 새로운 Repository 구성과 프로젝트 세팅을 진행했습니다. 해당 프로젝트는 주니어 프론트엔드 개발자 2명이 협업하여 개발을 진행했는데요.

개발 과정에서 서로 활발히 코드리뷰에 참여하며 직접 코드를 pull하여 확인하는 작업까지 거쳤음에도 불구하고, 가끔씩 타입스크립트 컴파일 에러나 빌드 실패가 머지 이후에 발견되는 문제가 발생했습니다.

이 문제를 해결하기 위해 CI/CD 파이프라인을 통해 해당 과정을 자동화하여 확인하도록 개선했습니다. 내용은 간단하지만 비슷한 상황에 처한 분들께 조금이나마 도움이 될 것 같아 이 글을 통해 경험을 공유하고자 합니다.

Bitbucket Pipeline

저희 팀은 코드 저장소로 Bitbucket을 사용하고 있습니다. Bitbucket에서 제공하는 Pipeline은 Bitbucket Cloud의 CI/CD 도구인데요. 이와 유사하게 Github에는 Github Actions가, Gitlab에는 Gitlab CI/CD가 있습니다.

Bitbucket Pipeline, Github Actions, Gitlab CI/CD는 각 플랫폼에서 제공하는 CI/CD 도구로, 세부적인 차이점은 있지만 모두 .yml 파일(YAML)을 사용하여 파이프라인을 구성한다는 공통점이 있습니다.

이러한 CI/CD 도구를 활용하면 빌드 및 테스트 자동화, 배포 관리뿐만 아니라 메신저 연동 등 다양한 공동 작업을 수행할 수 있습니다. CI/CD 도구는 개발 프로세스를 효율화하고 협업을 원활하게 하는 데 큰 도움을 줍니다.

YAML 파일 추가하기

Bitbucket에 Pipeline을 추가하려면 프로젝트 상위 디렉토리에 bitbucket-pipelines.yml 파일을 생성하고 아래와 같이 코드를 작성해주면 됩니다.

bitbucket-pipelines.yml

pipelines:
  pull-requests:
    '**':
      - step:
          name: Build & Type Check
          image: node:18.19.1
          script:
            - yarn install
            - yarn build
            - yarn type

• pull-requests: pull request가 생성되거나 업데이트될 때 파이프라인이 실행됩니다.
• "**": 모든 브랜치를 대상으로 합니다. 특정 브랜치만 타겟으로 설정하도록 수정할 수 있습니다.
• image: 각 단계에서 사용되는 실행 환경을 정의합니다.
  • node:18.19.1: Node.js 버전 18.19.1이 설치된 이미지를 사용하도록 설정합니다.
  • 이 외에도 다양한 이미지를 사용할 수 있습니다. 예를 들어:
    • python:3.9: Python 3.9 버전이 설치된 이미지
    • mysql:8.0: MySQL 8.0 버전이 설치된 이미지
• script: 각 단계에서 실행할 명령어를 정의합니다. 여기서는 yarn install로 의존성을 설치하고, yarn build로 빌드를 수행하며, yarn type으로 타입 체크를 진행합니다.

이렇게 설정한 bitbucket-pipelines.yml 파일을 프로젝트에 추가하면 pull request 시마다 자동으로 빌드와 타입 체크가 이루어집니다. 파이프라인을 통해 개발 과정에서 발생할 수 있는 이슈를 사전에 확인하고 대응할 수 있게 됩니다.

여기서는 yarn install → yarn build → yarn type 순서로 파이프라인을 진행합니다. 각 명령어는 package.json에 명시된 script를 실행하게 되는데, 예시로 제시된 package.json의 내용은 다음과 같습니다.

package.json

"scripts": {
// ...
  "build": "next build",
  "type": "tsc --noEmit"
},

프로젝트에서 Next.js와 TypeScript를 사용하고 있으므로, build 스크립트로 Next.js 애플리케이션을 빌드하고, type 스크립트로 TypeScript 타입 체크를 수행합니다.

결과

모든 브랜치를 대상으로 파이프라인을 설정했기 때문에, 이제 새로운 PR을 생성하면 자동으로 오른쪽에 Pipeline이 실행되는 것을 확인할 수 있습니다.

만약 실패하면 어떻게 될까요??

파이프라인 실패 시 PR에서도 실패 상태를 확인할 수 있고, Bitbucket에 등록된 이메일로도 실패 알림 메일을 받게 됩니다. 해당 파이프라인으로 들어가면 어떤 단계에서 문제가 발생했는지 구체적으로 확인할 수 있습니다.

이를 통해 머지 이전에 빌드 실패나 타입 에러 등의 이슈를 신속하게 발견하고 대응할 수 있습니다. 파이프라인이 성공해야만 PR을 머지할 수 있도록 설정하면 안정성을 더욱 높일 수 있겠죠.

개인적인 활용

실무에서는 PR 관련 이벤트를 트리거로 Pipeline을 추가하여 빌드와 타입 체크를 수행하도록 설정했습니다. 그런데 개인적으로는 Github Actions를 활용하여 커밋을 자동으로 push하는 용도로도 사용하고 있습니다.

저는 Github 개인 Repository 중에 TIL(Today I Learned)과 알고리즘 문제 풀이를 업로드하는 Repo가 있는데요. 새로운 내용을 push할 때마다 readme.md 파일을 수동으로 업데이트하는 반복 작업을 Github Actions를 통해 자동화했습니다.

.github/workflows/python-app.yml

name: README.me auto update

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Get current date
        id: date
        run: echo "::set-output name=date::$(date +'%Y-%m-%d')"
      - uses: actions/checkout@v2
      - name: Set up Python 3.10
        uses: actions/setup-python@v2
        with:
          python-version: '3.10'
      - name: Update .md File
        run: |
          python update.py
      - name: Push the change
        run: |
          git config --global user.name 'Junhyeong-B'
          git config --global user.email 'aowlr0513@gmail.com'
          git add .
          git commit -m "update README.md | ${{ steps.date.outputs.date }}" || true
          git push

• on: 워크플로우를 트리거하는 이벤트를 정의합니다.
  • push나 fork 등 다양한 이벤트를 지정할 수 있습니다.
    • push, fork는 해당 이벤트 발생 시 즉시 트리거할 수 있지만, issues나 pull_request의 경우 내부에서 세부 타입을 추가로 지정해야 합니다.

      yamlCopy codeon:
        issues:
          types: [opened, edited, milestoned]

  • 사용 가능한 이벤트 타입은 Github Actions 문서에서 확인할 수 있습니다.
• runs-on: 액션이 실행될 runner의 OS를 지정합니다.
  • 기본값은 ubuntu-latest이며, Windows, macOS, Linux 등도 선택 가능합니다.
• steps: 실제 수행할 작업들을 정의하는 영역입니다.
  1. uses: 다른 사람이 만든 액션을 사용할 때 해당 키워드에 명시합니다.
  2. name과 run: runs-on에서 지정한 OS에서 실행할 코드를 작성합니다.
     • name은 단계의 이름이고, run에는 실제 동작을 수행하는 코드를 작성합니다.

알고리즘 레포 저장소: [링크]
workflows: [링크]

위 workflow는 다음과 같은 순서로 동작합니다.

1. ubuntu-latest OS 환경에서 작업을 시작합니다.
2. 해당 Repository로 checkout합니다.
3. Python을 설치합니다.
4. Repository 내부에 있는 update.py 파이썬 스크립트를 실행합니다.
5. 변경 사항을 git push합니다.

이렇게 설정해 두면 해당 Repository에 변경 사항이 push될 때마다 Github Actions가 트리거되어 readme.md 파일을 자동으로 수정하고, 수정된 내용을 다시 commit하고 push하는 것을 확인할 수 있습니다.

결론

회사에서 신규 프로젝트를 진행하면서 Bitbucket Pipeline을 적용해 보니, 최소한의 빌드와 타입 체크를 자동으로 수행할 수 있어 버그를 조기에 발견하는 데 큰 도움이 되었습니다. 향후 테스트 코드가 추가되면 파이프라인에 테스트 과정을 포함시켜 더 완성도 높은 개발 환경을 구축할 수 있을 것 같습니다.

이번 글에서는 비교적 간단한 수준의 파이프라인을 다뤄봤는데요. CI/CD는 그 외에도 다양한 용도로 활용될 수 있습니다. 특정 이벤트를 트리거로 자동 배포를 수행하거나, 일정 주기마다 정기적으로 배포를 진행할 수도 있습니다. 또한 크롤링 작업을 자동화하기 위해 특정 주기에 맞춰 크롤링 스크립트를 실행하는 등 다양한 시나리오에 적용 가능합니다.

CI/CD 파이프라인은 개발자들이 코드 품질을 유지하고 협업하는 데 매우 유용한 도구입니다. 지속적인 통합과 배포 과정을 자동화함으로써 생산성을 향상시키고 잠재적인 문제를 조기에 발견할 수 있습니다.

참조

• https://www.daleseo.com/github-actions-basics/
• https://fe-developers.kakaoent.com/2022/220106-github-actions/