[Node.js, Vue.js] 개발 환경에 따른 .env 설정

[Node.js]

node.js로 개발 환경과 배포 환경 설정하기.

 

우선 package.json에서

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "node src/index.js",

"develop": "NODE_ENV=develop node src/index.js",

"production": "NODE_ENV=production node src/index.js "

},

환경: NODE_ENV=환경(develop, production) node src/index.js

설정후 터미널에서 "npm run 환경" 이렇게 명령어를 입력하면, process.env.NODE_ENV 가 원하는 환경으로 설정된다. 주의 할점은 NODE_ENV=develop 이 앞서야 한다는 것이다.

 

import dotenv from "dotenv";

import path from "path";

const __dirname = path.resolve();

 

dotenv.config();

 

if (process.env.NODE_ENV === "production") {

dotenv.config({ path: path.join(__dirname, ".env.production") });

} else if (process.env.NODE_ENV === "develop") {

dotenv.config({ path: path.join(__dirname, ".env.develop") });

} else {

throw new Error("process.env.NODE_ENV  error!");

}

 

// 환경에 따른 서버 port 설정 

const PORT = process.env.PORT;

그후 분기문을 통해 원하는 .env파일을 설정 하면 된다. 

나는 port를 구분하기 위해 develop과 production 환경의 .env 파일을 분류했다.

 

.env.develop

PORT=3000

.env.production

PORT=8080

 

[vue.js]

vue.js는 node.js와 다소 차이가 있다. (훨씬 간단한듯 하다)

.package.json 에서

"scripts": {

"local": "vue-cli-service serve --mode local",

"production": "vue-cli-service build --mode production",

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

이렇게 설정후

.env.production 과 env.develop, env.local 파일등을 생성해 주면 된다.