[React Native] Codepush Standalone 구축하기 - 기본편

 

안녕하세요, RyuWoong 입니다.

올해 5월 Appcenter가 종료예정임으로 우리는 React Native Codepush 서버를 직접 구축해서 운영해야합니다.

 

따라서 이번 포스팅은 React Native Codepush Standalone 서버를 Local로 구축해보기! 입니다.

제목에서 보셨다 싶이 기본편과 고급편을 나눠서 작성할 예정입니다.

이유는 Local에 배포해보며 연습 후, Azure 또는 AWS S3에 배포해보는 것으로 주제를 나눠서 이야기할 예정입니다.

 

기본편에서는 기본적인 구축에 대한 내용을 담았습니다.

천천히 따라와 주세요!

 

MacOS를 기준으로 합니다.

---

준비하기

---

Azurite 설치

Codepush Standalone을 구축하기 위해 사전 단계를 필요로 합니다.

현 Codepush StandAlone은 Azure Storage를 사용하게끔 구현되어 있습니다. 따라서 로컬에서 테스트하기 위해 azurite를 설치해야합니다.

 

먼저, 터미널을 열어 아래와 같이 입력하여 azurite를 설치하고 실행합니다.

npm install -g azurite // 전역으로 azurite를 설치합니다.

azurite // azurite를 실행합니다.

 

만약 VSCode를 사용중이라면 Extension을 활용해 쉽게 설정 할 수 있습니다.

자세한 사항은 아래 링크를 참조해주세요.

Use Azurite emulator for local Azure Storage development

 

Codepush CLI 설치하기

다음, 우리는 CLI를 설치해야합니다. 기존 Appcenter CLI와 유사합니다.

아래 Repository를 Clone하여 터미널을 이용해 Repository 폴더 내 cli로 path를 이동합니다.

GitHub - microsoft/code-push-server: Standalone CodePush server from App Center

 

만약 VSCode로 Clone된 Repository를 열었다면, 아래와 같은 순서로 Terminal에 입력할 수 있습니다.

cd cli # cli 폴더로 이동합니다.

npm install # package를 설치 합니다.
npm run build # build 합니다
npm install -g # 해당 프로젝트를 전역으로 설치합니다.

code-push-standalone -v # 코드푸시 스탠드얼론 cli 버전을 확인합니다. 25/1/8 기준 0.0.1 버전

 

Codepush Server 설치하기

이어서, 이번엔 이전에 받은 Repository의 api 폴더로 이동합니다. 아래 명령어 입력 기준 path는 root directory입니다.

cd api # api 폴더로 이동합니다.

npm install # package를 설치 합니다.
npm run build # build 합니다

cp .env.example .env # .env.example을 .env라는 이름으로 복제합니다.

npm run start:env # codepush Server를 실행합니다.

 

우리가 기억해야할 사항은, 서버 기본 port번호가 3000 번 입니다.

만약 변경을 원한다면 .env 파일에 API_PORT 라는 키 값을 추가하여 설정할 수 있습니다.

 

CLI 사용하기

---

Local Storage 설정

api 폴더 내  .env 파일을 열어 아래 EMULATED 값을 true로 변경해줍니다.

// .env

# ==============================
# Storage Configuration (REQUIRED - choose one)
# ==============================
EMULATED=true # Set to 'true' to use the local emulator

 

codepush standalone 로그인

Codepush를 사용하기 위해 우리는 기존에 Codepush를 사용하던 것처럼 로그인을 통해 권한을 받아야합니다.

Terminal에 아래와 같이 입력하여, 먼저 계정을 생성하도록 하겠습니다.

 

# 계정 생성 명령어
code-push-standalone register

azurite와 Codepush Server 둘 다 실행 중이여야 합니다.

 

위 명령어를 입력하면, 인터넷 창이 실행됩니다만, 아래처럼 선택할 수 있는 것이 없는 상황에 처하게 됩니다.

 

우리가 계정을 생성할 수 있는 방법은 크게 2가지가 있는데 Github OAuth 또는 Microsoft OAuth를 이용하는 방법과 Access 토큰을 생성하여 로그인하는 방법이 있습니다. 

여기서는 첫번째 방법 중 Github OAuth를 통해 다루는 방법을 설명합니다.

 

Github OAuth 설정하기

Github에 로그인 하여 Setting으로 들어갑니다.

여기서 Developer Setting → OAuth Apps 로 들어가 New OAuth App을 선택합니다.

붉은 * 표기가 된 사항은 필수 입력란이니 꼭 채워줘야 합니다.

이름은 마음대로 설정하세요. 저는 Codepush_Local로 설정했습니다.

HomeURL은 .env 의 SERVER_URL을 그대로 입력하며,

Authorization callback URL은 `{HomeURL}/auth/callback/github` 을 입력합니다.

예를 들어, 현재 기본 값으로 설정된 내용을 그대로 따라간다면,

 

HomeURL 은 `http://localhost:3000` 

