1. 리액트 네이티브로 Play스토어 앱출시 하기 - 안드로이드 릴리즈 빌드 (Android Release Build)

 

리액트 네이티브 릴리즈 빌드 방법

[ 리액트 네이티브(React-Native)로 안드로이드 앱 출시 하기 ]

   1.편) 리액트 네이티브 - 안드로이드 릴리즈 빌드 하기 
   2.편 ) 리액트 네이티브 - 코드 사이닝 (앱서명) 
           2020/04/25 - [개발 이야기/React-Native] - 2. 리액트 네이티브 - 코드 사이닝 (code signing - 앱서명)

---

 

개요

 

[ 본문 요약 ]
리액트 네이티브 코드를 릴리즈 빌드 하자. AAB 타입 번들링과 APK 파일 2종으로 구분할 수 있다. 
바쁜 독자를 위해서, 안드로이드 버전 번들링과 APK 파일 만들기 명령을 먼저 표기 한다. 
또한, 번들링 결과 파일의 위치 또한 참조 하길 바란다.

번들링
>> $ cd android && ./gradlew bundleRelease
결과파일 위치 :  andorid/app/build/outputs/bundle/aap-release.aab 

APK 파일 만들기
>> $ cd android && ./gradlew assembleRelease
결과파일 위치 :  android/app/buildoutputs/apk/release/app-release.apk

 

 

 

 

 

 

리액트 네이티브 

 

리액트 네이티브 (React Native) 는 자바스크립트(Javscript) 기반 모바일앱 개발 환경이며, 크로스 플랫폼 (android / iOS) 개발을 지원합니다. 무슨말인고 하니, 한번 개발해서, 안드로이드용 앱과 아이폰용 앱을 한번에 개발/배포 할 수 있다는 말이죠. 자바스크립트로 개발한 만큰 진입장벽을 상당히 낮추었고, 개발의 속도가 가속화 되었습니다. 바야흐로, 비전문가도 상용 모바일앱을 만들 수 있는 시절이 된거죠.

개발언어가 아니라 개발 환경이라고 말씀 드린 이유는, 언어자체는 Javascript 그대로를 사용하지만, Javascript로 이미 만들어진 라이브러리로 새롭게 갖추어진 환경이기 때문입니다. 이 때문에 리액트 네이티브를 자바스크립트의 라이브러리라고 하기도 합니다. 

 

모바일앱 개발 생산성 향상 측면에서 볼 때, MIT의 스크래치(Scratch)가 있습니다만, 교육용으로는 좋으나 상용앱을 만들기에는 부족함이 많습니다. 최근 리액트 네이티브와 유사한 목적을 가진 플러터(Flutter)가 주목 받고 있으나, 아직 초기여서인지 개발자가 그렇게 많지는 않는것 같으나, 이 역시 생산성을 극대화 하기 때문에 주목해 볼 필요가 있습니다. 오늘은 일단 리액트 네이티브에 주목해 보도록 하겠습니다. 

 

리액트 네이티브의 개발과정은 별도로 세션을 만들어 포스팅 할 예정이고, 오늘은 앱코드는 작성했다는 가정하에 릴리즈 빌드/Play Store에 앱게시에 대한 이야기를 해 보려 합니다.

 

이번 글은, 아래와 같은 궁금증이 생겼을 때 보고 싶어 질 겁니다. 

 

Hello World 다 해봤어요.

이제 그 다음 어떻게 해야 하죠?

 

최종 빌드파일을 만들고 싶어요. (릴리즈 빌드 - release build)

APK 파일을 만들고 싶어요.

구글 플레이 스토어 (Play Store)에 게시하고 싶어요. 

릴리즈 빌드 결과 파일이 어떤 경로에 저장되지?

 

라는 생각이 들 때, 바로 이 글을 참조해 주세요

 

 

 

리액트 네이티브 안드로이드 실행/빌드

 

 

지금껏 리액트 네이티브를 개발하면서 아래와 같이 실행/테스트를 해 보셨을 겁니다. 

$ react-native run-android

위와 같이 실행하는 것은 개발할 때 사용하는 상태입니다. (Hot Reloaded) 상태로써 개발을 편리하게 하기 위해서 결과물 확인만 할 수 있는 상태이며, 실제 배포가 가능한 상태가 아닙니다. debug server를 이용해서 실행화면만 확인하는 상태라고 보시는 것이 적당하겠네요.

리액트 네이티브 (React Native) 0.60 ==> 현재 최신 버전은 0.62입니다. (2020.3월 시점) 그러나 아직 안정성이 낮습니다.

 

 

