본문 바로가기

DevOps

[Appcenter] React Native 연동 - 기본편

새로 입사한 회사에서 인프라 관련 업무를 진행하게 되어 겸사 겸사 정리해 봅니다

기본적인 내용은 많이 생략되어 있으니 전체적인 흐름 파악용으로 참고하시기 바랍니다.

 

Appcenter 사용목적 및 다루는 내용

 

이번에 Appcenter를 도입한 이유를 정리하면 다음과 같다.

 

첫째. Github 등의 연결을 통한 앱 빌드(Android & IOS)

둘째. 빌드된 앱 배포(Play Store, Apple Store, Test User)

셋째. Code Push 를 통한 배포

 

이번에는 위 3가지를 적용하는 방법을 주로 설명할 예정이며, 기본적인 내용은 공식 문서를 참고 바랍니다.

 

Appcenter에 대한 자세한 설명은 공식 사이트를 참조하시기 바랍니다.

 

https://appcenter.ms/

 

Visual Studio App Center | iOS, Android, Xamarin & React Native

Ship fixes and enhancements as fast as you build them. Whether you prefer private distribution, public open betas, Microsoft Intune, TestFlight, Google Play, or the App Store, App Center makes releasing your app a delight.

appcenter.ms

 

 

개발환경

Appcenter: 4.1.0

React Native: 0.64.1

 

앱 & 조직 만들기

회원가입, 앱(조직) 생성 등의 부분은 생략하겠습니다.

아래 화면까지는 공식 사이트를 참고해 주시기 바랍니다.

 

 

공식 사이트

https://docs.microsoft.com/ko-kr/appcenter/dashboard/creating-and-managing-apps

 

앱 만들기 및 관리 - Visual Studio App Center

대시보드를 사용하여 App Center 앱 정보를 만들고 액세스합니다.

docs.microsoft.com

 

 

 

 

React Native 연동

위 화면이 나온다면 기본적인 가입절차는 완료된 상태이다

이후 React Native와의 연동 작업이 필요하다.

 

생성된 앱을 클릭 후 Overview 탭을 클릭하면 App_secret 을 볼 수 있으며,

AOS, IOS 각각 환경에 맞게 셋팅해 주시기 바랍니다.

 

참고로 대부분 React Native 6.0 이상의 버전을 사용하니 필요한 셋팅만 찾아서 적용해 주시기 바랍니다.

 

 

1. App Center SDK 모듈 추가 - 기본 공통

 

2. iOS 통합

3. Android 통합

 

부족한 내용은 공식 사이트를 참고해 주세요

https://docs.microsoft.com/ko-kr/appcenter/sdk/getting-started/react-native

 

React Native 시작 - Visual Studio App Center

React Native 시작

docs.microsoft.com

 

 

위 셋팅이 끝나면 React Native 앱에서 진행되는 기본 셋팅은 끝나며, 나머지는 Appcenter 웹 사이트에서 모든 작업이 이루어 진다.

참고로 Code Push를 위한 React Native 셋팅은 뒤에서 설명하겠습니다.

 

 

리포지토리 연결

Appcenter를 통해 AOS, IOS를 빌드하려면 저장소 연결이 필요하다. 많은 사람들이 사용하는 Github 연동에 대해서 알아보겠습니다.

 

Appcenter -> 앱 선택 -> gitHub -> 로그인 후 연결

 

참고로 연결 후 주소 변경을 원하는 경우 오른쪽 상단 점점점을 클릭하면 Disconnect 할 수 있다.

 

연결이 완료 후 아래와 같이 저장소의 Branch 정보가 화면에 나온다면 잘 연결된 것이다.

 

 

이후 빌드를 원하는 Branch 를 클릭 하거나 오른쪽 점점점 버튼을 클릭하여 빌드 속성에 대한 설정을 할 수 있다.

 

추가적으로 필요한 정보는 아래 공식 문서를 참조하세요

https://docs.microsoft.com/ko-kr/appcenter/build/connect

 

원본 리포지토리 연결 관리 - Visual Studio App Center

리포지토리에 연결/다시 연결하여 앱 빌드를 시작하는 방법

docs.microsoft.com

 

AOS & IOS 빌드 설정

위 Repository를 클리하면 빌드를 위한 설정을 할 수 있다.

 

AOS 빌드 설정

 Android 빌드 설정에서 필요한 부분만 확인해 보도록 하겠습니다.

크게 테스트를 위한 사용자 배포 및 Play store 배포 두가지를 살펴 보겠습니다.

 

이 두가지는 기본적을 같은 설정 값을 같는다 하지만 .aab 파일로 빌드를 해야 Play Store 배포가 가능하다

Case 1. 테스터 배포용: Bundle 빌드 없어도 됨

Case 2. Play Store 배포용: 위 옵션을 On 해야 배포 가능

 

기타 필요 없는 설정 - OFF 여도 가능함

Run unit tests, Lint source code, Build status badge