[TIL] supabase 연동 시 'url'과 'anone key'를 .env파일로 보안하는 방법

supabase를 사용할때 url과 anone key를 앱에 그대로 삽입하여 github에 올리면 보안에 취약할 수 있다.

이럴때는 .env 파일에 넣어 github에 올릴 때 제외 시킬 수 있다. 그 방법을 알아보자 !

 

1. supabase에 프로젝트를 생성한다.

 

2. 진행중인 프로젝트 앱에 'supabase'폴더 - 'supabaseClient.js'을 생성한다.(가독성 & 유지보수를 위해)

 

3. 진행중인 프로젝트 앱에 '.env.local' 이름의 파일을 생성한다.

4. '.env.local' 파일에 supabase에 있는 'url'과 'anone key'를 넣어준다.

VITE_SUPABASE_URL="프로젝트 URL"
VITE_SUPABASE_KEY="프로젝트 anone key"

//vite 기반으로 앱설치 했기때문에 앞에 VITE를 넣어줘야 한다!

 

5. 'supabaseClient.js'에서 'url'과 'anone key'를 변수로 할당하여 createClient로 지정해준다. (vite 쓰면 VITE 넣어주기)

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

const URL = import.meta.env.VITE_SUPABASE_URL;
const KEY = import.meta.env.VITE_SUPABASE_KEY;

const supabase = createClient(URL, KEY);

export default supabase;

 

이후 컴포넌트에서 할당한 supabase를 사용해 데이터를 가져와 사용하면 된다 !