정주형의 블로그
Write Dev Articles

React Native CICD using Bitrise (2) / Blueprint!

Published on

이 글은 Bitrise를 통한 모바일 환경에서의 CICD 구축 가이드입니다. 총 3편으로 구성되어 있으며, 어떤 편부터 읽더라도 괜찮습니다. 저의 삽질이 도움이 되시길 바랍니다.

  1. Bitrise!
  2. 청사진 그리기
  3. 실제 구현

Before get started

저번 글에서 우리는 모바일에서 CICD 구축이 어떠한 효과를 가져다 줄 수 있는지 보았습니다. Bitrise와 툴들에 대해서 간단하게 설명을 하였으니 관심이 있으신 분은 1편으로 돌아가 보시면 좋겠습니다.

실제로 코드를 구현하기 전에 먼저 우리가 어떤 시스템을 구축할 것인지 보도록 합시다. 그리 복잡하지 않습니다.


default

청사진은 다음과 같습니다. 무척 간단하죠? 가운데서 해맑게 웃고 있는 로봇이 Bitrise입니다. 한번 훑어볼까요? Bitbucket의 로고도 보이고 Slack, 후술할 Fastlane, 구글 플레이 스토어와 앱 스토어도 눈에 보입니다. 그리고 화살표가 모두 Bitrise를 거치는 것이 보이시나요? 자동화의 시작과 끝을 맡고 있는 중요한 녀석 인 것 같군요.

플로우는 간단합니다. 개발자가 저장소에 코드를 업로드 하는 것 부터 시작합니다. 개발자가 소스 코드를 업로드 하자 마자 Bitrise가 소스 코드의 변화를 감지합니다. 그리고 설정된 워크플로우에 맞춰 자동으로 일을 시작하게 될 것입니다. 워크 플로우의 시간대 순서는 다음과 같습니다.

  • 테스트가 있다면 테스트 실행
  • Fastlane을 사용해서 앱을 빌드하고 각 스토어에 배포
  • 테스트나 빌드, 배포 과정이 하나라도 실패한다면 실패한 결과를 슬랙으로 알림
  • 모두 성공한다면 결과를 슬랙으로 알림

요약하자면 코드의 변화를 감지할 때 마다 Bitrise는 4가지 단계를 자동으로 실행하게 됩니다. 구축에 성공한다면 개발자는 푸쉬를 해 놓고 다른 일을 하면 되고, 기획자는 변화가 생길 때 마다 알림이 오니 개발자를 쥐어 짤 일이 없어지게 될 것입니다. 정말 행복하죠.


default

Workflow

이렇게 해서 우리는 프로세스의 청사진을 살펴보았습니다. 청사진의 자세한 워크플로우를 설명하기 전에, Bitrise는 정말 좋은 문서들을 제공하므로 어느정도 감이 잡히셨다 싶으면 바로 공식 홈페이지로 이동해서 시작하는 것도 좋을 것입니다. 직접 하면서 배우는게 가장 좋은 방법이니까요. 각 스텝들만 따라하다 보면 어느새 자동화 프로세스가 구축된 것을 보실 수 있을 겁니다.

Bitrise는 아주 간단히 말하면 여러가지 일들을 실행하는 클라우드 컴퓨터입니다. Bitrise의 강점은 GUI를 사용해서 쉽게 워크플로우를 구성할 수 있다는 점입니다.

따라서 Bitrise의 가이드는 Xcode Archive & Export for iOS나 Android Sign 과 같은 자신들이 미리 만들어 놓은 스텝을 통해 워크플로우를 설계하도록 권고하고 있습니다. YAML 파일을 만지거나 터미널을 조작할 일이 없으니 무척이나 빠르고 편하게 자동화 프로세스를 만들 수 있죠.


default

위 사진과 같이 존재하는 스텝들을 끌어다가 넣으면 하나의 자동화 프로세스가 만들어집니다.

Fastlane

그러나 이렇게 워크플로우를 구성하는 방식의 문제점은, Bitrise에 너무 종속적이라는 것입니다. 생각해 봅시다.

만약 Bitrise가 플랜의 가격을 1000$ 올린다고 하면 어떻게 될까요? 아니면 다른 CICD 툴을 사용해야 할 일이 생긴다면요? 처음부터 다시 모든 프로세스를 다시 설계해야 합니다. Bitrise가 제공해주는 스텝들을 사용해서 자동화 프로세스를 구성한다면 분명 편하겠지만, 이사할 때 매우 불편하겠죠.

