SendGrid API로 이메일 뉴스레터를 보내는 방법

수년 동안 Quincy Larson은 Amazon SES로 구동되는 freeCodeCamp의 Mail for Good 플랫폼을 통해 주간 이메일 뉴스레터를 보냈습니다.

그는 최근 이 프로세스를 SendGrid로 마이그레이션했습니다. 이 기사에서는 이 작업을 수행하기 위한 도구를 어떻게 구축했는지 보여 드리겠습니다.

SendGrid 계정 설정 방법

첫 번째 단계는 SendGrid에 등록하고 계정을 설정하는 것입니다. 이 튜토리얼의 목적상 프리 티어면 충분합니다.

애플리케이션을 확장함에 따라 플랫폼을 통해 사용 가능한 이메일 한도를 늘려야 할 수도 있습니다.

SendGrid에서 전용 IP 주소를 설정하는 방법

기본적으로 SendGrid는 이메일을 보낼 때 공유 IP 주소를 사용합니다. 이는 소규모 이메일 애플리케이션에 적합할 수 있지만 전송 속도를 높이면 전용 IP 주소를 설정해야 합니다.

이는 귀하의 "발신자 평판"(SendGrid에서 이메일 서비스 제공업체와의 관계를 평가하는 데 사용하는 지표)이 동일한 IP를 공유하는 다른 사용자의 행동에 의해 부정적인 영향을 받지 않기 때문에 좋은 생각입니다.

전용 IP를 설정하려면 측면 탐색 메뉴에서 "설정" 옵션을 선택한 다음 "IP 주소"를 선택합니다. 그러나 간단한 참고 사항:이 옵션은 프리 티어에서 사용할 수 없습니다.

유료 요금제에 따라 이미 하나의 전용 IP 주소가 설정되어 있을 수 있습니다. IP 주소가 없거나 더 추가하려는 경우 "IP 주소 추가" 버튼을 선택하여 새 IP를 구성할 수 있습니다.

IP 주소 설정 메뉴

SendGrid에서 이메일 발신자를 인증하는 방법

참고:이메일에 맞춤 도메인을 사용하는 경우 이 섹션을 건너뛸 수 있습니다.

개인 이메일 주소에서 이메일을 보내려면 이메일 주소가 본인 소유인지 확인해야 합니다.

왼쪽 메뉴에서 "설정"을 선택한 다음 "발신자 인증"을 선택하십시오. "단일 발신인 확인"을 선택하여 하나의 이메일 주소를 추가하는 과정을 살펴보세요.

단일 발신인 옵션

SendGrid에서 사용자 정의 도메인을 인증하는 방법

참고:이메일에 맞춤 도메인을 사용하지 않는 경우 이 섹션을 건너뛸 수 있습니다.

사용자 정의 메일 도메인에서 이메일을 보내려면 SendGrid로 해당 도메인을 인증해야 합니다. 이 화면으로 이동하려면 설정 메뉴를 다시 선택한 다음 "발신자 인증"을 선택하십시오.

발신인 인증 설정 메뉴

그러면 "도메인 인증" 옵션이 있는 화면이 표시됩니다. "도메인 인증" 옵션을 선택하면 SendGrid가 DNS 레코드 구성 프로세스를 안내합니다(DNS 제공업체에 따른 특정 지침 포함).

발신자 인증 설정 페이지

SendGrid에서 역방향 DNS를 설정하는 방법

참고:이메일에 맞춤 도메인을 사용하지 않는 경우 이 섹션을 건너뛸 수 있습니다.

역 DNS(도메인 이름 시스템)는 이메일 공급자가 지정된 IP 주소의 소유자를 찾는 데 사용합니다. 이를 설정하면 이메일 제공업체에서 사용자가 이메일을 보낸 IP 주소가 사용자 정의 도메인에 연결되어 있는지 확인할 수 있습니다.

위와 동일한 발신자 인증 화면에서 "역 DNS" 섹션을 볼 수 있습니다. 계정에 있는 각 전용 IP에 대해 역방향 DNS를 구성하는 옵션이 있습니다. 예를 들어 도메인 인증과 같이 SendGrid의 플랫폼에서 이를 설정하는 과정을 안내합니다.

SendGrid에서 이메일 인증을 설정하는 방법

참고:이메일에 맞춤 도메인을 사용하지 않는 경우 이 섹션을 건너뛸 수 있습니다.

주요 이메일 제공업체(예:Gmail, Yahoo 및 Outlook)는 이메일 발신자를 인증하기 위해 SPF, DKIM 및 DMARC와 같은 여러 방법을 사용합니다.

