✉️ Mailgun

---

우리는 유저의 회원가입 시 이메일을 인증하기 위해 유저가 입력한 메일 주소로 이메일을 보낼 수 있는 수단이 필요하였다. 그 수단으로 선택한 것이 'mailgun'이다.

mailgun 주요 기능

1. Send and receive mail
-> SMTP 또는 API로 이메일을 전송할 수 있으며 API 방식을 채택

2. Measure success
-> 설정한 도메인 별 이메일 전송 여부 및 분석 지표를 제공받음

3. Land in the inbox
-> 스팸 관리, 이메일 인증 등 다양한 기능들이 있는 것 같은데 사용 안함

Mailgun 사용 절차

---

1. 도메인 등록

1. 메일을 전송할 도메인 이름을 설정하여 생성한다.

2. 구매해놨던 ec2 서버의 DNS records를 생성해주어야 한다. Route 53을 통해 지정해준 type, name, value를 기입하여 레코드를 생성한다.

Route 53을 통해서 설정을 완료해주고 mailgun에서 Verify DNS settings을 누르면 여러 레코드 조건들이 초록색으로 변하며 다음 단계로 넘어가게 된다.

2. API로 이메일 전송

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에 바로 작성해도 무관

무사히 잘 도착하였다.

3. 이메일 템플릿

이메일 전송하는 것은 무사히 성공하였지만 어딘가 찜찜하다.
밋밋하게 보내지는 메일의 내용을 예쁘게 꾸미고 싶다.
다행히도 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)
    }
}

실행 결과 =>>

설정한 템플릿대로 이메일이 잘 오는 것을 확인할 수 있다.

이메일 인증 구현하기