[NuxtJS] 개발/운영 분기(NODE_ENV) (ft. cross_env)

NODE_ENV

보통 노드 환경에서 개발을 하게 되면 개발(development)과 운영/배포(production)로 분기를 env값을 이용해 구성한다.

많은 블로그와 코드들을 보면서 봤을 텐데 보통 아래와 같이 선언해두고 사용한다.

{
  "name": "test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development nuxt",
    "build": "nuxt build",
    "start": "NODE_ENV=production nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
  }
}

이런식으로 package.json의 script 부분에 NODE_ENV라는 환경변수를 선언해 두고 사용하고는 한다.

이제 현재 글이 NuxtJS라 그렇지 그 외에도 이런 식으로 사용하면 된다.

(NuxtJS는 nuxt라는 실행 명령어를 통해 실행되는데, 왜 모든 글들에서 저렇게 nuxt 앞에 변수들을 선언하나 했더니 만약 "nuxt NODE_ENV=development" 이런 순서로 실행시키면 에러가 발생한다. 아마 실행하면서 환경 변수를 읽어야 해서 그런가 보다.)

 

하지만 여기 까지라면 NuxtJS 카테고리가 아니라 Node.js 카테고리에 글을 작성했을 것이다.

 

정보를 한참 찾아보다가 재밌는 글을 발견했는데, Next.js의 경우에는 자동적으로 development/production이 주입된다고 한다. process.env.NODE_ENV 변수를 자동으로 생성하고, 구동 환경에 따라 값을 주입해 준다고 한다.

 

그렇다면 NuxtJS는?

VueJS의 발전 과정을 보면 알겠지만 "React가 하면 나도 한다!"가 기본이기 때문에 혹시나 하는 생각에 테스트를 해보았다.

그랬더니 놀랍게도 저렇게 scripts에 명시하지 않고도 NuxtJS 역시 자동으로 process.env.NODE_ENV 변수에 development/production이 주입되는 것을 확인하였다.

 

그렇지만 이 테스트의 근간이 될 문서가 어디 없나 찾아보다가 아래의 글을 발견하였다.

https://github.com/nuxt/nuxt.js/blob/dev/packages/cli/src/setup.js#L9-L11

GitHub - nuxt/nuxt.js: The Intuitive Vue(2) Framework

이 글로 인해 따로 정의가 되어 있지 않다면 자동으로 주입해 주는 것이 맞다는 것을 확인할 수 있었다.

 

그러면 이걸 바탕으로 process.env.NODE_ENV를 활용하여 분기처리하는 것이 간단해질 것이다.

---

cross-env

NuxtJS의 경우에는 자동으로 주입된다 하더라도 상황에 따라서 package.json의 scripts 영역에서 동적으로 process.env값을 설정해야 하는 경우가 생길 수 있다.

 

하지만 이렇게 동적으로 설정하는 방식은 맥 OS나 리눅스에서만 돌아가고 윈도우 OS에서는 빌드 인식이 안된다고 한다.

이럴 때 cross-env 모듈을 사용하면 OS 간 호환성을 해결할 수 있다.

npm install cross-env
yarn add cross-env

cross-env를 설치하였다면 사용하는 방법은 간단하다.

{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development nuxt",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production nuxt start",
    "generate": "nuxt generate"
  },
  ...
}

이런 식으로 cross-env를 명시해 주면 끝이다.

---

참고: https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-cross-env-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EB%B2%95

[NODE] 📚 cross-env 모듈 사용법