Nuxt 빌드/배포 분기를 여러곳으로 나눠보자.

 

 

✏️Nuxt에 빌드/배포 분기를 여러곳으로 나눠보자.

 

 

실무에서는 여러 개발자가 함께 개발하기 때문에 코드를 합쳐야 하는 순간이 온다. 

내가 있는 곳은 각각 개발한 코드를 합쳐서 테스트 해볼 수 있는 개발 서버와, 실제 배포되는 리얼 서버와 동일한 환경에서, 실제 서버에 

배포 나가기 직전에 테스트를 진행해볼 수 있는 스테이징 서버, 그리고 실제 유저가 사용하는 리얼 서버로 운영이 되고있다.

 

이를 위해 환경 변수를 development, stage, production에 맞춰서 따로 처리를 해줘야 하는데, 넉스트에 적용해야 되기도 하고, 

알아보는 과정에서 많이 헤맸기 때문에 (Nuxt는 문서가 잘 정리되어 있긴 한데...) 다른 분들도 혹시 나와 같은 상황에 겪지 않도록 

오늘 헤맸던 내용을 공유해보려고 한다! 

 

우선, dotenv를 설치해야 한다. dotenv는 env 파일을 쉽게 분기할 수 있도록 도와준다.

 

설치 후, nuxt.config.js에 설정을 해야 한다.

 

// nuxt.config.js

modules: [
    ['@nuxtjs/dotenv', { filename: `.env.${process.env.NODE_ENV}`}],
  ],

 

Nuxt.js에서 기본적으로 npm run dev로 서버를 실행시키면, development로 NODE_ENV가 설정되고 

dev 서버를 실행시킨다. 

 

npm build는 프로덕션 용 웹팩으로 어플리케이션을 최적화하고 빌드한다.

npm start는 프로덕션 서버를 실행시킨다. 실행시키면 터미널에 Environment가 production으로 설정되고, NODE_ENV 또한 production으로 설정된다.

 

기본적으로는 dev와 production이 있음을 알 수 있다.

 

위에서 설정한 dotenv 또한, NODE_ENV 값을 사용하기 때문에 dev에서는 .env.development 파일을 볼 것이고, 

production 에서는 .env.production 파일을 볼 것이다. 이 파일은 루트 경로에 미리 설정해두면 된다! 

 

하지만 나는 stage 서버를 위한 설정 파일이 필요하기 때문에, .env.stage 파일을 추가했다.

stage 파일을 인식시키기 위해 설정이 필요했다. 그 설정은 package.json에서 할 수 있다.

 

// package.json 

{
  "scripts": {
    "local": "NODE_ENV=local nuxt",
    "dev": "NODE_ENV=development nuxt",
    "build:prod": "nuxt build",
    "build:dev": "NODE_ENV=development nuxt build",
    "build:stage": "NODE_ENV=stage nuxt build",
    "start:dev": "NODE_ENV=development nuxt start",
    "start:stage": "NODE_ENV=stage nuxt start",
    "start:prod": "nuxt start",
    "stage": "NODE_ENV=stage nuxt",
    "prod": "NODE_ENV=production nuxt",
  },
}

 

npm run stage를 실행시키면, NODE_ENV 값에 stage를 대입한 후 실행시킨다. 

그렇기에 nuxt.config.js에서 설정한 process.env.NODE_ENV는 stage가 될 것이며 .env.stage 파일을 바라보게 된다. 

 

build혹은 start는 dev, stage, production 서버 배포 용으로 설정해둔 명령어다.

 

local/dev를 나눠놓은 이유는, client에서도 local과 dev를 나눠서 테스트해야 하는 작업이 있어서 설정해두었다.

(도메인을 2개 쓰기 때문에 포트 또한 3000, 8080 두개 사용하며 번갈아 테스트하는 환경이라서)

 

하지만, 문제가 하나 있다. npm run local로 실행한 후, default.vue에서 console.log(process.env.NODE_ENV) 를 실행시키면

예상하는 결과는 local이 나와야 한다. 근데 위 설정대로면, development가 설정된다. 무엇이 문제일까? 

 

문제 해결은 간단하다. nuxt.config.js에 dotenv에 변수를 공유하겠다는 코드 한줄(한줄도 아니다)이면 된다. 

 

//nuxt.config.js

  modules: [
    ['@nuxtjs/dotenv', { filename: `.env.${process.env.NODE_ENV}`, systemvars: true }],
  ],

 

이 옵션을 몰랐다가, 헤맸다.. 

여튼 systemvars: true를 해주면, 다른 곳에서 변수를 같이 사용할 수 있다. 

다른 곳에서 변수를 사용할 일이 생기면 (도메인이 2개인 경우 ?) 위 옵션을 사용하도록 하자.