SPF (Sender Policy Framework)는 도메인에서 메일을 보내는 IP 주소가 그렇게 할 수 있는 권한이 있는지 확인합니다.
DKIM (DomainKeys Identified Mail)은 공개 키 문자열을 사용하여 이메일 from 주소가 정확하고 위조/위조되지 않았습니다.
DMARC (도메인 기반 메시지 인증, 보고 및 적합성)은 이메일이 SPF 또는 DKIM 검증에 실패할 때 대응하는 방법을 이메일 제공업체에 알려주는 일련의 지침입니다.

SendGrid의 인증 흐름은 도메인 인증 프로세스의 일부로 SPF 및 DKIM을 설정하는 과정을 안내하지만 DMARC를 수동으로 구성해야 합니다.

DNS 호스팅 제공업체를 방문하여 DNS 관리 설정에 액세스합니다. 거기에서 새 TXT을 추가합니다. 이름이 _dmarc.yourdomain.com인 레코드 (yourdomain.com 대체 사용자 정의 도메인).

GoDaddy와 같은 일부 공급자는 도메인을 레코드에 자동으로 추가합니다. 이 경우 이름은 _dmarc여야 합니다. .

가치 이 레코드의 구조는 다음과 유사해야 합니다.

"v=DMARC1; p=none; pct=100; rua=mailto:dmarc@yourdomain.com"

v=DMARC 사용할 DMARC 규칙의 버전을 나타냅니다(현재 버전 1만 사용 가능).
p=none 이메일이 DKIM 또는 SPF에 실패할 때 이메일 공급자가 취해야 하는 조치를 나타냅니다. 이 설정은 none로 시작해야 합니다. , 이메일 전달 가능성에 영향을 미치지 않도록 합니다. DKIM 및 SPF가 올바르게 구성되었음을 확인한 후 이 값을 quarantine로 업데이트할 수 있습니다. 공급자가 실패한 이메일을 스팸 폴더 또는 reject로 자동 라우팅하도록 하려면 공급자가 실패한 이메일을 거부/반송하도록 합니다.
pct=100 작업을 적용해야 하는 실패한 이메일의 비율을 나타냅니다.
rua=mailto:dmarc@yourdomain.com 집계 보고서를 보낼 이메일 주소입니다. 이 보고서에는 특정 공급자가 수신한 IP의 모든 이메일에 대한 정보가 포함되어 있습니다. dmarc@yourdomain.com 대체 보고서를 받고자 하는 이메일 주소로

SendGrid에서 동적 템플릿을 만드는 방법

오늘 만들 도구는 SendGrid의 동적 템플릿 기능을 사용하여 이메일의 제목과 본문 텍스트를 설정합니다. 이를 설정하려면 측면 탐색 메뉴에서 "Email API" 옵션을 선택한 다음 "Dynamic Templates"를 선택하십시오.

동적 템플릿 설정 메뉴

첫 번째 동적 템플릿을 생성하라는 메시지가 있는 화면이 표시됩니다. "동적 템플릿 만들기" 옵션을 선택합니다.

새 템플릿에 "freeCodeCamp SendGrid Tutorial"이라는 이름을 지정합니다. SendGrid는 이 템플릿을 사용 가능한 템플릿 목록에 추가합니다. Template ID을 보려면 템플릿을 선택하세요. (나중에 도구에 필요하므로 이 점을 기록해 둡니다.) "버전 추가" 버튼을 클릭합니다.

새로 추가된 템플릿 미리보기

나타나는 화면에서 "빈 템플릿"을 선택한 다음 "코드 편집기"를 선택합니다. 이제 편집기 보기가 표시되어야 합니다. SendGrid의 편집기는 HTML을 사용하여 이메일 본문을 작성합니다. 그러나 도구를 작성할 때 일반 텍스트 버전을 보낼 것입니다.

지금은 편집기의 내용을 다음 코드로 바꿉니다.

<p>This is a test email used with the freeCodeCamp SendGrid tutorial</p>
<p>Unsubscribe: {{{unsubscribeId}}}</p>

저희 도구는 일반 텍스트 이메일을 전송하므로 추가 HTML 상용구가 필요하지 않습니다.

{{{unsubscribeId}}}이 추가되었음을 알 수 있습니다. . SendGrid의 템플릿은 핸들바를 사용하여 값을 동적으로 대체합니다. 도구를 빌드할 때 이 기능을 활용할 것입니다.

이제 왼쪽 상단에서 설정 옵션을 선택합니다. 선택적으로 템플릿 버전 이름을 지정할 수 있지만 "제목" 필드는 수정하려는 항목입니다. 이 값을 {{{subject}}}으로 설정하십시오. 도구에서 주제 값을 동적으로 로드합니다.

동적 템플릿을 테스트하려면 상단 메뉴에서 "데이터 테스트" 옵션을 선택합니다. 이 JSON 데이터를 편집기에 삽입하십시오.

