환경변수가 안 불러와진다？

터미널에서는 값이 잘 출력이 되는데

브라우저에서 값이 필요하다면서 오류가 뜬다. 

 

 

값을 환경변수 적용 없이 직접 넣어주니까 동작은 하는데, 

그렇게 하면 키값이 다 드러나니까,

다른 방법을 찾아봐야 할 것 같다. 

 

인터넷 서칭을 해도 딱히 맞는 해결책을 못 찾고 있다가,

문득 현재 내가 보안을 위해 env 값에다가 NEXT_PUBLIC_ 을 안 붙인 것이 생각났다. 

 

페이지들이 다 서버 컴포넌트였어서 문제가 없었는데, 

그러고보니 방명록 게시판은 내가 클라이언트 컴포넌트로 만들었다.

 

아니나 다를까 

클라이언트에서 실행되는 API 호출 함수에서 키값을 못 읽어오고 있는 것이었다. 

BASE_URL 을 NEXT_PUBLIC_BASE_URL 로,

API_KEY 를 NEXT_PUBLIC_API_KEY 로 바꾸니까

정상적으로 작동이 되었다.  

 

근데, process.env.NEXT_PUBLIC_BASE_URL 이렇게 바로 주입하면 

키값이 노출될 확률이 높기 때문에, 

변수에 저장해서 사용해주기로 했다. 

 

import { createClient } from '@supabase/supabase-js';

const baseURL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const apiKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(baseURL, apiKey);

 

 

정상적으로 작동！

 

 

 

 

 

-

근데 게시물들을 읽다 보니,

.env 파일이 local, development, production 등 나눠져있는데, 

왜 그런걸까？

다음 번에는 이에 대해서 다뤄볼까 한다. 

---

참고한 게시물

https://velog.io/@milkboy2564/Next.js-env%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%A0%95%EB%A6%AC

https://curryyou.tistory.com/503