React - .env 환경 변수 사용하기

구글 로그인을 적용해보고 있던 중 사람들이 .env 파일을 많이 사용하길래 이게 대체 뭐지 하고 알아보고 싶어졌다!. 

 

📌.env이란? 

.env 파일은 환경 변수를 저장하는 데 사용되는 파일이다. 환경 변수는 운영 체제나 실행 환경에서 프로그램이나 스크립트가 실행될 때 참조할 수 있는 동적으로 할당된 값이다. 이러한 변수들은 보안, 설정, 구성 데이터를 포함하며, 코드에서 직접 하드코딩하는 것보다 외부에서 관리하는 것이 더 안전하고 유연한다!

 

1. 루트경로에 .env 파일 생성 

 

2. 필요한 환경 변수를 추가합니다. 예를 들어:

DATABASE_PASSWORD=verysecretpassword
API_KEY=123abcXYZ

 

3. gitignore 파일에 .env를 추가하여 Git 저장소에 업로드되지 않도록 하기 

 

4. 코드 내에서 process.env 객체를 통해 환경 변수에 접근

const databasePassword = process.env.DATABASE_PASSWORD;
const apiKey = process.env.API_KEY;

 

따로 import 해주는 거 없이 전역변수로 사용이 가능하다. 

 

 

 

🚫트러블 슈팅

1.  

CRA 공식 문서

Note: You must create custom environment variables beginning with REACTAPP. Any other variables except NODEENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running._

환경변수 추가하면 꼭 서버 끊었다가 다시 시작 npm run start를 해줘야 한다!!

 

 

2. 

나는 vercel로 배포를 했어서 .env 생성 후에는 꼭 Vercel에 배포할 때 로컬 환경에서 사용한 .env 파일의 환경 변수들이 Vercel 환경에서도 동일하게 설정되어 있는지 확인해야한다. 

Vercel에서는 프로젝트의 Settings > Environment Variables(환경 변수) 섹션을 통해 환경 변수를 설정할 수 있다.

 

++ 

Vercel을 사용하는 배포 과정에서 환경 변수와 라이브러리 호환성 문제를 마주칠 때, 이를 해결하는 과정은 프로덕션 환경에서의 디버깅 및 환경 설정 관리의 중요성을 깨닫게 한다.

CI/CD 파이프라인에 대한 이해를 심화시키려면, Vercel과 같은 배포 도구가 CI/CD 과정에서 어떻게 활용될 수 있는지를 파악하는 것이 중요하다. 

CI/CD 파이프라인과 Vercel의 연관성

1. 자동화된 배포: CI/CD(Continuous Integration/Continuous Deployment) 파이프라인의 핵심은 개발 과정을 자동화하여 코드 변경 사항이 자동으로 테스트되고 배포되는 것입니다. Vercel은 Git 기반 프로젝트에 대해 이러한 자동화된 배포를 지원합니다. 즉, GitHub, GitLab, Bitbucket과 같은 소스 코드 관리 시스템에 코드를 푸시하면 Vercel이 자동으로 변경 사항을 감지하여 배포 과정을 시작합니다.
2. 환경 변수 관리: Vercel은 프로덕션, 개발, 미리보기 환경 각각에 대해 환경 변수를 설정할 수 있는 기능을 제공합니다. 이는 CI/CD 파이프라인에서 중요한 요소 중 하나인 환경에 따른 구성 관리와 밀접하게 관련되어 있습니다. 이를 통해 개발자는 각 환경에 맞는 올바른 설정을 적용할 수 있습니다.
3. 프리뷰 배포: Vercel은 코드 변경 사항이 푸시될 때마다 자동으로 미리보기 배포를 생성합니다. 이는 통합 테스트의 일환으로 볼 수 있으며, 실제 프로덕션 환경과 유사한 환경에서 바로 변경 사항을 테스트할 수 있는 기능을 제공합니다. 이는 CI/CD에서 매우 중요한 부분이며, 개발 과정의 효율성을 크게 향상시킵니다

 

 

3. 

하나 더  vercel로 배포 시 react버전과 react-google-login 버전이 달라 오류가 났다. 

react@"^16 || ^17" from react-google-login@5.2.2

 

react 버전을 낮추는 거는 안돼서

npm uninstall react-google-login

 

삭제 후에 

npm install @leecheuk/react-google-login

 

이걸로 재설치해줬다. 

 

 

참고자료 

• https://velog.io/@nujinging/%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0-react16-17-from-react-google-login5.2.2