따라서 우리는 여기저기 이사를 잘 다닐 수 있도록, 툴을 바꿔도 우리의 시스템이 잘 동작할 수 있도록 Fastlane을 사용할 것입니다.


default

fastlane is the easiest way to automate beta deployments and releases for your iOS and Android apps. 🚀 It handles all tedious tasks, like generating screenshots, dealing with code signing, and releasing your application.

Fastlane은 코드 사이닝, 스크린샷 찍기, 각 플랫폼의 배포하기 등 CD에 해당하는 거의 모든 부분을 해결해 줄 수 있는 라이브러리입니다. 사실 클라우드 서버에서 동작하는 CICD 툴이 없어도 Fastlane과 테스팅 라이브러리의 조합이면 자동화 프로세스를 공짜로 로컬에서 구현할 수 있습니다.

이 라이브러리가 무엇을 할 수 있는지 코드를 통해 알아봅시다.

lane :beta do
  increment_build_number
  build_app
  upload_to_testflight
end
lane :release do
  capture_screenshots
  build_app
  upload_to_app_store
  slack
end

release lane을 봅시다. lane은 하나의 워크플로우입니다. 워크플로우의 각 단계는 다음과 같습니다. 먼저 스크린샷을 찍고 앱을 빌드 한 뒤, 앱스토어로 보냅니다. 슬랙에서는 성공 알람을 보내주고요.

어디서 많이 본 프로세스 같죠? 아까 청사진에서 설명 드렸던 그 플로우와 그리 다를 것이 없습니다. 즉 굳이 CICD 툴을 쓰지 않는다고 하더라도 혼자 북치고 장구치고 다 할 수 있습니다. 아, 그리고 fastlane은 오픈소스 무료 라이브러리입니다.


아니 그러면 처음부터 Fastlane만 사용하면 되잖아요! 당신 Bitrise에서 인센티브 받지?

Bitrise + Fastlane = profit!

맞는 말입니다. 후자는 아닙니다. 로컬에서 Fastlane만 사용해도 충분합니다(컴퓨팅 자원이 빵빵하다면야 더). 다만 Fastlane과 Bitrise를 같이 사용한다면 더더욱 멋진 효과를 낼 수 있습니다.

클라우드 서버라는 이점과 환경변수나 키스토어 파일, 애플 아이디와 같은 부가적 요소 관리는 Bitrise에 맡기고 빌드와 배포의 중요 프로세스는 Fastlane에 맡기는 것이죠. 즉, 둘의 장점만을 가져올 수 있는 것입니다.

이렇게 구성한다면 Bitrise에서 Github action이나 Circle CI 같은 다른 툴로 넘어간다 하더라도 CD의 가장 큰 부분을 담당하고 있는 Fastlane의 코드만 가져간다면 시간을 들이지 않고 다시 프로세스를 만들 수 있습니다. Fastlane의 실행 커맨드는 클라우드 CI 서버의 터미널에서 입력만 하면 되니까요!

여기에 Bitrise는 Fastlane을 하나의 스텝으로 제공하므로 (사실 없어도 되지만) 수월하게 둘을 엮을 수 있습니다. 우리가 사용할 최종 워크플로우의 모습은 다음과 같습니다.


default

React Native를 사용해서 iOS와 Android를 동시에 빌드하는 워크 플로우 입니다. 전혀 복잡하지 않죠? 다음 글에서 다시 자세하게 설명할 것이니 어떻게 워크플로우가 이루어질 것인지 간단하게 설명해 보도록 하겠습니다.

  • CI 서버에 깃 클론
  • Script 스텝에서 yarn 설치
  • 설치한 yarn으로 라이브러리들을 설치
  • fastlane으로 iOS 빌드와 배포
  • 안드로이드 키스토어 파일을 CI 서버에 다운로드
  • fastlane으로 Android 빌드와 배포
  • Bitrise에 안드로이드 apk 파일 배포
  • 슬랙으로 결과와 apk 파일 설치 경로 알람

이렇게 됩니다. 이미 다 스포해 버린 느낌이네요.

그러면 다음 글에서는 실제 코드로 fastlane의 lane들이 어떻게 구성되어 있나 살펴보고, 더 자세한 설명을 통해 각 스텝들의 역할을 알아보도록 하겠습니다.