안드로이드 빌디(build)와 번들링 (Bundling)

개발 완료 후 배포를 위해서는, 파일을 하나로 묶어야 합니다. 리액트 네이티브에서는 이렇게 파일을 하나로 묶는 방법이 2종류가 있습니다. 첫째, 번들링(bundling), 둘째 APK 파일 packaging 입니다.

 

번들링(Bundling)은 말그대로 필요한 파일들만 묶어 놓은 수준입니다. 연관파일 여러개를 모으고 하나의 파일로 압축해 놓았다고 생각하면 됩니다. 그래서 확장자도 .aab (Android App Bundle) 입니다. 저는 Google Play Store 출시할 때 AAB파일을 사용합니다.

 

또다른 방법인, apk파일을 생성하는 것입니다. APK 파일은 파일을 묶었을 뿐만 아니라, 내부적으로 class 파일, dex 파일 형태로 크로스컴파일 된 파일입니다. (단순 묶음이 아닌거죠.) APK 파일은 파일은 직접 설치가 가능하기 때문에 플레이스토어(Play Store) 등의 앱마켓을 거치지 않고 직접 배포/설치가 가능합니다. 그런나, Play Store에 게시가 목적이라면, 여러가지 이유로 aab가 더 편리합니다. (aab 파일 signing key 등 별도 처리/관리가 발생할 수 있습니다.)

 

마직막으로, 번들링 또는 패키징 할 때의 버전은 Debug or Release 버전을 사용하느냐 선택이 가능합니다. 이번 글은 당연하게도 릴리즈 배포(Release) 버전에 집중합니다. 

 

