Firebase Trigger Email 사용
프로젝트 초반부엔 특정 조건하에 E-mail 이 자동 전송될 수 있도록 하는 api 또는, 백엔드를 직접 작성해야 하나 싶었다. 검색에 검색을 더하다보니 Firebase 자체적으로 내장되어 있는 확장 프로그램에 Trigger Email 이 있음을 알게 되었다.
이메일 자동전송을 하는 코드를 직접 작성하는 법을 배워도 좋겠지만, 유지보수 및 적용의 편의성, 데이터 관리의 이점, 마지막으로 Firebase에 어느정도 익숙해진 터라 Trigger-Email 확장프로그램 사용법을 배우기로 했다.
TriggerEmail은 동작 Trigger에 대한 이해만 된다면, 금방 할 수 있지만 공식문서와 정보들이 쥐파먹은 듯이, 어디 한군데에서 내용이 갑자기 비약하던 터라 어떤 방식으로 메일이 전송되는지 파악이 늦어 구현이 시간이 오래 걸렸다.
코드에서는 입력폼을 변경하는 것외엔 특별한 것이 없고, 다만 Firebase / TriggerEmail의 환경설정 부분을 신경써서 작성해주어야 한다.
// 기존의 Firebase / FireStore / db 에 addDoc 하는 방식에서부터 Email Trigger의 Trigger 요소를 낑겨넣어준다.
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
if (subscriberEmail.match(emailRegex) === null) {
e.preventDefault();
alert('이메일을 형식에 맞게 입력해주세요.');
} else {
e.preventDefault();
const subscriberRef = collection(db, 'subscriber');
const subscriber = {
to: subscriberEmail, // E-mail Trigger 에 의해, To 라는 필드에 삽입되는 Email로 자동전송
name: subscriberName, // Name이나, SubmitTime과 같은 요소들은 Message 상에 {{name}}, {{ submitTime }} 방식으로 불러올 수 있다.
submitTime: submitTime,
message: {
subject: '[쟈스민 독립서점 소식지]를 구독해주셔서 감사합니다.', // message 내에서, subject 항목은 이메일에서 제목으로 발송
text: '', // text를 작성해도 좋지만, 이메일을 내용을 이미지로 보내기 위해 아래 HTML 코드로만 작성하였다.
html: ' <img src ="https://user-images.githubusercontent.com/78587041/214996034-50d81353-fcc8-48da-8694-7dd2e04dfc40.png" alt ="Thank you for subscribing out Letter" width ="650px" height="1000px"> ',
},
};Input 창에 입력한대로 Message 아래, HTML, Subject, name, submitTime, to 가 잘 들어갔다.
그리고, Trigger-Email 실행에 따라, 아래의 내용이 추가가 되는데, 아래 내용은 에러가 발생했을 경우 볼 수 있다.
전송이 성공했을 경우의 메세지. Delivery State 가 Success로 되어 있다.
Firebase의Trigger Email의 환경설정창이다.
(선택사항)은 대개 적용이 되어있지않다. jasmine@bookstore.com 으로 작성한다한들 이메일은 발신자의 이메일 주소로 가게 된다.
User Collection 파트는 유저의 이메일 정보가 다른 경로로 수집된 경우 그 안에 [email] 필드가 있으면 따온다.
Templete Collection 같은 경우 Email Template가 여러 개이며 앱 내 이메일 발송 요소가 많을 경우 템플릿을 각 상황에 맞게끔 저장해놓고 알맞게 발송하기 위해 사용한다.