{
    "unsubscribeId": "1",
    "subject": "Testing emails!"
}

JSON은 키를 따옴표로 묶어야 한다는 것을 기억하십시오!

이제 화면 오른쪽의 미리보기가 템플릿의 이러한 값을 반영하는 것을 볼 수 있습니다. Save를 누르세요. 버튼을 눌러 변경 사항을 저장하세요!

템플릿 값의 동적 로드를 보여주는 편집기 및 미리보기 화면

SendGrid에서 API 키를 생성하는 방법

SendGrid 계정 구성의 마지막 단계는 도구에서 사용할 API 키를 생성하는 것입니다.

기본 SendGrid 페이지로 돌아가려면 왼쪽 상단의 뒤로 화살표를 클릭합니다. 그런 다음 "설정" 및 "API 키"를 선택합니다. "API 키 생성"을 선택하여 새 키를 생성합니다. 선택적으로 키에 "전체 액세스"를 부여할 수 있지만 이 자습서에서는 "메일 보내기" 액세스만 필요합니다.

이 화면에 다시 액세스할 때 목적을 기억할 수 있도록 키에 설명이 포함된 이름을 지정해야 합니다. 권한을 구성했으면 '만들기 및 보기'를 선택하여 키를 생성합니다. 다시 볼 수 없으므로 안전한 곳에 보관하세요. .

메일 보내기 권한이 활성화된 API 화면 만들기

이메일 도구를 구축하는 방법

이제 실제로 이메일을 보내기 위한 코드를 작성할 시간입니다. 라이브 응용 프로그램의 코드를 볼 수 있지만 이 자습서의 목적을 위해 주로 SendGrid API 사용에 중점을 두도록 약간 축소된 버전을 빌드합니다.

맞춤 이메일 캠페인 스크립트에 필요한 소프트웨어

이 프로젝트를 사용하려면 다음 도구가 설치되어 있어야 합니다.

Node.js - LTS 버전 권장
VSCode 또는 Atom과 같은 IDE

선택적으로 git을 원할 수도 있습니다. 버전 관리를 위해.

라이브 도구는 MongoDB Atlas 클러스터를 사용하지만 자습서 예제에서는 사용하지 않습니다. MongoDB에 익숙하지 않다면 freeCodeCamp의 커리큘럼에 MongoDB 설정 및 사용에 대한 훌륭한 섹션이 포함되어 있습니다.

프로젝트 초기화 방법

이 프로젝트에서 작업할 디렉터리(폴더)를 만듭니다. 그런 다음 선택한 편집기와 터미널을 사용하여 해당 폴더를 엽니다.

시작하려면 이것을 노드 프로젝트로 설정해야 합니다. 가장 빠른 방법은 npm init을 사용하는 것입니다. 당신의 터미널에서. package.json 생성 과정을 안내합니다. Node 애플리케이션의 핵심 파일입니다.

기본값은 애플리케이션에 대해 잘 작동하지만 scripts을 수정하려고 합니다. 섹션:

  "scripts": {
    "build": "tsc",
    "send": "node ./prod/send.js"
  },

npm init test를 생성합니다. 스크립트 - 이것은 우리 프로젝트에서 제거될 수 있습니다.

build 스크립트는 TypeScript를 JavaScript로 컴파일하는 데 사용되며 send 스크립트가 우리의 애플리케이션을 실행할 것입니다.

다음으로 TypeScript를 설치하고 설정합니다. TypeScript에 익숙하지 않다면 본질적으로 더 강력한 유형 정의와 컴파일 시간 오류 검사를 포함하는 JavaScript의 상위 집합입니다.

프로젝트에 TypeScript를 설치하려면 npm install --save-dev typescript를 실행하세요. 당신의 터미널에서. (--save-dev 플래그는 이를 개발 종속성으로 저장합니다. 런타임에 TypeScript가 필요하지 않으므로 프로덕션 환경에서 정리할 수 있습니다.

TypeScript는 JavaScript 파일을 생성할 때 따라야 하는 규칙을 설정하기 위해 자체 구성 파일이 필요합니다. 프로젝트의 루트 디렉터리에 tsconfig.json이라는 파일을 만듭니다. 다음을 삽입하십시오:

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "outDir": "./prod",
      "rootDir": "./src"
    }
  }

튜토리얼 저장소를 보면 추가 excludes 재산. 이 값은 튜토리얼 파일 구조에 따라 다르며 필요하지 않습니다.

간결함을 위해 이러한 구성 설정에 대해서는 자세히 다루지 않습니다. 추가 정보를 원하시면 TypeScript에 매우 자세한 문서가 있습니다.

