Supabase를 사용한 스트리밍 및 캐싱
Supabase를 사용한 스트리밍 및 캐싱
Supabase Edge Functions를 통해 음성을 생성하고 스트리밍하세요. 음성을 Supabase Storage에 저장하고 기본 제공 CDN을 통해 응답을 캐시합니다.
사용 방법 가이드 · ElevenAPI 빠른 시작을 완료했고 Supabase 계정이 있다고 가정합니다.
소개
이 가이드에서는 Supabase Edge Functions, Supabase Storage 및 ElevenLabs를 사용하여 음성을 생성, 스트리밍, 저장, 캐시하는 엣지 API를 구축하는 방법을 알아봅니다.
요구 사항
- API 키가 있는 ElevenLabs 계정
- Supabase 계정(database.new에서 무료 계정을 만들 수 있습니다)
- 컴퓨터에 설치된 Supabase CLI
- 컴퓨터에 설치된 Deno 런타임 및 선택 사항으로 선호하는 IDE 설정
설정
로컬에서 Supabase 프로젝트 만들기
Supabase CLI를 설치한 후, 다음 명령어를 실행하여 로컬에 새 Supabase 프로젝트를 만듭니다.
스토리지 버킷 구성
config.toml 파일에 다음 구성을 추가하면 Supabase CLI가 스토리지 버킷을 자동으로 생성하도록 설정할 수 있습니다.
supabase start를 실행하면 로컬 Supabase 프로젝트에 새 스토리지 버킷이 생성됩니다.
이를 호스팅된 Supabase 프로젝트로 푸시하려면 supabase seed buckets --linked를 실행할 수 있습니다.
Supabase Edge Functions의 백그라운드 작업 구성
로컬에서 개발할 때 Supabase Edge Functions의 백그라운드 작업을 사용하려면 config.toml 파일에 다음 구성을 추가해야 합니다.
per_worker 정책으로 실행하면 편집 내용이 Function에 자동으로 다시 로드되지 않습니다. supabase functions serve를 실행하여
수동으로 다시 시작해야 합니다.
음성 생성을 위한 Supabase Edge Function 만들기
다음 명령어를 실행하여 새 Edge Function을 만듭니다.
VS Code 또는 Cursor를 사용 중이라면 CLI에서 “Generate VS Code settings for Deno? [y/N]“를 묻는 메시지가 표시될 때 y를 선택하세요.
환경 변수 설정
supabase/functions 디렉터리에서 새 .env 파일을 만들고 다음 변수를 추가합니다.
종속성
프로젝트는 몇 가지 종속성을 사용합니다.
- Supabase 데이터베이스와 상호작용하기 위한 @supabase/supabase-js 라이브러리
- 텍스트 음성 변환 API와 상호작용하기 위한 ElevenLabs JavaScript SDK
- 요청 파라미터에서 해시를 생성하기 위한 오픈 소스 object-hash
Supabase Edge Function은 Deno 런타임을 사용하므로 종속성을 설치할 필요가 없습니다. 대신 npm: 접두사를 통해 import할 수 있습니다.
Supabase Edge Function 코드 작성
새로 만든 supabase/functions/text-to-speech/index.ts 파일에 다음 코드를 추가합니다.
코드 자세히 살펴보기
코드에서 주목할 만한 몇 가지 사항이 있습니다. 단계별로 살펴보겠습니다.
수신 요청 처리
수신 요청을 처리하려면 Deno.serve 핸들러를 사용합니다. 데모에서는 요청 출처를 검증하지 않지만, 요청 출처를 검증하거나 사용자 액세스 토큰을 추가하고 Supabase Auth로 검증할 수 있습니다.
함수는 수신 요청에서 text 및 voiceId 파라미터를 추출합니다. voiceId 파라미터는 선택 사항이며 기본값은 “Allison” 음성의 ElevenLabs ID입니다.
함수는 object-hash 라이브러리를 사용하여 요청 파라미터에서 해시를 생성합니다. 이 해시는 Supabase Storage에서 기존 오디오 파일을 확인하는 데 사용됩니다.
Supabase Storage에서 기존 오디오 파일 확인
Supabase Storage에는 파일을 쉽게 캐시하고 제공할 수 있는 스마트 CDN이 기본 제공됩니다.
여기서 함수는 Supabase Storage에 기존 오디오 파일이 있는지 확인합니다. 파일이 있으면 함수는 Supabase Storage의 파일을 반환합니다.
스트림으로 음성을 생성하고 두 분기로 나누기
ElevenLabs API의 스트리밍 기능을 사용하여 함수가 스트림을 생성합니다. 이 방식의 장점은 더 긴 텍스트에서도 즉시 사용자에게 오디오 스트리밍을 시작하고, 백그라운드에서 스트림을 Supabase Storage에 업로드할 수 있다는 점입니다.
이로써 가능한 한 최상의 사용자 경험을 제공하며, 큰 텍스트 블록도 놀라울 만큼 빠르게 느껴집니다. 핵심은 17번째 줄에서 stream.tee() 메서드가 읽기 가능 스트림을 두 분기, 즉 브라우저용과 Supabase Storage용으로 나누는 부분입니다.
백그라운드에서 오디오 스트림을 Supabase Storage에 업로드
이전 단계의 20번째 줄에 있는 EdgeRuntime.waitUntil 메서드는 uploadAudioToStorage 함수를 사용하여 백그라운드에서 오디오 스트림을 Supabase Storage에 업로드합니다. 이를 통해 오디오가 Supabase Storage에 업로드되는 동안 함수는 즉시 브라우저에 스트리밍 응답을 반환할 수 있습니다.
스토리지 객체가 생성된 후 사용자가 동일한 파라미터로 다시 요청하면 함수는 Supabase Storage CDN에서 오디오 파일을 반환합니다.
로컬에서 실행
로컬에서 함수를 실행하려면 다음 명령어를 실행합니다.
로컬 Supabase 스택이 실행되면 다음 명령어를 실행하여 함수를 시작하고 로그를 확인합니다.
사용해 보기
http://127.0.0.1:54321/functions/v1/text-to-speech?text=hello%20world로 이동하여 함수가 작동하는 것을 확인하세요.
그런 다음 http://127.0.0.1:54323/project/default/storage/buckets/audio로 이동하여 로컬 Supabase Storage 버킷의 오디오 파일을 확인하세요.
Supabase에 배포
아직 Supabase 계정이 없다면 database.new에서 새 계정을 만들고, 로컬 프로젝트를 Supabase 계정에 연결합니다.
완료되면 다음 명령어를 실행하여 함수를 배포합니다.
함수 시크릿 설정
이제 모든 시크릿을 로컬에 설정했으므로 다음 명령어를 실행하여 Supabase 프로젝트에 시크릿을 설정할 수 있습니다.
함수 테스트
이 함수는 <audio> 요소의 소스로 직접 사용할 수 있도록 설계되었습니다.