1. | 에러 발생 과정
처음으로 프로젝트를 배포해보려는데 두둥!!
에러가 발생하고 말았다 ...
현재 사용하고 있는 카카오 API_KEY 를 파일로 따로 관리하고 .gitignore에 추가해놨었는데
Netlify는 github에 올라가 있는 레파지토리를 바탕으로 빌드되기 때문에 github에 없는 API_KEY 파일을 읽을 수 없어서 에러가 발생한 것😭
나중에 이런 경우가 발생했을 때 참고하기 위해 포스팅을 해두려한다!
2. | 에러 코드
Module not found: Error: Can't resolve './API_KEY' in '/opt/build/repo/src/utils'
3. | 에러 해결 방법
3.1. 🪄 .env 파일 사용하기
.env 파일이란?
환경 변수를 선언할 수 있는 파일로 포트, DB 관련 정보, API_KEY 등 오픈 소스에 올리기 민감한 정보를 관리할 때 유용하게 쓰인다.
외부 파일(.env)에 환경 변수를 정의하여 전역 변수로 사용한다.
(1) 루트 폴더에 .env 파일 생성하기
src나 public 폴더가 아닌 최상위(루트) 폴더에 .env 파일을 생성한다.
(2) 'REACT_APP_' 으로 시작하는 환경 변수 만들기
create-react-app에서는 NODE_ENV(기본 제공 환경 변수)를 제외한 다른 모든 변수가 실수로 시스템에 노출되는 것을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경 변수는 무시된다.
<javascript />
// .env
REACT_APP_API_KEY="고유 api 키"
변수, 등호 및 값 사이에는 공백이 없어야한다.
(3) 환경 변수 사용하기
<javascript />
// api.js
import axios from "axios";
const Kakao = axios.create({
baseURL: "https://dapi.kakao.com", // 공통 요청 경로를 지정해준다.
headers: {
Authorization: `KakaoAK ${process.env.REACT_APP_API_KEY}`,
},
});
...
별도의 import 없이 process.env.REACT_APP_API_KEY로 환경 변수를 사용할 수 있다.
(4) .gitignore에 .env 추가하기
github에는 올라가지 않아야하기 때문에 잊지 않고 gitignore에 추가해주기!
3.2. Netlify에 적용하기
Netlify에도 동일한 환경 변수를 설정해주어야 한다.
나는 이미 배포했기 때문에 Site settings > Build & deploy > Environment > Environment variables 에서 추가해주었다.
4. | Refernece
https://geekconfig.com/tutorial/configure-environment-variables-in-create-react-app-and-netlify
