개요

현재, 서버와의 연동을 마친 상태인데, 아무래도 깃허브에 업로드 하기 위해선 서버 주소 및 엔드 포인트를 지우고 올려야 한다.

이때, 환경 변수를 선언하는 .evn과, 해당 파일을 깃허브에 업로드 하지 않는 방법에 대해 알아본다

1. dotenv 패키지 설치하기

env란?

공식 npm 라이브러리 링크
Expo에서 환경 변수를 읽어오기 위해 필요한 패키지이다.

npm i react-native-dotenv를 프로젝트 파일 터미널에 입력하여 설치해준다.
(npm 기준)

2. .evn 파일 작성

1) 프로젝트 루트에 .env 파일 생성

.evn은 환경 변수를 저장하는 파일로,

서버 주소, 엔드 포인트 등 노출되면 안되는 민감한 정보들을 담아놓는다.

.evn 파일을 프로젝트 루트 디렉토리에 생성한다.

2) 환경 변수 선언하기

이제 서버 연동에 필요한 주소 및 엔드 포인드들을 환경 변수로 선언한다.

이때,

• 환경 변수는 대문자로 선언
• 작성 시 띄어쓰기 X
• 특정 기호 작성 불가

이 부분들을 잘 생각하여 환경 변수를 선언해야 한다.

필자는 현재 firebase 연동에 사용하기 때문에 다음과 같은 내용을 추가했다.

FIREBASE_API_KEY=your-api-key
FIREBASE_AUTH_DOMAIN=your-auth-domain.firebaseapp.com
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
FIREBASE_MESSAGING_SENDER_ID=1234567890
FIREBASE_APP_ID=1:1234567890:web:abcdef123456

3) Babel 설정 추가하기

babel에 설정을 추가하여, 빌드 시 .env 파일의 내용을 사용할 수 있도록 한다.

api.cache(false)
module.exports = {
  plugins: [
    ['module:react-native-dotenv']
  ]
};

plugins에 다음과 같은 내용을 추가하면 된다.

3. 타입 선언하기(선택)

이처럼 작성을 완료하였다면, 이제 불러와서 사용할 차례이다.

이때, 에디터 자동완성을 위해 루트에 env.d.ts 파일을 추가한다.

// env.d.ts
declare module "@env" {
  export const FIREBASE_API_KEY: string;
  export const FIREBASE_AUTH_DOMAIN: string;
  export const FIREBASE_PROJECT_ID: string;
  export const FIREBASE_STORAGE_BUCKET: string;
  export const FIREBASE_MESSAGING_SENDER_ID: string;
  export const FIREBASE_APP_ID: string;
}

• 참고로 .env에서 선언한 변수와 동일하게 작성하지 않으면 오류가 발생하니 조심하자.

3-1) 사용하기

이제 이렇게 선언한 환경변수는
@env 라우트 경로로 불러와 사용할 수 있게 된다.

// .env에서 주입된 값들을 import
import {
  FIREBASE_API_KEY,
  FIREBASE_AUTH_DOMAIN,
  FIREBASE_PROJECT_ID,
  FIREBASE_STORAGE_BUCKET,
  FIREBASE_MESSAGING_SENDER_ID,
  FIREBASE_APP_ID,
} from "@env";

4. .evn 파일 숨기기

앞서 민감한 정보들을 선언한 .evn 파일이 있을 것이다.

그런데 이 파일을 깃허브에 올려버리면 아무 쓸모가 없지 않은가?

사료 나가신다

따라서 깃허브에 업로드 되지 않도록 숨김 처리를 해주어야 한다.

.evn과 같은 루트 내에 존재하는 .gitignore 파일이 존재한다.
해당 파일은 깃허브에 업로드 되지 않는 파일들을 모아둔 곳이다.

여기에 어느 위치든 괜찮으니 .evn를 작성하자.

그렇게 되면 깃허브에 push 하더라도 해당 파일은 제외하고 올라갈 것이다.

만약 본인이 깃허브 데스크탑을 쓰고 있다면 change 탭을 살펴보자.
설정이 제대로 적용되었다면 해당 탭에 .evn 파일이 출력되지 않을 것이다

이렇게 하여 expo 환경에서 환경 변수를 선언하는 방법에 대해 알아보았다.
괜히 민감한 정보를 노출하여 피해보는 일이 없도록 하자!