React Native

2025-06-13

CodePush 지원 종료로, 대체 Expo Application Services(EAS) Update로 갈아타기

아니 CodePush가 지원 종료라고?!

썸네일 이미지

저희 팀에서는 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.happytoseeyou.app"
        manifestPlaceholders = [
            EXUpdatesChannelName: "production",
            EXUpdatesRuntimeVersion: "1.0.0"
        ]
    }
    staging {
        dimension "default"
        applicationId "kr.co.happytoseeyou.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 공식 문서를 참고하면 좋습니다.

Tags:

#ReactNative#CodePush#EASUpdate#OTA업데이트#Expo#모바일개발#앱배포#마이그레이션