git을 사용하는 경우 버전 제어 및 저장소(예:GitHub)에 업로드하려면 .gitignore를 생성해야 합니다. 프로젝트의 루트 디렉토리에 있는 파일. 이 파일에는 다음이 포함되어야 합니다.

/node_modules/
.env
/prod/

/node_modules/ 설치된 패키지를 무시합니다. 이는 버전 관리 작업 시 모범 사례로 간주됩니다.
.env 환경 변수 파일을 무시합니다. 이것은 절대하지 않기 때문에 매우 중요합니다. 귀하의 비밀을 저장소에 커밋하고 싶습니다.
/prod/ 컴파일된 JavaScript 파일을 무시합니다. 또한 이 폴더를 이메일 목록에 사용할 것이므로 실수로 개인 식별 정보를 커밋하지 않도록 하는 것이 중요합니다.

.env 생성 루트 프로젝트 디렉토리에 있는 파일. 이 파일을 통해 다음 환경 변수를 로드합니다.

SENDGRID_API_KEY=
SENDGRID_FROM=
SENDGRID_TEMPLATE_ID=

MAIL_SUBJECT=

값을 입력할 때 큰따옴표로 묶어야 합니다. 또한 = 주위에 공백이 없어야 합니다. 서명!

SENDGRID_API_KEY 이전 단계에서 생성한 API 키여야 합니다.
SENDGRID_FROM 귀하의 이메일 주소여야 합니다(이것은 from에 사용된 주소입니다. 필드).
SENDGRID_TEMPLATE_ID id이어야 합니다. 이전에 생성한 동적 템플릿의 문자열입니다.
MAIL_SUBJECT 보내는 이메일의 제목이 됩니다. 지금은 "fCC Tutorial Email"로 설정하세요.

마지막으로 src를 만듭니다. 루트 프로젝트 디렉토리에 폴더를 만들고 send.ts을 만듭니다. 해당 폴더의 파일입니다.

종속성 설치 방법

먼저 sendgrid을 설치해야 합니다. Node.js 패키지. 이 패키지는 SendGrid API의 래퍼 역할을 하며 이메일을 보내기 위해 API를 호출하는 프로세스를 간소화합니다. npm install @sendgrid/mail 실행 이 패키지를 설치합니다.

그런 다음 몇 가지 개발 종속성이 필요합니다. npm install --save-dev dotenv @types/node 실행 .

dotenv .env에서 환경 변수를 로드할 수 있습니다. 파일을 로컬에 저장합니다.
@types/node Node.js에 대한 유형 정의를 제공합니다. - TypeScript는 이러한 정의에 의존하여 내장 메소드 및 함수의 구조를 이해합니다.

논리 작성 방법

이제 /src/send.ts에서 작업할 것입니다. 파일 - 앱 로직의 대부분을 빌드하는 곳입니다. 패키지에서 필요한 값을 가져오는 것부터 시작하겠습니다.

먼저 dotenv을 로드하려고 합니다. 환경 변수를 패키지하고 구문 분석합니다.

import dotenv from "dotenv";
dotenv.config();

dotenv 로컬 개발에만 필요 - Heroku 및 Repl.it과 같은 대부분의 온라인 호스트는 기본적으로 환경 변수를 처리할 수 있습니다.

dotenv.config() 호출은 .env을 읽습니다. 파일을 만들고 값을 process.env에 로드합니다. 노드 개체입니다.

다음으로 SendGrid 패키지에서 필요한 모듈을 가져옵니다.

import sgMail, { MailDataRequired } from "@sendgrid/mail";

TypeScript는 자동으로 항목을 가져올 수 있지만 수동 가져오기를 연습하는 것이 좋습니다.

sgMail 기본 API 래퍼이고 MailDataRequired 필요한 유형 정의입니다.

마지막으로 파일을 처리하기 위해 몇 가지 기본 제공 Node 기능을 가져옵니다.

import path from "path";
import { createWriteStream, readFile } from "fs";

{ 구문 }은 패키지에서 특정 모듈을 가져오기 위한 것입니다.

path 상대 경로가 있는 이메일 목록 파일을 찾는 데 사용됩니다.
fs 해당 파일을 읽고 쓰는 데 사용됩니다.

논리 구축을 시작할 시간입니다! 우리 애플리케이션은 .env에 설정될 몇 가지 필수 값에 의존합니다. 파일이므로 해당 변수가 올바르게 설정되었는지 확인하는 것으로 시작해야 합니다. 누락된 항목이 있는 경우 이메일을 보낼 때 오류가 발생하지 않도록 애플리케이션이 일찍 종료되기를 바랍니다.

// Here we check for a valid API key
const apiKey = process.env.SENDGRID_API_KEY;
if (!apiKey) {
  console.error("Missing SendGrid Key");
  process.exit(1);
}