Authorization callback URL은 `http://localhost:3000/auth/callback/github` 이 됩니다.

다 입력한 후 Register apllication을 선택하면 OAuth App이 만들어집니다. 

방금 만든 Github OAuth App앱에 진입하여,  ClientID와 Client secrets를 가져와 .env내 알맞게 넣어줍니다.

// .env
...

# --- GitHub OAuth ---
GITHUB_CLIENT_ID=****     # GitHub OAuth client ID
GITHUB_CLIENT_SECRET=**** # GitHub OAuth client secret

...

 

이후 다시, Codepush Server를 재실행하고 계정 생성 명령어를 입력합니다.

code-push-standalone register

 

이번에는 아래와 같이, Github 버튼이 나타났습니다. 해당 버튼을 눌러 Github OAuth 과정을 거쳐 access Key를 받아올 수 있습니다. 해당 키를 명령어를 입력한 터미널에 붙여 넣어주면, 계정이 생성되며 로그인 처리됩니다.

 

이후 로그아웃 하거나 다시 로그인 한다면 아래 명령어로 진행할 수 있습니다.

# 로그인
code-push-standalone login

# 로그아웃
code-push-standalone logout

 

App 관리 및 배포

---

App Management

여기서 부터는 기존 Codepush 사용방법과 유사합니다!

우선, 앱을 추가해야겠죠? Appcenter에 앱을 등록하는 것처럼 앱을 추가해봅시다.

아래 명령어를 통해 추가 할 수 있습니다.

code-push-standalone app add <appName> # 앱 추가

 

추가로 알아두면 좋은 명령어

code-push-standalone app rename <appName> <newAppName> # 앱 이름 변경

code-push-standalone app rm <appName> # 앱 삭제

code-push-standalone app ls # 앱 리스트

 

Deployment Management

앱을 추가하면 기본적으로 Deployment에 Production, Staging이 생기는데 이를 추가, 변경, 삭제 할 수 있습니다.

ode-push-standalone deployment add <appName> <deploymentName> # deployment 추가

code-push-standalone deployment add <appName> <deploymentName> -k <existing-deployment-key> # deployment 추가 - 기본 키 재사용

code-push-standalone deployment rm <appName> <deploymentName> # deployment 삭제

code-push-standalone deployment rename <appName> <deploymentName> <newDeploymentName> # deployment 이름 수정

 

Deployment 현황을 보려면 아래 명령어를 통해 확인이 가능합니다.

code-push-standalone deployment ls <appName> [--displayKeys|-k]

 

Release

배포도 기존 방식과 거의 유사합니다. 

문서에서는 2가지 방법이 있다고 소개하는데, 특별한 경우가 아니라면 React Native 방식만 사용하면 됩니다.

code-push-standalone release-react <appName> <platform>
[--bundleName <bundleName>]
[--deploymentName <deploymentName>]
[--description <description>]
[--development <development>]
[--disabled <disabled>]
[--entryFile <entryFile>]
[--gradleFile <gradleFile>]
[--mandatory]
[--noDuplicateReleaseError]
[--outputDir <outputDir>]
[--plistFile <plistFile>]
[--plistFilePrefix <plistFilePrefix>]
[--sourcemapOutput <sourcemapOutput>]
[--targetBinaryVersion <targetBinaryVersion>]
[--rollout <rolloutPercentage>]
[--useHermes <useHermes>]
[--podFile <podFile>]
[--extraHermesFlags <extraHermesFlags>]
[--privateKeyPath <privateKeyPath>]
[--xcodeProjectFile <xcodeProjectFile>]
[--xcodeTargetName <xcodeTargetName>]
[--buildConfigurationName <buildConfigurationName>]

 

 

React Native App 설정

---

다음은 App에 Codepush Setting을 해줄겁니다. 

iOS를 예로 작성 하겠습니다. Android도 비슷하게 적용하면 됩니다.

 

기본적으로 Codepush 설정을 따르되, info.plist에 CodePushServerURL이라는 키 값이 추가됩니다.

 아래 값을 올바르게 넣었는지 확인해주세요.

#info.plist

...

<key>CodePushDeploymentKey</key>
<string>deployment-key</string>
<key>CodePushServerURL</key>
<string>server-url</string>

...

 

그 외 사항은, 아래 README와 동일하니 참고해주세요.

react-native-code-push/docs/setup-ios.md at master · microsoft/react-native-code-push

 

이걸로 끝입니다.

생각보다 간단해서 놀랍죠?

테스트로 새로운 앱을 만드실때, Codepush는 NA(New Architecture)를 지원하지 않기 때문에, RN 버전에 유의하시길 바랍니다.

다음은 고급편으로 찾아 뵙겠습니다. 감사합니다.

 

 

참조

---

https://github.com/microsoft/code-push-server

GitHub - microsoft/code-push-server: Standalone CodePush server from App Center

 

https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azurite?tabs=visual-studio%2Cblob-storage

Use Azurite emulator for local Azure Storage development