App Center 종료와 코드푸시 standalone 서버 구축기

 

Microsoft의 App Center 종료 공지와 함께 CodePush도 서비스를 종료했다

React Native로 빌드된 프로젝트를 운영 중이던 나에게는 꽤 난감한 상황이었는데

코드푸시가 없으면 모든 앱 업데이트를 스토어에게 심사를 받아야 하고, 간단한 업데이트도 스토어에 다시 들어가 업데이트 버튼을 눌러야 하기 때문에 반드시 필요했다

 

대안탐색

대안을 찾아보면서 자연스럽게 CodePush 구조와 OTA 업데이트 방식에 대해 더 공부하게 되었다

CodePush처럼 네트워크(와이파이, 셀룰러 데이터)를 통해 사용자의 기기에 직접 업데이트를 배포하는 방식은 OTA(Over-The-Air) 업데이트라고 불린다고 한다

 

아무튼

보통 많이 쓰는 대안은 두 가지였는데 첫 번째는 오픈소스로 풀린 CodePush-Standalone 서버를 직접 구축해 앱과 연동하는 방법

두 번째는 앱을 Expo로 전환하여 EAS Update를 사용하는 방식이었다.

 

나의 경우 React Native CLI 기반으로 잘 돌아가던 앱이 있었고

당장 유저 유입이 예정되어 있는 상황에서 리스크는 최대한 줄이고 싶었다

따라서 시간 대비 가장 안전한 선택은 CodePush Standalone 오픈소스를 서버로 배포하여 기존 구조를 그대로 유지하는 것이었다

 

Azure로 CoePush Standalone 배포하기

CodePush는 내부적으로 Azure Storage 기반으로 동작하고 있었다고 한다

그래서 그런지 Standalone 오픈소스 또한 Azure에 배포하기 쉬운 구조로 작성돼 있었고 가이드도 있었다

 

먼저 오픈 소스에 들어가서 깃 클론 (https://github.com/microsoft/code-push-server/tree/main)부터 받고

 

그다음 azure에 가입하고 cli를 설치한다

brew install azure-cli

# 로그인 하면 구독 선택하라는 메세지가 나오는데, 1번을 선택한다
az login 

# 그 다음으로는 리소스 그룹을 생성한다
az group create --name <이름 입력> --location koreacentral

# 다음으론 oauth를 추가하면 됨

 

그다음으론 CodePush Standalone 서버에 로그인하기 위해서 깃허브 oauth를 사용할 것이다

마이크로소프트 로그인도 있는데 나는 깃허브로 할 거라서 /api/codepush-infrastructure.bicep에 마이크로 소프트 설정 부분은 삭제했다

 

깃허브 oauth를 설정하는 방법은

 

1. https://github.com/settings/developers로 들어간다.
2. New OAuth App을 클릭한다.
3. Homepage URL에는 CodePush 서버 주소를 넣는다.(로컬에서 테스트할 거면 http://localhost:3000이나 https://localhost:8443 써도 된다)
4. 예를 들어 Azure에 올렸다면 → https://codepush-<project-suffix>.azurewebsites.net
5. Authorization callback URL은 다음처럼 설정한다.(로컬이면 /auth/callback/github 경로 붙여서 똑같이 설정해 주면 됨)
6. https://codepush-<project-suffix>.azurewebsites.net/auth/callback/github

주의할 점은 아까 클론 받은 codepush-standalone이 올가니제이션에 있을 경우 거기에 있는 oauth app에 넣어야 한다

 

그럼 이제 인프라 세팅하면 됨

 

아까 추가한 리소스 그룹 넣고, 각종 환경 변수를 넣으면 된다. (./api/codepush-infrastructure.bicep)

az deployment group create \
  --resource-group <그룹명> \
  --template-file ./api/codepush-infrastructure.bicep \
  --parameters project_suffix=<서픽스> \
               az_location=koreacentral \
               github_client_id=<깃허브 아이디>
               github_client_secret=<깃허브 시크릿>

배포가 완료되면 Azure 포털에 App Service에서 환경변수가 잘 적용되어 있는 것을 확인할 수 있다.

 

 

그다음 서버 코드를 azure에 배포할 거다

 

여기부터는 문

git remote add azure https://<app-name>.scm.azurewebsites.net/<app-name>.git

# azure에 main브런치를 push
git push azure main

 

주의할 점:

브랜치는 반드시 master여야 한다. 기본이 main이라면 아래처럼 전환:

git checkout -b master

 

그 후 push:

git push azure master

성공적으로 배포되면 실제 서비스가 아래처럼 뜨게 된다

 

잘뜸

 

이제 프론트 앱에 연결하면 되는데, 이건 내가 설명하지 않아도 여기에 너무 잘 나와있어서 패스하도록 하겠다 

(기존에 코드푸시 연동했던 거랑 똑같음! 라이브러리도 똑같은 거 쓰면 된다)

 

 

마치며

직접 배포해 보니까, 생각보다 막 엄청 복잡한 건 아니었는데 문서에 안 쓰여있는 것들에서 자꾸 막히는 게 많았다.

 

예를 들면

• GitHub OAuth 등록은 하는데, 조직 소유로 넘기지 않으면 인증이 안 되거나
• 브랜치가 main이면 아예 푸시가 안 되는 문제
• Microsoft 인증 부분 주석처리했더니 오류 나서 아예 삭제해야 하는 구조 등…

이런 건 직접 해보지 않으면 잘 모른다.

 

다 하고 나니 느낀 몇 가지 꿀팁을 주자면 

• 환경변수는 Azure 포털에서 다시 수정 가능하니까 과도하게 집착할 필요는 없음
• 인증 문제 생기면 대부분 client_id나 callback URL 잘못 설정된 경우가 많았음

 

App Center가 사라진 건 아쉽긴 한데 오히려 구조를 더 잘 이해하게 되는 계기가 되기도 했고,

앱센터 없이 우리 서버에서 OTA 시스템을 돌리고 있다는 사실이 꽤 뿌듯하다.