// Here we check for a valid from address
const fromAddress = process.env.SENDGRID_FROM;
if (!fromAddress) {
  console.error("Missing sender email address!");
  process.exit(1);
}

// Here we check for a dynamic template ID
const sgTemplate = process.env.SENDGRID_TEMPLATE_ID;
if (!sgTemplate) {
  console.error("Missing SendGrid Template ID");
  process.exit(1);
}

// Here we check for the mail subject, but if it is missing
// we do not need to exit. Instead we use a fallback value.
const subjectValue = process.env.MAIL_SUBJECT || "Fallback value - check your env!";

|| 구문은 process.env.MAIL_SUBJECT 정의되지 않았거나 거짓인 경우 대신 문자열을 사용하십시오.

process.exit(1) 각 조건 검사에서 볼 수 있는 호출은 1 종료 코드로 프로세스(우리 애플리케이션)를 종료하도록 노드에 지시합니다. . 이는 이러한 검사 중 하나가 실패하여 애플리케이션이 충돌했음을 나타냅니다.

SendGrid를 사용하려면 API 키를 설정해야 합니다. 환경 변수 논리 아래에 키를 설정하는 함수 호출을 추가합니다.

// Here we set the SendGrid API key
sgMail.setApiKey(apiKey);

계속 진행하기 전에 npm run build을 실행하세요. 터미널에서 - prod이 생성됩니다. 컴파일된 JavaScript가 포함된 폴더입니다. 이제 다음 파일 구조가 표시됩니다.

튜토리얼의 이 지점에 대한 파일 트리

이 시점에서 git을 사용하는 경우 확실히 prod 폴더는 저장소에 커밋되지 않습니다.

prod 내 폴더에서 validEmails.csv 생성 파일. 우리 앱은 이 파일을 사용하여 이메일 목록을 읽습니다. 다음 내용으로 파일을 초기화합니다(your@email.com 대체 실제 이메일 주소로):

email,unsubscribeId
your@email.com,1
iama@fake.email,2

.csv 파일에는 쉼표 주위에 공백이 없습니다.

이제 이것을 이메일 목록으로 구문 분석하는 코드를 작성할 수 있습니다! src/send.ts에서 파일에 다음 코드를 추가하세요.

// Here we concatenate our file path for the valid email file
const filePath = path.join(__dirname + "/../validEmails.csv");

// This is where we start reading the file!
readFile(filePath, "utf8", (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data)
});

이 과정에서 ES6 화살표 함수 구문을 사용합니다. function을 사용할 수 있습니다. 원하는 경우 대신 선언합니다.

이제 npm run build를 실행하면 및 npm run send validEmail.csv의 내용이 표시되어야 합니다. 터미널에 있는 파일. 원하는 경우 이 시점까지의 현재 진행 상황을 볼 수 있습니다.

엄청난! 이제 문자열을 반복하고 이메일 메시지를 작성할 수 있도록 해당 문자열을 객체 배열로 구문 분석해야 합니다. 콜백 기능 업데이트:

// This is where we start reading the file!
readFile(filePath, "utf8", (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    
  // Here we parse the data into an object array
  const emailList = data
    .split("\n")
    .slice(1)
    .map((el) => {
      const [email, unsubscribeId] = el.split(",");
      return { email, unsubscribeId };
    });
});

[email, unsubscribeId] 분할 배열의 값을 두 변수에 할당하기 위해 구조 분해를 적용합니다.

.split("\n") 줄바꿈으로 문자열을 나눕니다. 참고 :Windows를 사용하는 경우 validEmails.csv에 대한 줄 끝 설정을 변경해야 할 수 있습니다. CRLF에서 LF으로 (Windows는 데이터 처리에 영향을 미치는 추가 줄바꿈 문자를 삽입합니다.)
.slice(1) 해당 배열의 첫 번째 요소를 제거합니다(우리의 email,unsubscribeId 라인).
우리의 map 함수는 각 email,unsubscribeId를 변환합니다. 문자열을 {email, unsubscribeId}으로 개체.

이 구문 분석 함수의 최종 결과는 email이 있는 객체 배열입니다. 및 unsubscribeId 속성 - 문자열보다 작업하기가 훨씬 더 부드럽습니다.

파싱 함수의 출력 예

이제 이메일을 보낼 차례입니다. 구문 분석 기능 아래(그러나 여전히 readFile 콜백) 반복 메서드에 대한 구조를 추가합니다. 배열의 각 값에 액세스하려고 하므로 .forEach을 사용합니다. 접근합니다.

  // Here we iterate through the emailList array
  emailList.forEach((user) => {});

user 매개변수는 {email, unsubscribeId}입니다. 물체. 우리는 그것을 user이라고 불렀습니다. 전체 애플리케이션에서 freeCodeCamp userdata 개체를 나타내기 때문입니다.

