[React Native CLI] ios API 키 안전하게 숨기기

💡읽기전에. 다음 내용은 미리 파일을 Config.xcconfig 를 미리 만들어놓고 재현하는 과정을 담았습니다.
때문에 사진을 보면 Config.xcconfig 파일과 Config1.xcconfig 파일 두개가 있는걸 볼 수 있는데 이건 그냥 같은파일이라고 생각하면됩니다. 중간에 다시 파일을 지워서 사진을 정상화한 부분도 있으니 참고

Config.xcconfig 파일 생성

xcode로 들어간다음에 프로젝트 우클릭후 파일을 생성한다.

이후 우측 상단엔 configuration 을 검색 하면 아래와 같이 configuration Settings File 을 클릭하고 Next

 

생성을 한 이후에 API_KEY 의 KEY 값과 Value를 작성해준다.

Info.plist와 연결

API_KEY를 Info.plist 항목을 추가시켜줘야된다.

TARGETS → Project Name → Info에 들어가서 property를 하나 추가해준다,

Key 값은 Config.xcconfig 에 작성했던 key이름을 동일하게 해주고

Value의 경우 $(API_KEY_NAME)형식으로 해준다.

💡사진에는 GOOGLE_MAP_API_KEY 로 되어있는데 이거 무시하고 본인 상황에 알맞는 API 이름으로 설정해주면 된다.

다른 방법으로는 폴더안에 존재하는 Info.plist에 직접 아래 코드와 같은 형식으로 입력해준다.

<key>API_KEY</key>
<string>$(API_KEY)</string>

Build Configurations 연결시키기

Build Configurations에 연결되어야만 빌드 프로세스에서 Config.xcconfig 파일에 정의된 변수를 가져오기 때문에 값을 설정해준다.

좌측상단에 PROJECT → ProjectName(사진에는 matzip으로 되어있음) → Info → Configurations 에서 Debug 와 Release 에서 Project 의 Based on Configuration File을 Config.xcconfig 로 잡아준다.

AppDelegate.mm에서 API 키 불러오기

본인의 경우 react-native-maps 에서 googleAPI 키를 사용해야 됬기때문에 다음과 같이 해주었다.

// API키 불러오기
NSString *googleApiKey = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"GOOGLE_MAP_API_KEY"];

//react-native-maps 에서 필요로하는 내용
[GMSServices provideAPIKey:googleApiKey];

Build & gitignore 에 파일 추가하기

Xcode에서 프로젝트를 빌드를 한번해주고 프로젝트가 정상적으로 동작하는지 확인한다

이후 github에 api키를 숨기고 올리기위해 .gitignore 파일에 다음을 추가해준다.

Config.xcconfig