하루하루 꾸준히, 인생은 되는대로

vite환경변수 2

vite + react + github page 배포 환경에서 환경변수 설정

깃헙 페이지로 배포를 하고 있었고,import.meta객체를 이용해 로컬환경에서 환경변수를 했다. 다만 배포 환경에서는 (env파일이 깃에 올라기지 않는다는 가정하에는) 다른 방법의 환경변수 설정이 필요하다. firebase등등 보여줘서는 안되는 환경변수들을 배포 시에도 유지하기 위해서 깃헙 secrets을 이용해 환경변수를 관리할 수 있다. github Action secrets? 깃헙 레포의 action secrets는 환경변수를 암호화해서 저장할 수 있는 기능이다. 결과적으로 로컬환경에서는 .env파일을, github action을 이용한 배포 시에는 , action secrets를 이용해서 환경변수를 관리 할 수 있다. 먼저 github Action의 secrets를 저장하는 방법은 간단하다. 깃..

리액트 2023.05.15

vite + react환경에서 환경변수 설정하기

기존의 CRA에서 process.env로 환경변수를 관리했어서, vite + react의 환경에서도 process.env를 통한 환경 변수 관리가되지 않을까.. 하고 시도를 해봤지만 실패하였다. process.env가 뭐길래? process.env는 노드에서 사용하는 전역객체고, 환경변수를 저장하기 위한 객체이다. 리액트에서는 REACT_APP_키워드를 붙여서 환경변수를 관리한다. CRA를 통해 만든 리액트의 프로젝트에서는, 기본적으로 환경변수를 사용할 떄 .env파일을 사용한다. 이때 process.env객체에는 .env파일에 설정한 변수들이 자동으로 등록된다. 이떄 등록된 변수들은 자바스크립트에서 process.env객체를 통해 접근 할 수 있다! 공식문서에 따르면, 환경변수의 접두사를 VITE_로 ..

리액트 2023.05.06