jineecode
react-native android 배포 본문
https://reactnative.dev/docs/signed-apk-android
Publishing to Google Play Store · React Native
Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future upd
reactnative.dev
위 문서랑 조금 다른 부분이 있습니다.
0. 들어가기 전에 axios 라이브러리를 사용하고 있다면 다음 코드를 한 줄 추가해주세요
// android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="kr.co.bocoder.findanimal">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
...
android:usesCleartextTraffic="true" // ----->>> add this
>
<activity
android:name=".MainActivity"
...
>
<intent-filter>
...
</intent-filter>
</activity>
</application>
</manifest>
1. key-name, key alias 는 원하는대로 적으시면 됩니다.
keytool -genkey -v -keystore [key-name].keystore -alias [key alias] -keyalg RSA -keysize 2048 -validity 10000
cd android/app
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Enter keystore password: // keystore 비밀번호 입력
Re-enter new password: // keystore 비밀번호 확인
What is your first and last name?
[Unknown]:
What is the name of your organizational unit?
[Unknown]:
What is the name of your organization?
[Unknown]:
What is the name of your City or Locality?
[Unknown]:
What is the name of your State or Province?
[Unknown]:
What is the two-letter country code for this unit?
[Unknown]:
Is CN=*****, OU=Unknown, O=Unknown, L=*****, ST=*****, C=***** correct?
[no]:
Enter key password for <my-key-alias>
(RETURN if same as keystore password): // 엔터 치시면 됩니다.
잘 되었다면 android/app 폴더에 my-release-key.keystore 파일이 생성된 것을 확인할 수 있음
2. android/gradle.properties
MYAPP_RELEASE_STORE_FILE=my-upload-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=아까쓴비밀번호
MYAPP_RELEASE_KEY_PASSWORD=아까쓴비밀번호
org.gradle.jvmargs=-Xmx4608m // 얘는 빌드 속도를 빠르게 해주려고 추가했다.
3. android/app/build.gradle
android {
...
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
...
buildTypes {
release {
signingConfig signingConfigs.release
}
}
}
4. 번들로 말아주기
위치는 루트(프로젝트명)에서 해주세요.
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
아래 파일 생성여부 확인
android\app\src\main\assets\index.android.bundle
(번들로 말지 않으면 Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release. 오류가 생깁니다)
5.
cd android
./gradlew app:assembleRelease --stacktrace
6. 거의 다 왔다. 에러만 잡으면 된다!!
> Task :app:mergeReleaseResources FAILED
// android/app/src/main/res/drawable~ 폴더를 체크
중복된 이미지가 잡혀서 생기는 에러.
스플래시 라이브러리를 갖고 있는 경우가 많기 때문에 폴더를 날리지 말고, 중복 이미지만 신중하게 지워야한다.
싹다 지우면 Task :app:processReleaseResources FAILED 같은 에러가 발생할 수 있음
Tip: git branch를 체크해서 이미지만 싹 삭제하면 편하게 빌드할 수 있다.
이렇게 이미지만 삭제!
이미지를 지우고 다시
./gradlew app:assembleRelease --stacktrace
7. 빌드에 성공한 앱은
android/app/build/outputs/apk/release/에 생성된다
app-release.apk ~ !
기타 설정
// android/build.gradle
compileSdkVersion = 30
targetSdkVersion = 30
// android/app/build.gradle
defaultConfig {
applicationId "com.hello"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 6
versionName "0.7"
multiDexEnabled true
}
// android/app/src/main/AndroidManifest.xml
<application
android:largeHeap="true" // 여기
android:usesCleartextTraffic="true"
android:theme="@style/AppTheme">
'React native' 카테고리의 다른 글
react-native svg 사용하기 (0) | 2022.05.25 |
---|---|
react-native 라이센스 고지하기 [react-native-oss-license] (0) | 2022.05.24 |
react-native toast 사용하기 [react-native-toast-message] (0) | 2022.05.24 |
React navigation (3) (0) | 2022.05.23 |
React navigation (2) (0) | 2022.05.23 |