RN - CODE PUSH [ iOS ]

react native iOS 코드푸시 적용하기

김보람

Jan 12, 2024

Contents

CODE PUSH [ iOS ]

CODE PUSH

앱의 JavaScript 코드나 리소스(예: 이미지, 스타일 등)를 스토어 앱 업데이트를 통하지 않고 유저의 앱에 바로 업데이트하는 기능

⚠️ 네이티브를 통한 코드는 코드푸쉬가 불가능하며 JS 또는 자산만 코드푸쉬가 가능하다.

code push 과정 요약

프로젝트의 JavaScript 코드나 리소스(예: 이미지, 스타일 등)를 변경
AppCenter에 업데이트 배포
기존 앱 실행시, 앱은 AppCenter 서버와 통신하여 새로운 업데이트가 있는지 확인
새로운 업데이트가 있을 경우, 앱은 백그라운드에서 자동으로 해당 업데이트 파일을 다운
다운로드가 완료되면, 앱은 그 즉시 또는 사용자가 앱을 다시 시작할 때(선택 가능) 해당 업데이트를 적용
1. 기본적으로 재실행 될 때 업데이트하지만 아래와 같은 옵션으로 앱의 재시작 없이도 업데이트된 내용을 반영할 수 있다
  installMode: CodePush.InstallMode.IMMEDIATE
업데이트가 성공적으로 적용되면 해덩 버전 실행

[ iOS ]

앱센터 홈페이지 접속
엡센터에 내 앱 등록

프로젝트에 관련 패키지 다운로드

npm i -g appcenter-cli  
yarn add react-native-code-push

cd ios && pod install

info.plist 수정
project.pbxproj에 각각 변수화 해서 사용한다
```
<key>CodePushDeploymentKey</key>
<string>${CODEPUSH_KEY}</string>
```
KEY를 모를경우 터미널에 아래와 같이 명령하면 찾을수 있고
appcenter codepush deployment list -a <ownerName>/<appName> -k

위 명령어로 반환되는 값이 없을경우 appcenter에서
“본인앱 선택/Distribute/CodePush”내 [Create standard deployments]버튼을 눌러 생성해준 후 재시도
AppDelegate.mm수정

#import <CodePush/CodePush.h>
...
...
//[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//위 코드를 검색해 아래로 바꿔준다
return [CodePush bundleURL];

CODEPUSH_KEY를 전역변수로 연결
1. XCode 열기
2. 본인 프로젝트 > Project > info > Configurations 내 + 버튼을 클릭
  ‘Duplicate Release Configuration’을 선택하고 새로 추가된 설정의 이름을 Staging이라고 수정한다
3. 본인 프로젝트 > Project > Build Settings내 상단 + 버튼 클릭
  Add User-Defined Setting을 클릭해 “ MULTI_DEPLOYMENT_CONFIG ” 와 같은 이름으로 생성해주고,
  생성된 테이블 내의 Release에는 아래와 같이
  “$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)”
  Staging는 아래와 같이 넣어준다
  “$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)”
4. 다시 +버튼을 눌러 Add User-Defined Settings을 클릭해 이번에는 “CODEPUSH_KEY”라고 선언해주고, 테이블 내 Release와 Staging에 각각 부여받은 키를 넣어준다.
App.tsx를 CodePush로 감싸주기

import CodePush from 'react-native-code-push';

...
...
...
export default CodePush(App);

테스트
1. 디바이스에 릴리즈버전 올린후 코드수정하여 아래 명령어로 앱센터 업데이트
```
appcenter codepush release-react -a 오너이름/앱이름 -d Production
or
appcenter codepush release-react -a 오너이름/앱이름 -d Staging      
```
2. 디바이스에 설치된 앱에 반영되었는지 확인

Contents

CODE PUSH [ iOS ]

CODE PUSH

앱의 JavaScript 코드나 리소스(예: 이미지, 스타일 등)를 스토어 앱 업데이트를 통하지 않고 유저의 앱에 바로 업데이트하는 기능

⚠️ 네이티브를 통한 코드는 코드푸쉬가 불가능하며 JS 또는 자산만 코드푸쉬가 가능하다.

code push 과정 요약

프로젝트의 JavaScript 코드나 리소스(예: 이미지, 스타일 등)를 변경

AppCenter에 업데이트 배포

기존 앱 실행시, 앱은 AppCenter 서버와 통신하여 새로운 업데이트가 있는지 확인

새로운 업데이트가 있을 경우, 앱은 백그라운드에서 자동으로 해당 업데이트 파일을 다운

다운로드가 완료되면, 앱은 그 즉시 또는 사용자가 앱을 다시 시작할 때(선택 가능) 해당 업데이트를 적용

기본적으로 재실행 될 때 업데이트하지만 아래와 같은 옵션으로 앱의 재시작 없이도 업데이트된 내용을 반영할 수 있다
installMode: CodePush.InstallMode.IMMEDIATE

업데이트가 성공적으로 적용되면 해덩 버전 실행

[ iOS ]

앱센터 홈페이지 접속

엡센터에 내 앱 등록

프로젝트에 관련 패키지 다운로드

npm i -g appcenter-cli  
yarn add react-native-code-push

cd ios && pod install

info.plist 수정
project.pbxproj에 각각 변수화 해서 사용한다

<key>CodePushDeploymentKey</key>
<string>${CODEPUSH_KEY}</string>

KEY를 모를경우 터미널에 아래와 같이 명령하면 찾을수 있고
appcenter codepush deployment list -a <ownerName>/<appName> -k

위 명령어로 반환되는 값이 없을경우 appcenter에서
“본인앱 선택/Distribute/CodePush”내 [Create standard deployments]버튼을 눌러 생성해준 후 재시도

AppDelegate.mm수정

#import <CodePush/CodePush.h> ... ... //[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; //위 코드를 검색해 아래로 바꿔준다 return [CodePush bundleURL];

CODEPUSH_KEY를 전역변수로 연결

XCode 열기
본인 프로젝트 > Project > info > Configurations 내 + 버튼을 클릭
‘Duplicate Release Configuration’을 선택하고 새로 추가된 설정의 이름을 Staging이라고 수정한다
본인 프로젝트 > Project > Build Settings내 상단 + 버튼 클릭
Add User-Defined Setting을 클릭해 “ MULTI_DEPLOYMENT_CONFIG ” 와 같은 이름으로 생성해주고,
생성된 테이블 내의 Release에는 아래와 같이
“$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)”
Staging는 아래와 같이 넣어준다
“$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)”
다시 +버튼을 눌러 Add User-Defined Settings을 클릭해 이번에는 “CODEPUSH_KEY”라고 선언해주고, 테이블 내 Release와 Staging에 각각 부여받은 키를 넣어준다.

App.tsx를 CodePush로 감싸주기

import CodePush from 'react-native-code-push'; ... ... ... export default CodePush(App);

테스트

디바이스에 릴리즈버전 올린후 코드수정하여 아래 명령어로 앱센터 업데이트

appcenter codepush release-react -a 오너이름/앱이름 -d Production
or
appcenter codepush release-react -a 오너이름/앱이름 -d Staging

디바이스에 설치된 앱에 반영되었는지 확인