React Native 공식 홈페이지에는 Google Play Store에 출시하기라는 제목으로 설명이 되어 있습니다. 그러나, 우리는 아직 번들링 과정도 거치지 않은 상태이므로, 번들링이 완료 되면 이 글을 읽어 봅시다. 아직은 필요 없겟습니다. 게다가 무려...영어 ^^ 입니다. ㅎㅎ
(https://reactnative.dev/docs/signed-apk-android)

React Native 공식 홈페이지: Google Play Store 출시 절차 설명

---

그럼 결론부터 갑니다. 

react-native 개발 root 폴더에서 android 폴더로 이동하여, ./gradlew 를 실행해 줍니다. 

$ cd android
$ ./gradlew bundleRelease

혹은

$ cd android && ./gradlew bundleRelease

경우에 따라서는 여러번 번들링/빌드를 하다보니, 번들링 결과가 여러번 생성될 수 있습니다. 따라서 안정성을 위해서, 정리를 할 필요가 있습니다. 이런 경우에는 clean 명령어를 진행 후 다시 bundleRelease를 실행해 주도록 합니다. ( gradlew 는 어느환경이든지 동작하도록 만들어 놓은 portable gradle 이라고 보면 된다.)

$ cd android && ./gradlew clean && ./gradlew bundleRelease

bundleRelease는 bundling 과정입니다. apk 파일은 어떻게 생성할까요?? 

아래와 같이 assembleRelease 명령으로 실행해 주면 됩니다.  bundle 파일을 모아서 apk파일로 만들어 줍니다.

$ cd android && ./gradlew assembleRelease

리액트 네이티브 안드로이드 릴리즈 빌드 (Android bundle Release Build)

 

 

 

 

 

 

빌드/번들링 결과파일

Release 버전이든 debug 버전이든 일단 빌드가 되고나면, "android/app/build/outouts/"에 각 종류에 해당하는 결과파일이 생성됩니다. 초기 상태에는 android/app경로에 build/ 폴더가 존재하지 않습니다, ./gradlew **** 를 실행함에 따라서 다양한 종류의 빌드버전들(generated / intermediates 등 중간 생성 단계 등)이 생성되게 되며, 경우에 따라서는 이러한 버전들이 충돌을 일으키기 때문에, clean을 해주어 초기 상태로 만들어 준다. 

./gradlew bundleRelease 를 실행하면, 컴파일 과정이 한 동안 진행되고, android/app/build/* 이 생성되어 있는 것을 확인할 수 있습니다.

릴리즈빌드 과정 및 컴파일 과정

번들링이 실행되고 나면 app-release.aab 번들 파일 (andorid/app/build/outputs/bundle/app-release.aab )이 생성됩니다. 마찬가지로, ./gradlew assembleRelease를 실행하면 app-release.apk ( android/app/buildoutputs/apk/ release/app-release.apk ) 파일이 생성 됩니다. 

 

참고로, release 버전으로 구동을 테스트 할 때는 --variant=release 옵션을 넣고 실행하면 된다. 이 때 Debug Mode(Hot Reloaded)와는 달리, 디버그 메세지가 출력되지 않음에 참고하시길 바란다.

$ react-native run-android --variant=release 

 

 

 

 

 

 

빌드 옵션 상세

 

이전 섹션에서 설명한 ./gradlew bundleRelease 명령은 기본 옵션을 사용하여 빌드를 진행하는 경우이다. 때때로, 번들링 파일 (index.js) 혹은 리소스파일 등의 경로 설정이 필요한 경우가 있다. 다음은 상세 옵션을 조정하여 빌드하는 예제 이다. 

$ 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/

  --platform android : 안드로이드 빌드
  --dev false : 릴리즈 모드로 빌드
  --entry-file index.js : index.js를 시작으로 번들링 할것
  --bundle-output *** : 번들결과 파일 위치 및 파일명 설정
  --assets-dest *** : 리소스 경로 설정

---

 

자. 이제 여러분은 App-Release.aab. 파일을 사용하여 Play Store에 앱을 게시할 준비가 되었습니다.

그런데, 그 전에 딱 한가지... 한가지만 더 거쳐야 할 단계가 있습니다. 바로 코드서명 (Code Sigining)과정입니다. 어렵지 않은데 꼭 한번은 해야 할 사항입니다. 

 

   1) 우선 서명키(Signing Key)를 만들고,

   2) 서명키를 사용하여 bundle 파일을 서명 (서명하여 다시 번들링)

   3) 새로 서명된 번들파일로 Play Store에 게시하면 됩니다. 

 

다음 포스팅에는 코드 사이닝에 대해 다루도록 하겠습니다. 이후 순차적으로 Play Store에 게시하는 과정을 포스팅 할 예정입니다. 

그런데 코드사이닝은 왜 하는 것일까?

default로 debug key를 사용하여 signing이 되었을 것이다. 그러나, 말 그대로 default이기 때문에 누구나가 알 수 있는 패스워드 이다. 

그런데, app bundle에 signing은 왜 하는 것인가? 
그것은 지금 이 app가 내가 개발하고 빌드한 것이 정확함을 서로 증명하기 위한 수단이다. 동일해 보이는 app일 지라도 singing 결과가 다르다면, 자신 대신 누군가 위변조 해서 해당 app를 빌드/출시 할 수도 있기 때문이다. 즉, signing에 필요한 keystore와 패스워드가 다른사람에게 유출되면, app가 위변조 될 수 있다. 

signing key 및 keystore에 대한 설정은 android/app/builde.gradle에서 설정할 수 있으며, 기본(default)로 debug.keystore가 사용된다. 이 때 패스워드는 'android' 이다. 

참조 : https://dev-yakuza.github.io/ko/react-native/android-running-on-device/

 

긴글 읽어주셔서 감사합니다. 

 

 

---

다음글

다음 글 : 2. 리액트 네이티브 - 코드 사이닝 (code Signing )

2020/04/25 - [개발 이야기/React-Native] - 2. 리액트 네이티브 - 코드 사이닝 (code signing - 앱서명)

 

2. 리액트 네이티브 - 코드 사이닝 (code signing - 앱서명)

 

 

 

 

 

---

[관련글]

2020/03/27 - [개발 이야기/React-Native] - 리액트 네이티브 - 앱 처음 실행 확인 하기2020/03/09 - [개발 이야기/React-Native] - React JS 입문 - 10만에 보는 리액트

2020/03/09 - [개발 이야기/React-Native] - React Native - Sample 개발기

2020/03/09 - [개발 이야기/React-Native] - [ React Native ] 리액트 네이티브 10분만에 개발 - 구름 IDE 환경에서 리액트 네이티브 개발

2020/03/27 - [개발 이야기/React-Native] - 리액트 네이티브(React Native) 앱에 Splash Image 적용하기

2020/05/09 - [개발 이야기] - 온라인 IDE - 개발 환경 구축 없어 어디서나 웹브라우저로 개발하기

2020/03/13 - [개발 이야기/React-Native] - 리액트 네이티브 보상형 광고 보여주기

2020/03/09 - [개발 이야기/React-Native] - [React Native Vector Icons] 리액트 네이티브 벡터 아이콘을 달아 보자

2020/05/12 - [IT 이야기/IT 상식] - 검색엔진 최적화 (SEO) - 사이트 중복을 피하라 (Canonical 태그)