.forEach에 대한 콜백 내 , 우리는 SendGrid API가 기대하는 메시지 객체를 생성할 수 있습니다.

  // Here we iterate through the emailList array
  emailList.forEach((user) => {

    // This is the message object SendGrid needs
    const message: MailDataRequired = {
        to: user.email,
        from: fromAddress,
        subject: subjectValue,
        text: "This goes away!",
        templateId: sgTemplate,
        dynamicTemplateData: {
            subject: subjectValue,
            unsubscribeId: user.unsubscribeId
        }
    }
    
  });

계속 진행하기 전에 이 메시지 개체를 더 자세히 살펴보겠습니다. MailDataRequired 이전에 가져온 것이 여기에서 유형 정의로 사용되므로 TypeScript는 필요한 속성을 놓치는 경우 경고할 수 있습니다. 고맙게도 필요한 모든 속성이 있습니다. 하지만 무엇을 의미합니까?

to: 메시지를 보낼 이메일 주소입니다. 이것은 email입니다. validEmails.csv의 각 줄에서 파일
from: 메시지를 보낼 이메일 주소입니다. 이것은 .env에 설정되어 있습니다. 더 일찍(귀하의 이메일 주소).
subject: 이 필드는 필수는 아니지만 동적 템플릿이 주제를 올바르게 구문 분석하지 못하는 경우를 대비하여 대체 값을 제공합니다.
text: 이 텍스트 값은 템플릿으로 덮어씁니다. 그러나 여전히 사용하는 것이 중요합니다. SendGrid는 이메일을 plaintext로 보낼 수 있습니다. 또는 html - text 사용 html 대신 속성 속성에서 템플릿이 plaintext로 전송되도록 합니다. . 이메일 제공업체는 가능성이 더 높습니다. HTML 메시지를 스팸으로 플래그 지정하여 전송률을 높이는 데 도움이 됩니다.
templateId: SendGrid가 이메일에서 사용해야 하는 동적 템플릿의 ID입니다.
dynamicTemplateData: 이전에 동적 템플릿에서 설정한 핸들바 문자열에 해당하는 값입니다.

엄청난! 우리의 다음 단계는 이 구성된 메시지를 받아 보내는 것입니다. 메시지 개체 아래(그러나 여전히 .forEach 콜백), 전송 호출을 추가해 보겠습니다.

    // Here we send the message we just constructed!
    sgMail.send(message);

그러면 validEmails.csv의 각 이메일로 메시지가 전송됩니다. . 불행히도 코드는 자동으로 실행되며 각 전송이 성공했는지 여부를 알 수 없습니다. 오류 처리를 추가해 보겠습니다.

.send() 호출은 약속을 반환하므로 .then().catch()를 사용할 수 있습니다. 반환을 처리합니다.

    // Here we send the message we just constructed!
    sgMail.send(message)
        .then(() => {
            // Here we log successful send requests
            console.info(`Message send success: ${user.email}`)
        }).catch((err) => {
            // Here we log errored send requests
            console.error(err);
            console.error(`Message send failed: ${user.email}`)
        });

async/await를 사용할 수도 있지만 이것은 .then.catch가 더 명확한 경우입니다.

이제 npm run build를 실행하면 및 npm run send 받은 편지함에 멋진 이메일이 표시되어야 합니다!

이 시점에서 이제 기능적인 이메일 전송 애플리케이션이 생겼습니다. 축하합니다! 원하는 경우 이 시점까지의 진행 상황을 볼 수 있습니다.

반송된 이메일을 처리하는 방법과 전송 실패에 대한 추가 논리를 알아보려면 계속 읽으십시오. 이에 대해서는 다음에 논의할 것입니다.

SendGrid에서 반송된 이메일을 처리하는 방법

iama@fake.email 실제 이메일 주소가 아닙니다. SendGrid는 전날의 활동에 대해 매일 반송된 보고서를 생성합니다.

반송된 모든 이메일은 SendGrid 평판을 손상시키고 이메일 공급자가 귀하의 메일을 스팸으로 표시할 수 있습니다. 따라서 알려진 수신 거부 주소로 보내는 것을 방지하는 로직을 추가해야 합니다.

bouncedEmails.csv를 생성하여 시작합니다. prod의 파일 폴더(validEmails.csv 옆에 있어야 함) ). unsubscribeId은 필요하지 않습니다. 값이 여기에 있으므로 다음과 같이 초기화하십시오.

email
iama@fake.email

시연 목적으로 가짜 이메일을 추가했습니다.

이제 send.ts로 돌아가십시오. 파일. 38행에서 기존 filePath 바로 아래 선언, 새 bouncedEmails.csv의 경로 구성 파일.

