Fastlane, CircleCI를 이용하여 React Native DevOps 도입기 (4)

1. 개요

DevOps 우리는 지금까지

Fastlane, CircleCI를 이용하여 React Native DevOps 도입기 (1)
Fastlane, CircleCI를 이용하여 React Native DevOps 도입기 (2)
Fastlane, CircleCI를 이용하여 React Native DevOps 도입기 (3) 을 거쳐서 iOS, Android 모두 구성을 마쳤다. 이제 앞에서 진행했던 JS Test-> Native Test -> Beta Test Deploy 과정을 모두 자동화해보자.

2. package.json에 Script 추가하기

DevOpsForRN/package.json에 beta script를 추가되어 있는지 확인한다.

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "beta": "cd ios && fastlane increase_build_number_and_push_to_beta" # 변경
  },

3. Fastlane Slack Notify 추가하기

모든 작업이 완료되었을 때 Slack으로 Notification을 받기 위한 설정은 다음과 같다. DevOpsForRN/ios/fastlane/Fastfile 파일의 beta lane 에 slack 부분을 추가한다. slack(슬랙), incoming webhooks 을 사용해보자. - seotory의 블로그 아티클이 도움이 될 수 있다.

  lane :beta do
    desc "TesfFlight for IOS"
	  ...
    ...
    slack(
		slack_url: "https://hooks.slack.com/services/*******/********/******************"
	    channel: "dev",
	    message: "Successfully uploaded a fastlane beta release"
    )
    end
    ...		
end

4. 작성한 내용 검증하기

위 설정이 올바르게 되어있으면 다음의 커맨드를 입력하였을 때 ios의 빌드 넘버를 변경하고 git의 beta branch에 변경내용을 push한다.

$ npm run deploy

우리가 설정한 테스트 -> 빌드 -> 베타 배포의 과정이 완료되었다면 다음과 같은 화면을 볼 수 있다. CircleCI-Success

ETC: S3 Static Hosting으로 보여주기

s3-bucket-listing 플러그인을 이용하면 S3 대시보드에 직접 접속하지 않아도 Static Website Hosting처럼 S3의 내용을 표시할 수 있다. static-hosting Demo: S3 Bucket Listing Generator

ETC: Build Error

혹시나 CircleCI에서 다음과 같은 에러로 빌드가 되지 않는 경우도 있다.

bundle: Done writing bundle output
:app:bundleReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 137

해결방법: 이유는 모르겠지만 첫 번들링이 실행이 안되는 경우도 있는 것 같다. 해결방법은 첫 번들링을 로컬에서 실행해주고 remote로 올려서 CircleCI가 overwrite하게 하는 방법이다.

$ mkdir android/app/src/main/assets
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
$ git add --all
$ git commit -m 'Added bundle.android.js'
$ git push origin master
$ npm run beta

Ref: https://github.com/facebook/react-native/issues/11696

자동화된 과정들 정리

React Naitve의 Beta Testing을 자동화 하기 위하여 지금까지 작성한 내용은 다음과 같다.

$ npm run deploy 커맨드를 입력한다 (Developer)
IOS Project의 Build Number를 1 증가시킨다. (Fastlane local)
Git의 beta Branch에 코드를 push한다. (Fastlane local)
Github이 Webhook을 통해 CircleCI가 beta Branch에 코드가 커밋된 사실을 알아챈다. (Github)
CircleCI가 beta Branch에 대하여 JS Test -> ios, android 각각 빌드 -> Native 테스트 -> 배포의 과정을 실행한다. (CircleCI)
ios의 경우 미리 지정한 사용자에게 TestFlight가 전송된다. (Fasltnae on CircleCI)
Android의 경우 미리 지정한 S3 Bucket에 Release APK가 업로드된다. (Fasltnae on CircleCI)
Slack Message를 미리 지정한 채널에 전송한다. (Fasltnae on CircleCI) 따라서 일련의 과정을 그려보면 다음과 동일하다.

데모 프로젝트

아래 Github에는 지금까지 적용했던 모든 사항들이 적용되어 있다. 혹시 세부적인 세팅이 궁금하다면 참조하자. https://github.com/philographer/DevOpsForRN

마무리하며

지금까지 FaceBook의 하이브리드 앱 프레임워크인 React Native의 CI/CD Flow를 구축해 보았다.

이용자의 Needs가 점점 다양해지면서 비즈니스 또한 그 기대에 부응하기 위하여 발 빠르게 움직여야 하는 시대가 되었다. 이에 따라서 개발자들 또한 여러 가지 Unit/integration test, beta test, build 들을 자동화하지 않고는 고객들의 요구사항을 맞출 수 없는 상황에 이르렀다. 보다 품질이 보증되는 소프트웨어를 만들기 위한 노력은 소프트웨어 생태계가 발전하면서

만약, 팀의 누군가 한 명이 자발적으로 이런 DevOps에 관심을 가지고 자동화를 한 번만 잘 적용해 놓는다면 팀 모두의 생산성과 코드의 품질을 높일 수 있다. 이제는 DevOps에 대하여 깊이 있게 알지 못하더라도, 여러 가지 좋은 서비스가 시장에 많이 나와 있으므로 작은 비용의 유료 Plan이나 Open Source 잘 조합하여 적용한다면 팀에게도 생산성과 코드 품질에 큰 도움이 되지 않을까 생각한다.

Written by@Philographer

Fail Fast, Learn Faster

GitHub linkedIn Facebook