Portfolio

현재 진행 중인 대처

env 파일을 못 읽을 경우, 직접 값을 할당해주어 임시로 동작하도록 함


const clientId = 
	process.env.REACT_APP_REST_API_KEY ?? 
			"8f248aa7874df072e8d15b2d0b284108";
const redirectUri =
      process.env.REACT_APP_REDIRECT_URI ??
      "https://test-005--cool-dusk-ced14a.netlify.app/login";

Problem

문제상황

배포 서버에서 환경 변수를 등록해주어도, 접근하지 못하는 이슈

redirect_uri 및 client_id가 undefined 되어, 로그인 이후 과정 진행 불가 상황

해결과정

문제 원인 분석

local에서 webpack-dev-server로 테스트 한 결과, development 및 production 환경에서 모두 정상적으로 env파일을 읽어오고 있음을 확인

문제 포인트가, amplify 혹은 netlify에서 env를 읽지 못하는 것으로 좁힐 수 있음
관련 키워드로 구글링 중 같은 문제 발견 (link1)

문제원인

‘webpack-dotenv’ option 중 env와 같은 system 변수들에 대한 접근을 local 환경이 아닌 곳에서 제한하는 것이 default로 설정되어 있어서, amplify 및 netlify에 등록된 환경변수를 가져오지 못하였음

해결

‘webpack-dotenv’의 systemvars 옵션을 true로 변경 (link2)


// webpack.config.js
...
	new DotenvPlugin({ systemvars: true })
...

참고링크

stackoverflow 같은 문제

dotenv-webpack cannot load env varibles on production

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

https://stackoverflow.com/questions/69159482/dotenv-webpack-cannot-load-env-varibles-on-production

dotenv-webpack 공식문서

dotenv-webpack

A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use. Include the package locally in your repository. npm install dotenv-webpack --save-dev dotenv-webpack wraps dotenv and Webpack.DefinePlugin. As such, it does a text replace in the resulting bundle for any instances of process.env.

https://www.npmjs.com/package/dotenv-webpack

배포환경에서 env 접근 불가 이슈

현재 진행 중인 대처

Problem

해결과정