shared 패키지의 유틸 함수에서 환경 변수 접근하기

문제 정의

sentry를 초기화하는 initSentry 유틸 함수이다.

// packages/shared/lib/utils/initSentry.ts
/* eslint-disable import/namespace */
import * as Sentry from '@sentry/react';

export const initSentry = () => {
  Sentry.init({
    dsn: '..',
		// ..
  });
};

공식문서에서는 sentry dsn의 값을 public으로 둬도 괜찮다고는 한다.

그래도, 다른 패키지에서 불러온 유틸 함수에 환경 변수를 적용하려면 어떻게 해야할 지 궁금하고, 해결하고 싶어 시도해보고자 한다.

사실 수집

import.meta.env 환경 변수를 사용한다.

shared 패키지는 vite환경이기에 가장 먼저 시도해본 방법이다.

undefined인 VITE_SENTRY_DSN을 읽을 수 없습니다.

shared패키지를 독립적으로 빌드해보면 에러가 발생한다.
process.env을 사용한다.

Node.js환경에서 사용하는 환경 변수이다. vite환경이라 안될 거라 생각했지만 혹시나 해서 시도해보았다.

undefined가 출력이 된다.

빌드 파일을 확인해본다.

// packages/shared/dist/lib/utils/initSentry.ts
"use strict";
import * as Sentry from "@sentry/react";
export const initSentry = () => {
  Sentry.init({
    dsn: process.env.VITE_SENTRY_DSN,
    // ..

해당 변수가 치환이 안되었다.

즉, 정리하면 함수를 import했을 때 내부 환경 변수는, 해당 변수로 치환되어 전달되는 것이 아니라, 변수 그 자체로 넘어간다.

차선책

initSentry의 인자로 sentryDsn을 전달받고, 사용하는 측에서는 환경변수를 넘겨주면 해결될 일이다.

해결 방법

initSentry.ts는 인자로 sentryDSN을 전달받는다.

export const initSentry = (sentryDsn: string) => {
  Sentry.init({
    dsn: sentryDsn,

initSentry를 사용하는 측에서는 환경 변수로 dsn값을 전달한다.
```
initSentry(import.meta.env.VITE_SENTRY_DSN);
```

추후 공부

그렇다면, shared측에서 환경 변수를 주입할 수는 없는걸까?

빌드 타임에 환경 변수를 주입할 수 있지 않을까?에 대해 더 공부해보자.

⇒ 추후 dotenv를 통한 환경 변수 주입으로 해결

dotenv.config();
const define = {};
for (const k in process.env) {
  define[`process.env.${k}`] = JSON.stringify(process.env[k]);
}