리액트나 vue의 .env를 왜 사용하는지 그 이유에 대해 고뇌(?)에 빠졌습니다.

Question

안녕하세요,.env의 존재 의의에 대해 연구하고 있습니다. 예를 들어 고객 정보를 조회하는 매우 중요한 ajax 기능이 있다고 칩니다.axios.post('/api/info', {headers : {secret_key: &#96;${process.env.REACT_APP_KEY}&#96;}}) .then(rs &#61;> 블라블라) .env 파일에는REACT_APP_KEY&#61;asdf1234 라고 적혀있습니다. 물론 실제 구현시에는 클라이언트에 비밀키를 노출시키기보다는 백엔드 express서버에서 secret키를 사용해 http통신을 한 뒤 고객정보를 클라이언트로 보낼겁니다. 다만 여기서는 클라이언트에서 secret키를 다룬다고 가정합니다.어쨌든 저 코드는 브라우저에서 파싱될때 axios.post('/api/info', {headers : {secret_key: asdf1234}}) .then(rs &#61;> 블라블라)라고 파싱될겁니다. 그렇다면 .env를 사용한 의미가 전혀 없는겁니다.어쩌피 클라이언트에 노출이 되니깐요. 그럼 react같은 프론트가 아니라,nodejs같은 백엔드에서 사용한다고 가정합니다. 근데 백엔드환경은 어쩌피 고객의 브라우저에서 마음대로 볼 수 있는 정보가 아닙니다.nodejs에서 의도적으로 브라우저에 정보를 보낸게 아니라면요.아니 그럼...? 프론트든 백엔드든 .env를 사용하는 의미가 전혀없다라는 결론에 도달하게 되었습니다. 제가 이해한게 맞는지 고수 여러분들의 조언 부탁드립니다....

HJOW · Accepted Answer

민감한 키는 .env 에 저장하지 않죠.다른 방법을 이용하지요. 세션을 이용하는 방법도 있고JWT 토큰도 많이들 이용하죠.그 값은 .env에 저장하지 않죠.심지어 그 값조차 사용자의 실제 비밀번호가 아닌, 단방향 암호화된 값이죠.로그인한 후 백엔드에서 받아온... 외부 API 이용할 때도화면까지 같이 제공받는 경우에나 프론트에서 호출하지보통은 백엔드에서 통신을 하죠.프론트에서 외부 API자료가 필요하다 --> 백엔드에 요청 --> 백엔드가 외부 API에 요청 --> 백엔드가 외부 API로부터 응답받음 --> 프론트쪽 응답에 데이터 실어 보내기 --> 프론트가 받음 그럼에도 .env 는 있으면 유용할 것 같네요.디자인 테마를 여러개 구현해놓고 그중에서 하나 골라놓는다든지 몇가지 오류 메시지 멘트들을 미리 정해서 넣어놓는다든지 등등

console.error() · Answer

dotenv는 보안만을 위한게 아니고 유지보수의 편리를 위한 목적도 있습니다.환경변수 또는 공통으로 사용되는 설정을 저장하는데에도 쓰입니다.

빠른코딩 · Answer

.env는 환경변수임니다보안이랑은 관련 없어요. 보안 문제 있을 만한것을 프론트가 들구 있으면 위험하죠

S_J · Answer

잘못 이해하고 계십니다..env를 사용하는 이유는 각 환경마다 설정값을 다르게 하고 싶은 경우입니다. 예를 들면 아래와 같은 경우요.개발 환경 : APP_DEBUG&#61;true릴리즈 환경 : APP_DEBUG&#61;false

하얀뼈 · Answer

와 님들 강의에서 보안 어쩌구 하던거 그럼 다 뻥이었네요...?환불하러간다

HJOW · Answer

보안이 제 아무리 좋은 플랫폼이나 프레임워크나 언어를 쓰면 뭐해요개발자가 중요키를 사용자에게 퍼주는데 뭐랄까보안이 아주 좋은 맥북과 아이폰을 샀는데비밀번호를 0000 으로 걸어놨다랄까

kmksk · Answer

쉽게 말해 다양한 운영 환경에 쉽게 대응하기 위해서입니다. .env.production - 운영환경 .env.stage - 스테이지 환경 이런식으로 다양한 프로파일을 분리하고 관리 할수 있습니다.실무에서는 개발환경, 운영환경, 테스트환경 등 전부 별도의 서버로 운영합니다.만약 이런 서버 환경 설정들을 코드에 그냥 작성하게 되면 각각 환경에 배포할때마다 수정하거나 하나의 패키징 파일로 사용할수 없게 됩니다. 즉 빌드 버전&#43;환경 까지 해서 패키징 파일이 최소 3개씩 생기는데 그럼 너무 리소스 낭비죠. 공부중에는 쉽게 와닫지 않을수 있지만 예를 들면aws 버전과, gcp, azure 이런식으로 각 클라우드 별로 환경을 분리해서 테스트 해볼수도 있지요. 이미 알고 있다시피 key 보안 문제는 .env 파일과는 별개 문제

하얀뼈 · Answer

&#64;HJOW 한 방에 이해가 되었습니다

하얀뼈 · Answer

&#64;kmksk 하긴 환경이 세군데라고 해서 일일이 값을 전부 다 찾아서 수정하는게시간낭비라고 하면 .env의 존재의의를 확실히 알게된 것 같습니다. .env파일을 제외한 나머지 파일들은 동일하니깐요.... 감사합니다/

리액트나 vue의 .env를 왜 사용하는지 그 이유에 대해 고뇌(?)에 빠졌습니다.

9개의 답변

#.env 목록