Nuxtjs3 RuntimeConfig Naming Convention

서론

Nuxtjs를 쓰면서 RuntimeConfig를 사용할 일이 많이 있다. 예를 들자면 Adsense의 광고ID나 Backend URL 등 의외로 많은 장소에서 사용하게 된다.

RuntimeConfig의 내용은 ServerSide에서도, ClientSide에서도 모두 사용이 가능한 변수이다. process.env.[]는 ServerSide에서만 사용이 가능한 것과 대조된다.

설정방법을 모르는 분을 위해 설정 예시를 보이고 본론으로 들어가도록 하겠다.

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      backendUrl: process.env.NUXT_BACKEND_URL ?? "http://localhost:8000",
      recaptchaSiteKey: process.env.RECAPTCHA_SITE_KEY
    }
  },
})

이 코드는 맞춤법 검사기의 코드 일부를 가져온 것이다. 여기에서 사용중인 BackendURL과 ReCaptcha의 SITE_KEY를 runtimeConfig의 public variable로 넣은 모습이다.

 

본론

그런데 예시 코드의 변수이름이 조금 이상하다고 느끼지 않는가?
보통 이런 변수들은 전부 대문자로 집어넣는 것에 대비된다.

여기에 대한 대답은 Nuxtjs Runtime Config 문서를 보면 알 수 있다.

Nuxtjs Runtime Config 문서의 한 부분이다.

조금 더 상세하게 설명하자면, Nuxtjs를 Production 배포할 때 문제가 생긴다. 이 때에는 Nuxtjs가 process.env에 저장된 변수를 읽어오지 않는다.
process.env 중 NUXT_ 로 시작하는 변수만 찾아 읽어오도록 설계되어 있다.

위의 예제에서 runtimeConfig.public.backendUrl 변수는 process.env.NUXT_PUBLIC_BACKEND_URL 에서 읽어온다는 의미이다.
만약 runtimeConfig.secretKey 변수는 process.env.NUXT_SECRET_KEY에서 읽어온다.

다른 블로그를 둘러보며 runtimeConfig에 대한 설명은 있었지만 Production에서의 NamingConvention은 없어서 더욱 설명하게 되었다.

결론

나도 이부분에 대해 몰라 많이 해메었었다. process.env를 바로 쓸 수 없는 것, Production 배포할 때의 환경변수 설정도 많은 블로그에 설명이 되어있지 않았다.

이 블로그를 보며 알아가는 계기가 되었으면 한다.