Emails - Supaplate Documentation

이 섹션에서는 커스텀 SMTP 서버를 사용하여 Supabase에서 이메일을 보내는 방법에 대해 알아봅니다.

또한 기본 Supabase 이메일 템플릿을 제거하고, 더 아름다운 자신만의 템플릿을 사용하는 방법도 배우게 될 것입니다.

Supabase Email 템플릿

커스텀 SMTP

기본적으로 Supabase는 자체 이메일 제공업체를 사용하여 유저가 회원가입, 이메일 확인, 비밀번호 재설정 등을 할 때 사용자에게 이메일을 보냅니다.

Supabase의 이메일 제공업체는 실제 운영 환경에서 사용하기에는 적합하지 않으며, 여러 가지 제한이 있습니다.

실제 운영 환경에서는 Resend와 같은 서드파티 이메일 제공업체를 사용할 것을 적극 권장합니다.

테스팅 이메일

로컬에서 E2E 테스트 스위트를 실행하려는 경우, Resend와 같은 서드파티 이메일 제공업체를 설정하는 것을 강력히 권장합니다. 이렇게 하면 Supabase의 이메일 제공업체 제한에 걸리지 않도록 할 수 있습니다.

환경 설정

Resend는 사용자가 소유한 도메인 이름에서 이메일을 전송하므로, 자신의 도메인 이름으로 이메일을 보내려면 먼저 도메인을 구매해야 합니다.

도메인은 어느 도메인 등록기관에서나 구매할 수 있으며, Namecheap에서 구매하는 것을 추천합니다.

소유하고 있는 도메인 이름이 있다면 Resend에서 계정을 개설하고 이 가이드에 따라 도메인을 확인합니다.

서브도메인 사용

도메인 이름에는 서브도메인을 사용하는 것이 좋습니다. 예시: mail.yourdomain.com.

소유한 도메인이 확인되면 이 가이드에 따라 API 키를 생성해야 합니다.

.env 파일에 API 키를 RESEND_API_KEY로 입력합니다.

# example
RESEND_API_KEY="re_1234567890"

그런 다음 프로젝트의 SMTP 설정으로 이동하여 다음 값으로 SMTP 서버를 구성합니다:

Host: smtp.resend.com
Port: 465
Username: resend
Password: your_resend_api_key

이메일 템플릿

Supaplate는 일반적으로 사용되는 이메일을 위한 react email 템플릿 세트를 제공합니다.

이 템플릿들은 ./transactional-emails/emails 디렉토리에서 찾을 수 있습니다.

새 이메일 템플릿을 추가하거나 기존 템플릿을 수정할 때, 더 나은 개발자 경험을 위해 react email 개발 서버를 실행하는 것을 권장합니다.

cd ./transactional-emails
npm install # only the first time
npm run dev

이렇게 하면 브라우저에서 이메일을 미리 볼 수 있는 개발 서버를 실행할 수 있습니다.

Supabase 인증 이메일

Supabase에는 인증 이메일을 위한 기본 이메일 템플릿 세트를 제공합니다. 하지만 이러한 템플릿은 시각적으로 매력적이지 않을 수 있습니다.

더 보기 좋은 Supaplate 제공 이메일 템플릿을 사용하려면 ./transactiontal-emails/out 디렉토리로 이동하세요. 해당 디렉토리에서 다음과 같은 템플릿을 찾을 수 있습니다.

📁out/
├── 📄change-email.html
├── 📄confirm-email.html
├── 📄magic-link.html
└── 📄reset-password.html

그런 다음 Supabase 대시보드의 인증 이메일 템플릿 페이지로 이동합니다.

change-email.html, confirm-email.html, magic-link.html 그리고 reset-password.html 파일의 내용을 복사하여 Supabase 대시보드의 해당 템플릿에 붙여넣습니다.

제공된 템플릿을 수정하려면 ./transactional-emails/emails 디렉토리에서 파일을 편집하면 됩니다. 작업이 완료되면 npm run export 명령을 실행하여 ./transactional-emails/out 디렉토리를 다시 빌드한 다음 새 파일을 복사하여 Supabase 대시보드에 붙여넣습니다.

다른 이메일에는 `npm run export`가 필요하지 않습니다.

npm run export는 인증 이메일에만 사용해야 합니다.

인증 이메일을 HTML 파일로 변환하여 Supabase 대시보드에 복사/붙여넣기 위해 필요하기 때문입니다.

다른 이메일(트랜잭션(transaction) 이메일)을 전송할 때는 Resend를 사용하므로 HTML로 'compilation'하는 과정이 필요하지 않습니다.

트랜잭션 이메일

트랜잭션 이메일을 보내려면 Resend SDK를 사용합니다. React Email 컴포넌트를 이메일 템플릿으로 사용하면 npm run export 명령이 전혀 필요하지 않습니다.

import { Resend } from 'resend'
import { Email } from './email'

const resend = new Resend('re_123456789')

await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: <Email url="https://example.com" />,
})

이에 대한 자세한 내용은 React Email 문서에서 확인하세요.