react와 supabase storage 연동

서성원·2024년 7월 12일

리액트

목록 보기

18/26

음원 저장의 필요성

프로젝트 중 음악을 추가해야 하는 작업이 있었다. public에 음원 파일을 넣고 바로 가져오는 방법이 있다. 하지만 내가 추가할 음악은 지인이 만든 창작물이었고 저작권 신고를 하지 않아 다른 방법을 찾고 있었다.

마침 supabase가 최신 기술로 많이 사용된다는 것을 보았고, 프로젝트에 적용해 보았다. react와 supabase storage를 연동하는 방법에 대해 간략히 소개한다.

supabase설정하기

첫 번째로 할 것은 supabase에서 Projects를 생성해야 한다. 설정은 각자의 프로젝트 규모나 성격에 맞게 세팅해주면 된다.

이제 음원을 저장할 나의 supabase storage로 가자. 밑의 메뉴에서 Storage를 클릭한다.

new bucket 을 클릭한다.

bucket 이름을 설정 후 public 여부 선택한다. 이때 public로 설정하지 않으면 연동이 되지 않는다.

bucket 에 파일을 업로드한다. 나 같은 경우에는 음원을 사용하는 것이었어서 mp3 파일들을 저장해두었다.

React에서의 supabaseClient 코드

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

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
const supabaseKey = process.env.REACT_APP_SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

루트 폴더에 supabaseClient.js라는 이름으로 파일 안에 해당 코드를 작성한다. 그리고 env 파일 안에 supabase 계정의 bucket URL과 Key를 저장한다. 만약 배포를 해 둔 상태라면 배포 설정에서도 잊지 말고 URL과 Key를 설정해두도록 하자.

음원 가져오기

import { supabase } from '../../supabaseClient';

const audioPath = {
    1: 'POP1.mp3',
    2: 'POP2.mp3',
    3: 'HipHop1.mp3',
    4: 'HipHop2.mp3',
    5: 'Rock1.mp3',
    6: 'Rock2.mp3',
    7: 'RB1.mp3',
    8: 'RB2.mp3',
    9: 'Jazz1.mp3',
    10: 'Jazz2.mp3'
};

const { data, error } = await supabase
            .storage
            .from('Music_src') 
            .getPublicUrl(audioPath[audioName]);

위에서 만들어놓은 supabaseClient를 임포트한다.
audioPath에 버킷 내 음원 이름을 설정한다.
버킷이름 설정하고 publicUrl를 audioPath의 요소로 설정한다.

네트리파이에서 env 설정

내 프로젝트는 Netlify로 배포 중이었기에 env 설정에
REACT_APP_SUPABASE_URL 와 REACT_APP_SUPABASE_KEY를 추가해야 한다.
스크린샷 2024-07-12 17 56 11

후기

버킷을 public으로 설정해놔야 바로 접근할 수 있다.
AWS S3는 URL을 가져와야 하지만 supabase에선 버킷자체에 접근하여 파일을 가져올 수 있다. 물론 AWS에선 사전서명기능을 가진 URL을 따로 발급할 수 있다.
내 버킷의 URL과 API KEY만 설정하면 언제든 버킷에서 요소를 가져올 수 있다.