서비스 내에서 다이렉트로 나에게 메일을 쏠 수 있는 기능을 생각했다.
다이렉트 메일 전송
서버리스로 진행하는 프로젝트이다보니, 추후 배포 시 호스팅 서비스의 webhook 이나 AWS lambda를 이용할 예정이다. 개발 단계에선 작은 Express 서버를 띄워 테스트했다.
메일 서비스로는 Mailgun을 이용했다. 한 달 5000통의 메일 전송을 무료로 제공한다.
부담없이 연락해달라는 컨셉을 위해 제목과 내용만 적으면 전송할 수 있도록 구성했다. 보내는 주소도, 받는 주소도 요구하지 않는다.
유저가 사용하는 이메일 서비스를 통해 연락을 취하고 싶을 경우를 생각해 내 메일 주소를 남겨두었다.
답장을 위해 당신의 연락처를 남겨달라는 문구를 placeholder에 넣어두었다.
전송 성공시 간지나는 애니메이션과 전송 완료 페이지로 이동되니 사용해 보도록 하자.
어케함?
Mailgun API 자체가 잘 되어있어서 상당히 간단하다.
우선 서비스 가입이 필요하다. 여담으로 이전에 가입했던 계정을 이용하려 했는데, 영구 정지당했다. 문의하니 영구정지 계정은 CS측에서 읽지도 않는다. 10초만에 봇에게 규정 위반이라는 답장이 온다. 어이없는
찾아보니 이런 식으로 정지당한 계정들이 좀 있더라. 보안 처리 제대로 안한 토이 프로젝트에 API 걸어둬서 그런가
서비스 회원가입
어쨌든 가입하고 로그인하면 대시보드가 나온다.
좌측 사이드바의 Sending - Domain 탭으로 넘어가면 무료 플랜에서 제공하는 도메인이 있다. 도메인 주소를 기억해두자.
다음은 상단 네비게이션 계정정보 - API Keys 페이지로 이동해 Private API key를 확인하자. 이것도 기억해두자.
공식문서엔 Mailgun SDK 이용해 발송하는 방법밖에 안나와있어서 서버리스 환경에 사용하기 애매했다. curl로 발송하는 매뉴얼이 있어서 이걸 좀 틀어서 사용하기로 했다.
코드
** Mailgun SDK를 사용하지 않는 방식이다.
서버가 있을 경우 SDK를 이용하는게 훨씬 편하다.
- 헤더 설정
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Authorization", `Basic ${process.env.MAILGUN_API_KEY}`);MAILGUN_API_KEY 에 아까 본 private key 를 그대로 넣으면 안된다. SDK용 key이기 때문에 포스트맨 등을 이용해 해당 키를 auth 토큰으로 변환해 넣어줘야한다.
- 내용
const urlencoded = new URLSearchParams();
urlencoded.append("from", `${process.env.MAILGUN_ADDRESS}`);
urlencoded.append("to", `${process.env.MAILGUN_ADDRESS}`);
urlencoded.append("subject", req.body.subject);
urlencoded.append("text", req.body.message);
const requestOptions = {
method: "POST",
headers: myHeaders,
body: urlencoded,
redirect: "follow",
};
HTTP로 바로 보낼때는 쿼리스트링을 이용한다. 수/발신자, 내용과 제목을 설정해준다. 내 경우 무조건 내 메일로 오면 되기 때문에 수/발신자를 내 메일로 통일했다.
- 전송
const response = await fetch(process.env.MAILGUN_DOMAIN, requestOptions);
주소는 아래와 같은 형식으로 보낸다.
https://api.mailgun.net/v3/${아까 확인한 도메인 이름}/messages
끝
