React Native: 다중 환경 설정(스키마/플레이버)

애플리케이션을 개발할 때 여러 번 우리 개발자는 다양한 구성으로 다양한 빌드를 생성해야 합니다. 유지 보수 및 테스트 프로세스를 용이하게 합니다. 일반적으로 개발, 스테이징 및 프로덕션의 세 가지 빌드가 생성됩니다.

react-native-config 설치

패키지 설치

// yarn 
yarn add react-native-config

// npm 
npm install react-native-config --save

iOS의 경우 패키지가 설치된 후 pod install 도 실행합니다.

그리고 플러그인을 적용하기 위한 android/app/build.gradle의 코드 줄 아래

apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" // <- add this line

각 구성에 대한 .env 파일 생성

.env.development

ENV=development
API_URL=https://api.dev.com

.env.staging

ENV=staging
API_URL=https://api.staging.com

.env.production

ENV=production
API_URL=https://api.com

Android용 설정

이제 빌드를 env 파일과 연결하는 build.gradle에서 envConfigFiles를 정의해야 합니다. 이를 위해 적용 호출 전에 아래 코드를 추가하고 빌드 케이스를 소문자로 두어야 합니다.
android/app/build.gradle

apply plugin: "com.android.application"

// add this block
project.ext.envConfigFiles = [
   productiondebug: ".env.production",
   productionrelease: ".env.production",
   developmentrelease: ".env.development",
   developmentdebug: ".env.development",
   stagingrelease: ".env.staging",
   stagingdebug: ".env.staging"
]
// ---

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradl

라인 아래 프로젝트에 제품 맛 추가compileSdkVersionandroid/app/build.gradle

android {
    ndkVersion rootProject.ext.ndkVersion
    compileSdkVersion rootProject.ext.compileSdkVersion

    // add this block
    flavorDimensions "default"
    productFlavors {
        production {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.staging"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.development"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
    }
   // ---
...

이름은 productFlavors에 따라 일치해야 하므로 이 경우 productiondebug는 디버그와 일치하고 .env.production의 구성으로 앱의 디버그 빌드를 생성합니다.

또한 아래와 같이 buildTypes에 matchingFallbacks를 추가합니다.android/app/build.gradle

 buildTypes {
        debug {
            signingConfig signingConfigs.debug
            matchingFallbacks = ['debug', 'release'] // <- add this line
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

스크립트 생성package.json

"android:staging": "react-native run-android --variant=stagingdebug",
"android:staging-release": "react-native run-android --variant=stagingrelease",
"android:dev": "react-native run-android --variant=developmentdebug",
"android:dev-release": "react-native run-android --variant=developmentrelease",
"android:prod": "react-native run-android --variant=productiondebug",
"android:prod-release": "react-native run-android --variant=productionrelease",

Android 앱 이름 및 앱 아이콘 변경

android/app/main 폴더를 복사하고 우리의 경우에 플레이버에 배치된 참조 이름으로 이름을 바꾸십시오.development 및 staging .

메인 파일 중복

파일 이름을 development 또는 staging로 변경하고 파일 제거java

앱 아이콘을 변경하려면 빌드 개발, 스테이징 또는 기본(프로덕션)의 특정 밉맵 내에 추가하기만 하면 됩니다.

앱 이름을 변경하려면 파일을 열고 이름을 바꾸십시오

.

android/app/src/development/res/values/strings.xml

<resources>
    <string name="app_name">zenix dev</string>
</resources>

android/app/src/staging/res/values/strings.xml

<resources>
    <string name="app_name">zenix stg</string>
</resources>

결과는

와 같아야 합니다.

iOS용 설정

Xcode에서 스키마가 2번 중복됨

중복만 클릭

대상 이름을 TargetDev 및 TargetStg로 바꿉니다.

결과는 다음과 같아야 합니다.

다음 단계 열기 관리 스키마

이름이 올바르게 변경되었는지 확인하십시오.
zenixDev에 zenix 복사

이제 우리는

선택한 스키마와 동일한 스키마 빌드 설정을 선택하고 이 스크립트를 추가합니다.cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env.development"

스키마 편집 > 빌드 > 사전 작업

디버그 모드 사전 작업에 대해 동일한 프로세스를 반복합니다.

개발 구성을 마치면 스크립트를 development에서 staging로 변경하여 스테이징에 대해 동일한 프로세스를 수행해야 합니다.

각 스키마의 info.plist 파일 이름을 올바르게 지정합니다

.

개발 빌드 설정에서 info.plist 이름 바꾸기
Schema*Dev* > 빌드 설정 > 검색 필터 > info.plist 파일zenix dev-Info.plist

개발 빌드 설정에서 info.plist 이름 바꾸기
Schema*Stg* > 빌드 설정 > 검색 필터 > info.plist 파일zenix stg-Info.plist

Podfile을 열고 대상을 abstract_target으로 변경하고 다음과 같이 abstract_target의 이름을 ProjectName+CommonPods로 바꿉니다.

target 'zenix' do // <- Remove this

abstract_target 'zenixCommonPods' do // <- Add this

abstract_target 내부에 대상을 추가합니다.

 target 'zenixDev' do
 end

 target 'zenixStg' do
 end

 target 'zenix' do
 end

이제 ios 폴더에 포드 설치를 제공합니다.

iOS 앱 아이콘 및 앱 이름 변경

대상 이름을 선택하고 일반으로 이동하여 표시 이름을 검색합니다

.

더 아래에 앱 아이콘이 있을 것입니다. 다른 앱 아이콘을 선택하면 됩니다.

결과는 다음과 같아야 합니다.

소스 코드 보기

https://github.com/LeonArantes/react-native-multilpe-enviroments