env작성법

  • 내부는 json형식으로 이루어짐
  • 키에는 “(큰따옴표)는 안넣어줘도 인식한다.
  • 키는 대문자로 하면 보기좋다. 
    ID = "필요아이디"
  • 위처럼 작성하면된다.

env 정리법

  • 개발용, 실제 상용용으로 따로 관리하면 편하다.
  • env폴더
    • .production.env
    • .develop.env
    • 위처럼 사용, 개발 환경변수 설정해도 된다.
  • .gitignore에 *.env를 추가해서 갱신안되도록 해준다.

dot env 사용법

  • npm install dotenv로 설치
const dotenv = require("dotenv");//dotenv불러오기
dotenv.config({path: `env 파일 경로`});//env파일 읽어서 설정
console.log(process.env.ID)//읽어진다.
  • 위의 것을 좀더 다듬은것으로 NODE_ENV에 따라 어떤 파일을 읽을지 결정한다.
dotenv.config({//env가져오기
path: path.resolve(//경로찾기
    process.cwd(),//현재경로 + 
    process.env.NODE_ENV == "production" ? ".env" : ".env.dev"//실제는 .env, 개발은 .env.dev사용
),
});
  • NODE_ENV는 따로 설정해줘야 하는 환경변수이다.
    • 웹팩 기준으로 설정법 작성
  • 이렇게 하면 process.env."키"를 통해 .env에 정의된 해당 키의 값을 불러온다.

웹팩에 환경변수 적용

  • webpack.DefinePlugin을 사용

webpack.config.js

  • const webpack = require('webpack');를 선언

  • 파일에 아래를 추가해준다.(위의 dotenv설정과 같음)

    • 이것으로 webpack에서 env파일을 읽을 수 있게 해주는것이다.
const dotenv = require("dotenv");
dotenv.config({//env가져오기
    path: path.resolve(//경로찾기
        process.cwd(),//현재경로 + 
        process.env.NODE_ENV == "production" ? "env/.production.env" : "env/.development.env"
        //env폴더내에서 파일을 읽는다. 상용은 .production.env, 개발은 .development.env
    ),
    });
  • plugin에 아래를 추가해준다.
    • env파일을 읽은것을 webpack의 내부 전역변수로 설정해주는 것이다.
new webpack.DefinePlugin({
    'process.env.IP': JSON.stringify(process.env.IP) // env에서 읽은 ip를 저장
}),

webpack의 NODE_ENV 설정

  • package.json의 script부분을 수정하면된다.
  • 기본적인 웹팩빌드 명령
    • "build": "webpack -w"
    • 위처럼 설정되어있을것이다.
    • 위의 명령어로 실행시 node_env는 undefined로 출력된다. 따로 선언이 없으니까
  • node_env를 웹팩에 전달해주는 명령어로 수정
    • "build": "NODE_ENV=production webpack -w"
    • 이렇게 하면 webpack은 빌드할때 node_env를 production으로 출력한다.
  • 약간의 변형
    • 아래처럼 하면 bundle로 할때는 개발모드(development)로 환경변수가 젹용
    • build로 할때는 상용모드(production)로 환경변수가 적용된다.
"bundle": "NODE_ENV=development webpack -w",
"build": "NODE_ENV=production webpack -w",

출처

https://velog.io/@marulloc/Webpack-Webpack%EA%B3%BC-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98 https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/manage-env-variables

https://www.daleseo.com/webpack-plugins-define-environment/ https://icerabbit.tistory.com/81