CodePush 지원 종료로, 대체 Expo Application Services(EAS) Update로 갈아타기
저희 팀에서는 React Native OTA 업데이트로 CodePush를 주로 사용하고 있어요.
하지만 CodePush 기술 지원이 종료되어 긴급히 대체할 수 있는 다른 서비스를 알아보다 EAS Update를 알게 되었습니다.
처음엔 조금 낯설고 설정이 좀 복잡해 보이지만, 한 번 세팅해두면 CodePush보다 훨씬 편리하고 빠르더라구요.
CodePush에서 있는 기능들은 모두 포함되어 있고, 유료 플랜을 사용하면 고급 분석 및 모니터링, 브랜치 롤백 등 다양한 기능도 지원하니 좋았어요.
아래는 EAS Update를 적용하면 겪었던 것들을 순차적으로 정리해 보았습니당
Step 1: 기본 세팅하기
먼저 내 프로젝트에 EAS CLI를 설치하고 로그인을 해야 해요.
npm install -global eas-cli
eas login로그인 할 때 organization 계정에서 미리 초대받아서 멤버가 되어 있어야 합니다.
채널 구성 이해하기
Expo 콘솔에서 아래처럼 여러개의 채널을 구성할 수 있어요.
- preview: 개발/테스트용 (staging 서버)
- production: 실제 사용자용 (운영 서버)
- development: 로컬 개발용
Step 2: 프로젝트 설정하기
이후 app.config.ts 파일을 열어서 아래처럼 수정해 주세요.
// 환경에 따라 채널을 자동으로 선택하는 함수
const channelName = (environment: string) => {
switch (environment) {
case "dev":
return "preview";
case "release":
return "production";
default:
return "preview";
}
};
export default ({ config }: ConfigContext): ExpoConfig => {
return {
...config,
name: "project-name",
runtimeVersion: "1.0.0", // 적용할 EAS target 버전
updates: {
checkAutomatically: "ON_LOAD", // 앱 실행할 때마다 업데이트 확인
requestHeaders: {
"expo-channel-name": channelName(process.env.APP_ENV as string),
},
},
extra: {
eas: {
projectId: easProjectId,
},
},
};
};Step 3: 런타임 버전 맞춰주기
사용자 앱이랑 새로운 JS 번들의 런타임 버전이 같아야 업데이트가 제대로 되니 주의해 주세요.
Android 설정
android/app/build.gradle 파일에서 이렇게 설정해 주세요.
productFlavors {
basic {
dimension "default"
applicationId "kr.co.my.app"
manifestPlaceholders = [
EXUpdatesChannelName: "production",
EXUpdatesRuntimeVersion: "1.0.0"
]
}
staging {
dimension "default"
applicationId "kr.co.my.app.dev"
manifestPlaceholders = [
EXUpdatesChannelName: "preview",
EXUpdatesRuntimeVersion: "1.0.0"
]
}
}그리고 AndroidManifest.xml에 아래 부분도 추가해 주세요.
<meta-data
android:name="expo.modules.updates.EXPO_RUNTIME_VERSION"
android:value="${EXUpdatesRuntimeVersion}"/>iOS 설정
ios/targetName/Supporting/Expo.plist 파일을 수정하면 됩니다.
<key>EXUpdatesRuntimeVersion</key>
<string>1.0.0</string>
<key>EXUpdatesRequestHeaders</key>
<dict>
<key>expo-channel-name</key>
<string>preview</string>
</dict>Step 4: 업데이트 자동 확인 설정
앱이 언제 업데이트를 확인할지 정할 수 있어요. 옵션들이 몇 개 있는데,
ON_LOAD- 앱 실행할 때마다 (기본값, 추천)WIFI_ONLY- WiFi 있을 때만ON_ERROR_RECOVERY- 오류 났을 때만NEVER- 아예 안 함
보통 ON_LOAD가 제일 좋아요.
Step 5: EAS 배포 테스트 해보기
EAS 배포는 명령어를 아래처럼 입력하면 됩니다.
개발/테스트 서버용
# Android, iOS 둘 다
npm run update:stage
# Android만
npm run update:stage:and
# iOS만
npm run update:stage:ios실제 운영 서버용
운영 배포할 때는 환경 변수 먼저 확인하고, 아래처럼 명령어를 입력해 주세요.
# 먼저 캐시 삭제
npm run start -- --reset-cache
# 후에 업데이트
npm run update:prod # 전체
npm run update:prod:and # 안드로이드만
npm run update:prod:ios # iOS만커밋 메시지 입력하기
명령어를 실행하면 업데이트 내용을 물어봅니다. 수정 사항에 댛해 간단하게 기록해 주세요.
# 이렇게 하면 대화형으로 메시지 입력
npm run update:prod
# 아니면 바로 메시지 넣기
npm run update:prod --message "버그 수정 및 성능 개선"Step 6: 잘 업데이트 되었는지 확인하기
업데이트가 끝나면 Expo 콘솔에 들어가서 확인해 보세요. 채널 별로 언제 업데이트됐는지, 어떤 버전인지 알 수 있습니다.
꼭 알아야 할 것들
런타임 버전이 핵심이에요: 사용자 앱과 새 JS 번들의 런타임 버전이 같아야 업데이트가 됨. 다르면 아예 업데이트가 되지 않습니다.
이럴 때는 런타임 버전을 바꿔야 해요:
- React Native나 Expo 버전을 업데이트 했을 때
- 네이티브 코드를 건드렸을 때
- 새로운 모듈을 추가/삭제했을 때
이런 경우엔 스토어에 새 버전을 올려야 업데이트가 가능해요.
채널과 브랜치: EAS는 "채널"과 "런타임 버전"을 둘 다 체크해서, 일치할 때만 업데이트가 가능합니다.
마무리
처음엔 설정이 복잡해 보이지만, 한 번 해두면 CodePush만큼이나 편하고 쉽습니다. EAS는 채널 관리나 버전 관리가 더 직관적이고 안정적이에요.
혹시 막히는 부분이 있으면 EAS Update 공식 문서를 참고하면 좋습니다.
