webpack 환경변수 주입하기 (feat.Typescript)

 

서버를 따로 구현하지 않고

S3 스토리지로 배포되어있는

데이터를 그대로 받아와야했다.

 

웹팩에서 환경변수를 주입해

axios get요청으로 데이터를 받아와보자!

 

npm install dotenv
npm install webpack-env

 

우선 

dotenv와 webpack-env

패키지를 설치한다.

 

그리고 .env 파일을 생성 후 gitignore에 넣어주자

(깃헙에 올리지 않기 위함)

 

env파일엔 

외부에 알려지지 않아야하는

클라이언트 아이디 or 시크릿키 or api주소 등이 있다.

 

API_ENDPOINT=http://localhost:3000/

위와 같은 형식으로

좌항은 대문자로 입력해야한다.

또한 문자열이라고 따옴표를 넣어주면 안된다.

 

 

웹팩으로 파일이 프로젝트가 세팅되어있으면

webpack.common.js  또는

webpack.config.js 파일이 있을텐데

 

( webpack.config.js는

webpack.common.js / webpack.dev.js / webpack.prod.js 를 머지한 결과물이다. )

 

해당 파일에 EnvironmentPlugin과

.env파일에서 생성했던 API_ENDPOINT를 이런식으로 가져온다.

module.exports = {
	...
  plugins: [
  	...
    new EnvironmentPlugin({
      API_ENDOPOINT: process.env.API_ENDOPOINT,
    }),
        ...
  ],
  	...
};

 

 

그 후 

src폴더 안에 configs폴더를 생성 한 후 

index.ts 파일을 만들어 주자

export const API_ENDPOINT = process.env.API_ENDPOINT;

여기까지 한 후에

 

환경변수를 사용하기 원하는 컴포넌트에서 

상단에 API_ENDPOINT를 import한 후

import { API_ENDPOINT } from './configs';

마음껏 사용하면 될 것 같지만

타입에러가 나온다.

 

 

 

src / types / environment.d.ts 

위의 파일을 만들어

export {};

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      API_ENDPOINT: string;
    }
  }
}

여기까지 해줘야 완성..

환경변수 타입을

타입을 전역으로 사용할 수 있게 해준다.

 

마지막으로

tsconfig.json에서

{
  "compilerOptions": {
...
    "typeRoots": ["./node_modules/@types", "./src/types"],
...
}

한 줄 넣어주자 

글로벌 타입을 사용하겠다는 것이다.

 

 

 

이거 해결하려고

구글링하면서

이런저런 패키지를 설치했는데

알고보니 쓸데없는것들이어서 

지우러가야한다..