// Here we concatenate our file paths for the CSV files
const filePath = path.join(__dirname + "/validEmails.csv");
const bouncePath = path.join(__dirname + "/bouncedEmails.csv");

__dirname은 이 파일의 현재 디렉토리를 나타냅니다(이 경우 send.ts 파일).

엄청난! 이제 그 파일을 읽어야 합니다. 이러한 파일 경로 선언 바로 아래(기존 readFile call), 바운스된 파일을 읽기 위한 로직을 추가합니다.

// Read through the bounce list, parse into array
readFile(bouncePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  bounceList = data.split("\n").slice(1);

readFile 비동기식이므로 모든 기존 전송 로직을 콜백 함수로 래핑해야 합니다. . 닫는 }) 이 콜백은 파일의 맨 끝으로 이동됩니다.

bouncedEmails.csv을 읽습니다. 파일을 새 줄로 분할합니다(줄 끝이 LF인지 확인해야 함을 기억하십시오. ), email 제거 선. 마지막으로 기존 전송 로직을 계속 사용합니다.

우리의 보내기 논리로 돌아갑니다. .forEach 내 기능, 차단된 이메일을 건너뛰는 논리를 추가합니다(불필요한 변수를 생성하지 않도록 메시지 개체를 구성하기 전에 이것을 추가합니다).

  // Here we iterate through the emailList array
  emailList.forEach((user) => {
    // Here we check if the email has been bounced
    if (bounceList.length && bounceList.includes(user.email)) {
        console.info(`Message send skipped: ${user.email}`);
        return;
    }

bounceList.csv인 경우 파일이 비어 있습니다. includes 호출 오류가 발생합니다. 그래서 우리는 .length 가치를 최우선으로 합니다.

초기 return 활용 문에서 특정 .forEach를 종료합니다. bounceList일 때 반복 해당 이메일을 포함합니다. 이렇게 하면 이전에 반송된 이메일 주소로 전송을 시도하는 것을 방지할 수 있습니다. 이제 npm run build를 실행하면 및 npm run start , 터미널에 다음 출력이 표시되어야 합니다.

건너뛴 이메일 및 성공한 이메일에 대한 콘솔 출력의 예

현재까지의 진행 상황을 확인하십시오.

SendGrid에서 실패한 이메일을 캡처하는 방법

현재 이메일이 전송되지 않으면 애플리케이션에서 오류를 기록합니다. 이것은 소규모 사용 사례에서 작동할 수 있지만 애플리케이션을 확장함에 따라 이러한 실패를 식별하고 다시 전송을 시도하는 것이 점점 더 어려워집니다.

하지만 대신 애플리케이션이 해당 이메일을 새 파일에 저장하도록 할 수 있습니다.

failedEmails.csv 생성 prod의 파일 폴더. 이 파일은 비어 있을 수 있습니다. 헤더 행을 추가하는 코드를 작성합니다.

send.ts로 돌아가기 파일에서 38행의 경로 선언으로 이동합니다. 새로운 failedEmails.csv에 대해 하나 더 추가해 보겠습니다. :

// Here we concatenate our file paths for the CSV files
const filePath = path.join(__dirname + "/validEmails.csv");
const bouncePath = path.join(__dirname + "/bouncedEmails.csv");
const failedPath = path.join(__dirname + "/failedEmails.csv");

다른 경로와 달리 이 경로는 write에 사용됩니다. 작업. 이메일이 처리되는 동안 계속 쓰기를 원하기 때문에 스트림을 생성해야 합니다. 이 경로 선언 바로 아래에 해당 스트림을 만들고 초기 헤더 행을 추가해 보겠습니다.

// Here we create our write stream for failed emails
const failedStream = createWriteStream(failedPath);

// Here we add the header row
failedStream.write("email,unsubscribeId\n")

이 새로운 스트림을 통합하기 위해 오류 처리 로직을 개선할 시간입니다. 다른 write을 추가해야 합니다. send의 오류 처리에 대한 작업 전화하세요.

    // Here we send the message we just constructed!
    sgMail
      .send(message)
      .then(() => {
        // Here we log successful send requests
        console.info(`Message send success: ${user.email}`);
      })
      .catch((err) => {
        // Here we log errored send requests
        console.error(err);
        console.error(`Message send failed: ${user.email}`);
        // And here we add that email to the failedEmails.csv
        failedStream.write(`${user.email},${user.unsubscribeId}\n`)
      });

스크립트가 실행되는 동안 피드백을 볼 수 있도록 콘솔 문을 보존하려고 합니다.

이렇게 하면 email이 작성됩니다. 및 unsubscribeId 새로운 failedEmails.csv으로 적절한 형식으로 - 해당 데이터를 validEmails.csv에 복사할 수 있습니다. 다시 전송을 시도합니다.

축하합니다! 이제 이메일 폭발을 보내기 위한 성공적이고 완전한 기능의 도구를 구축했습니다. 작업 확인을 원하시면 완성된 코드를 보실 수 있습니다. 하지만 "있으면 좋은" 몇 가지 선택적 기능에 대해 계속 읽으십시오.

이메일 도구의 선택적 기능

우리 도구는 CLI 기반이기 때문에(즉, 명령줄 인터페이스 또는 터미널에서 사용됨) 사용자 피드백이 많지 않습니다. 일부 추가 콘솔 기능을 활용하여 스크립트 진행 상황에 대한 추가 정보를 제공할 수 있습니다.

몇 가지 "검사점"을 추가하는 것으로 시작하겠습니다. 환경 변수 유효성 검사 전에 스크립트가 시작되었고 변수를 확인하고 있다는 메시지를 인쇄해 보겠습니다.

console.info('Script started. Validating environment variables...')

console.info는 이것이 정보 메시지임을 나타냅니다.

그런 다음 유효성 검사 후 성공 메시지를 인쇄할 수 있습니다.

// Here we set the SendGrid API key
sgMail.setApiKey(apiKey);

console.info('Variables confirmed!')

반송된 파일을 읽는 함수 내에서 시작, 실패 및 성공에 대한 몇 가지 메시지를 추가할 수 있습니다.

console.info('Reading bounced email list...')

// Read through the bounce list, parse into array
readFile(bouncePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    console.error('Failed to read bounced emails!')
    process.exit(1);
  }
  bounceList = data.split("\n").slice(1);

console.info('Bounced emails read!')

유효한 이메일 목록도 마찬가지입니다.

console.info('Reading send list...')
// This is where we start reading the file!
readFile(filePath, "utf8", (err, data) => {
  if (err) {
    console.error(err);
    console.error('Failed to read send list!')
    return;
  }

이제 작업이 완료되면 메시지가 인쇄되는 것이 매우 좋습니다. 그러나 console.info을 추가하면 .forEach 이후 루프를 실행하면 실제로 이전이 인쇄됩니다. 이메일 전송이 완료되었습니다!

.send 때문입니다. 메서드는 네트워크 호출을 생성하고 Promise를 반환하며 해당 Promise는 반복이 완료되기 전에 해결/거부되지 않았을 수 있습니다.

따라서 대신에 우리가 보낸 이메일 수와 총 이메일 수를 추적하는 카운터를 만들 수 있습니다. .forEach 직전 루프에서 다음 변수를 추가합니다.

    // Here we create variables for counting
    const emailTotal = emailList.length;
    let emailCount = 0;

변수에 .length를 할당하면 각 반복에서 읽을 필요가 없습니다.

반송된 이메일을 건너뛰더라도 처리된 것으로 간주하려고 합니다.

  // Here we iterate through the emailList array
  emailList.forEach((user) => {
    // Here we check if the email has been bounced
    if (bounceList.includes(user.email)) {
      console.info(`Message send skipped: ${user.email}`);
      emailCount++;
      if (emailCount === emailTotal) {
        console.info(
          `Sending complete! Sent ${emailTotal} emails. Have a nice day!`
        );
        return;
      }
    }

마지막으로 우리가 보낸 이메일이 마지막 이메일인지 확인하는 로직을 추가해야 합니다. 이 논리는 전송 호출에 대한 성공 및 오류 핸들러에 적용됩니다.

    // Here we send the message we just constructed!
    sgMail
      .send(message)
      .then(() => {
        // Here we log successful send requests
        console.info(`Message send success: ${user.email}`);
        // Here we handle the email counts
        emailCount++;
        if (emailCount === emailTotal) {
          console.info(
            `Sending complete! Sent ${emailTotal} emails. Have a nice day!`
          );
        }
      })
      .catch((err) => {
        // Here we log errored send requests
        console.error(err);
        console.error(`Message send failed: ${user.email}`);
        // And here we add that email to the failedEmails.csv
        failedStream.write(`${user.email},${user.unsubscribeId}\n`);
        // Here we handle the email counts
        emailCount++;
        if (emailCount === emailTotal) {
          console.info(
            `Sending complete! Sent ${emailTotal} emails. Have a nice day!`
          );
        }
      });

그것으로 우리 앱은 완전히 완성되었습니다! npm run build을 실행하면 및 npm run send 스크립트를 사용하면 터미널에 다음 출력이 표시되어야 합니다.

완성된 애플리케이션의 콘솔 출력 예시

다음과 유사한 이메일을 몇 번 받았을 것입니다.

테스트 이메일 결과 샘플 이미지

여기에서 최종 코드를 보거나 freeCodeCamp용으로 빌드된 확장 버전을 볼 수 있습니다.