Bubble.io와 CircleCI 통합: 단계별 가이드 2024

1단계: 사전 요건 이해

통합 절차를 시작하기 전에, Bubble.io 앱을 설정했고 활성 CircleCI 계정이 있는지 확인하세요. 또한 CircleCI 프로젝트와 Bubble.io의 애플리케이션을 관리할 관리 권한이 있는지 확인해야 합니다.

2단계: 구성에 필요한 정보 기록

다음과 같은 몇 가지 정보가 필요합니다:

• Bubble.io의 REST API 키: Bubble.io와 CircleCI 사이의 안전한 연결을 위해 필요합니다. 이는 Bubble.io 프로젝트의 대시보드에서 얻을 수 있습니다.

• CircleCI의 API 키: CircleCI의 계정 관리 대시보드의 개인 API 토큰 섹션에서 생성할 수 있습니다.

3단계: CircleCI 구성 파일 생성

프로젝트의 루트 레벨에 .circleci 디렉토리를 생성합니다. 이 폴더 안에 config.yml 파일을 생성합니다. 이 구성 파일은 CircleCI가 어떤 유형의 테스팅 또는 배포 빌드가 필요한지 이해하는 데 도움이 됩니다.

mkdir .circleci
cd .circleci
touch config.yml

4단계: CircleCI 구성 작성

이 단계에서는 config.yml 파일 내에 애플리케이션의 테스팅 빌드 지침을 작성해야 합니다.

여기에 예시 구성이 있습니다:

version: 2
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:10 
    steps:
      - checkout
      - restore_cache:
          keys:
           - v1-dependencies-{{ checksum "package.json" }}
           - v1-dependencies-
      - run: npm install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run: npm test

위의 코드는 Node (버전 10)가 npm test 명령으로 실행되어야 함을 명시하고 있습니다.

5단계: CircleCI 구성 파일을 저장소에 커밋

아직 그렇지 않다면, 프로젝트는 Git 이나 Mercurial (hg) 중 하나로 버전 제어되어야 합니다. 이 도구들의 각각의 추가 및 커밋 명령을 사용하여 .circleci/config.yml 파일을 추적하고 스테이징하세요.

6단계: CircleCI 콘솔에서 프로젝트 설정

다음으로, CircleCI에 프로젝트를 추가해야 합니다. 다음 단계를 수행하세요:

• CircleCI 콘솔로 이동합니다.
• '프로젝트 추가'를 클릭합니다.
• 프로젝트의 저장소가 있는 버전 제어 시스템을 선택합니다.
• 프로젝트 목록을 확인하고 '프로젝트 설정'을 클릭합니다.
• 운영 체제로 '리눅스', 언어로 '노드'를 선택합니다.
• 아래로 스크롤하고 '빌드 시작'을 클릭합니다.

7단계: Bubble.io 대시보드에서의 통합 설정

• Bubble.io 프로젝트의 대시보드로 이동합니다.
• 설정 -> API -> 또 다른 API 추가로 이동합니다.
• API 키를 입력하고, Base URL은 https://circleci.com/api/v2/project/gh/<사용자이름>/<저장소명>/pipeline로 설정하세요. (<사용자이름>/<저장소명>을 각각 GitHub 사용자 이름 및 저장소로 대체하세요)
• POST 유형에서 초기 호출 버튼을 누릅니다.

8단계: 통합 테스트

마지막으로, 저장소에 변경 사항을 푸시하거나 Bubble.io 프로젝트 인터페이스에서 빌드를 트리거합니다. CircleCI는 저장소에 있는 .circleci/config.yml 파일에서 지침을 자동으로 읽고 빌드를 시작해야 합니다.

Bubble.io와 CircleCI 간의 통합이 성공적이면, CircleCI 대시보드에서 앱의 빌드 및 테스트를 제어하고 모니터링할 수 있습니다.

9단계: 빌드 실패 디버깅

CircleCI 빌드가 실패하면, CircleCI 콘솔에서 로그를 확인하여 어떤 것이 실패했는지 이해할 수 있습니다. 이는 오류 수정 및 디버깅에 상당히 도움이 됩니다.

저장소에 연속으로 푸시된 모든 변경은 CircleCI에서 빌드를 트리거하여 개발 중인 애플리케이션의 테스팅과 품질을 유지하는 데 도움이 됩니다.

이것은 Bubble.io 프로젝트를 CircleCI에 연결하는 한 가지 접근 방법입니다. 계속해서 문제가 발생한다면, 추가로 연구하거나 커뮤니티 지원에 문의하는 것을 고려해 보십시오.