우리는 유저의 회원가입 시 이메일을 인증하기 위해 유저가 입력한 메일 주소로 이메일을 보낼 수 있는 수단이 필요하였다. 그 수단으로 선택한 것이 'mailgun'이다.
1. Send and receive mail
-> SMTP 또는 API로 이메일을 전송할 수 있으며 API 방식을 채택
2. Measure success
-> 설정한 도메인 별 이메일 전송 여부 및 분석 지표를 제공받음
3. Land in the inbox
-> 스팸 관리, 이메일 인증 등 다양한 기능들이 있는 것 같은데 사용 안함
Route 53을 통해서 설정을 완료해주고 mailgun에서 Verify DNS settings을 누르면 여러 레코드 조건들이 초록색으로 변하며 다음 단계로 넘어가게 된다.
DNS 설정이 완료되면 이제 이메일을 보낼 수 있다.
import Mailgun from "mailgun.js"
import formData from "form-data"
import MAIL from "../configs/mailgun"
const { MAILGUN_API_KEY, MAILGUN_DOMAIN, MAILGUN_FROM } = MAIL
const sendTestEmail = async (
hashedEmail: string,
email: string,
type: string
) => {
try {
const mailgun = new Mailgun(formData)
const client = mailgun.client({ username: "api", key: MAILGUN_API_KEY })
const data = {
from: MAILGUN_FROM,
to: email,
subject: "Movie-inner: Please verify your email address.",
text: `http://localhost:3000/signup/verify?key=${hashedEmail}&email=${email}&type=${type}`,
}
await client.messages.create(MAILGUN_DOMAIN, data)
} catch (e: any) {
console.error(e)
}
}
Mailgun에서 받은 API KEY
와 처음에 설정한 MAILGIN_DOMAIN
, 발신자 이메일 MAILGIN_FROM
은 .env로 설정하여 환경변수로 가져왔다.
이메일을 전송하는 API를 작성하고 이메일 유효성 검사를 위한 key
, email
, type
을 매개변수로 받아, 이메일을 전송하는 sendTestEmail
모듈을 넣어주면 된다.
*이메일 전송 API가 하나라면 모듈없이 API에 바로 작성해도 무관
무사히 잘 도착하였다.
이메일 전송하는 것은 무사히 성공하였지만 어딘가 찜찜하다.
밋밋하게 보내지는 메일의 내용을 예쁘게 꾸미고 싶다.
다행히도 mailgun에서 다양한 템플릿을 제공한다.
카테코리에서 Templates
부분을 선택하면 도메인 별 템플릿을 제작할 수 있다.
나는 mailgun에서 기본적으로 제공하는 템플릿을 이용하여 이메일 검증을 위한 verifying_email
과 비밀번호 초기화를 위한reset_a_password
템플릿을 제작하였다.
하지만 나는 이메일을 검증하기 위해 key
, email
, type
을 html에 변수로 보내어야 했다.
{{변수명}}
으로 설정하고 API에 각 변수에 맞는 값을 넣어주면 된다.
const senVerifyEmail = async (
hashedEmail: string,
email: string,
type: string
) => {
try {
const mailgun = new Mailgun(formData)
const client = mailgun.client({ username: "api", key: MAILGUN_API_KEY })
const data = {
from: MAILGUN_FROM,
to: email,
subject: "Movie-inner: Please verify your email address.",
template: "verifying_email", // 템플릿 이름
"t:variables": JSON.stringify({ // 템플릿에 설정된 변수값
hashedEmail,
email,
type,
}),
}
await client.messages.create(MAILGUN_DOMAIN, data)
} catch (e: any) {
console.error(e)
}
}
실행 결과 =>>
설정한 템플릿대로 이메일이 잘 오는 것을 확인할 수 있다.