RN) 복수의 파이어스토어(prod/dev)를 DB로 운용하는데 빌드할 때마다 캐싱이 문제가 된다면? - debug 앱을 분리하면 해결됩니다..

문제 상황:

Android에서 Flavor 설정을 해줬다. Flavor란 안드로이드 빌드 시 앱의 설정 분기를 하게 해주는 옵션이다.

(혹자는 이 설정으로 free/paid 버전을 분기처리하기도 하고, 혹자는 이 설정으로 dev/prod 버전을 나누기도 한다.)

 

나도 최근 Flavor 설정으로 dev/prod 인증서를 따로 붙여주는 설정을 진행하였다.

그런데 에뮬레이터로 dev용으로 빌드했다가 prod로 빌드 전환할 때 성공하기는 하는데,

 

아래처럼 로그인 에러가 뜬다... [10] DEVELOPER_ERROR라는데...

알아보니 인증서가 맞지 않는다는 얘기가 나온다.

 

나는 분명 아래처럼 development와 production으로 각기 다른 firebase project의

google-service.json 파일을 연결하여 인증서 세팅을 마친 상황이다.

 

그런데도 계속되는 [10] DEVELOPER_ERROR로 인해 골머리를 몇 시간 앓았는데...

그냥 앱을 끄고 다시 빌드해보니 prod로도 빌드가 된다..!

 

dev -> prod로 전환하거나 prod -> dev로 전환할 시,

뭔가.. 에뮬레이터의 이전 빌드가 캐싱되어서 처음에 로그인 장애가 한 번 있는거 같았다.

다시 한 번 빌드하면 성공한다.

 

나는 분명 빌드하기 전에 안드로이드 폴더에서 ./gradlew clean도 해주고

에뮬레이터에 기존 설치했던 앱도 삭제해주는데도 이 에러는 사라지지 않았다.

에뮬레이터도 껐다가 다시 켜야되나? 하여튼 flavor 전환 시 마다 2번 빌드해줘야되는 매우 성가신 상황이었다.

완전히 flavor 분리를 실패한건 아니지만 찝찝했다.

 

해결책: development 빌드 시에 package name에 suffix를 달아줘서 새로운 앱으로 분기하자

 

나는 이 문제가 두 flavor가 같은 패키지 네임을 사용하기 때문이라고 생각했다.

package name은 일종의 도메인같은거다. 같은 package name을 가지고 있으면 같은 앱으로 분류된다.

즉 나는 같은 앱 껍데기에 prod 환경을 붙였다가, dev 환경을 붙였다가 하고 있었다.

 

'즉 캐시를 최대한 삭제해주는데도 뭔가 이전 빌드의 인증서 간섭이 있다는거면..

그냥 다른 앱으로 아예 분리해주면 되는거 아닌가?' 라는 생각이 들어 앱 분리를 시작하였다.

 

1.  빌드 시 패키지 이름, 앱 이름 변경

android/app/build.gradle

내 flavor 설정이다. environment라는 차원으로 development와 production을 나눠줬다.

applicationIdSuffix를 추가하여 com.package.name.development 로 패키지 네임을 조작했다.

그리고 app_name을 development일때는 ANTTIME-DEV로 바꿔줬다. (resValue로 안드로이드 전역적으로 쓸 수 있는 변수를 생성?)

    flavorDimensions.add("environment")

    productFlavors {
        development {
            dimension "environment"
            applicationIdSuffix ".development"
            resValue "string", "app_name", "ANTTIME-DEV"
        }
        production {
            dimension "environment"
            resValue "string", "app_name", "ANTTIME"
        }
    }

 

AndroidMenifest.xml

이렇게 빌드 시 생성한 값은 다른 android 폴더 내 파일에서 다 사용할 수 있는 것 같다.

이를 통해 AndroidMenifest.xml에 label에 @string/app_name으로 만들어 놓으면

flavor에 따라 분기되어 값이 주입된다. (템플릿 리터럴과 유사한 듯)

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"

 

app/src/main/res/values/string.xml

근데 만약 app_name을 res/value에서 하드코딩한 값이 있다면 빌드 시 분기처리가 씨알도 안 먹히니 삭제해주자

<resources>
    <!-- <string name="app_name">ANTTIME</string> -->
</resources>

 

사실 앱 이름 분기처리는 더 간소한 방법이 있던거 같긴 하니 다른 방법을 찾아봐도 좋다.

 

 

 

2.  firebase project에서 새로운 앱 추가

테스트용으로 만든 Firebase project의 console - 프로젝트 설정에 들어가자. (중요한 값들은 모두 블러처리했다.)

현재 선택되어있는 ANTTIME-DEVELOPMENT 앱의 패키지 이름을 보면 알겠지만,

빌드 시 추가한 suffix가 반영되어있는 앱이 존재해야된다. 없다면 하나 만들어주자.

 

*새로 프로젝트를 만든다고 SHA 인증서가 바뀌거나 하지 않으니 안심하고 새로 앱 추가해도 된다.

실제 상용 프로젝트 환경이면 조심해야겠지만, 테스트 서버 환경이니 쫄지 말자.

 

 

그리고 내 프로젝트의 SHA-1 인증서를 알아내기 위해 아래 cli를 프로젝트 경로 터미널에 입력하자.

나는 debug 인증서의 sha-1 인증서를 알아내고 싶은거니 아래처럼 입력했다.

기본 경로에 있다는 전제로 적어둔거니 debug.keystore를 특수한 위치로 옮겼다면 알아서 수정해서 치자.

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

 

 

그렇게 알아낸 값을 firebase console에 추가해주면 준비 끝!

 

 

결과:

야호! 개발용 앱과 상용 앱이 분리되었다. 😘

실행해보니 development와 production 빌드를 바꿔도 간섭이 일어나지 않는다.

[10] DEVELOPER_ERROR니 뭐니 그런것도 사라졌고, 빌드 하자마자 로그인도 다 잘 된다.

 

 

 

로그인 에러 관련 레퍼런스:

https://stackoverflow.com/questions/56093020/developer-error-error-code-10-firebase-google-login-in-react-native