AWS SES, Lambda 및 API Gateway를 사용하여 사이트에서 이메일을 수신하는 방법 문의 양식

저는 최근에 이메일을 공유하지 않고 웹사이트를 통해 이메일을 받기를 원하는 고객을 위해 간단한 방문 페이지 웹사이트를 구축하고 있었습니다.

솔직히 말해서, 나는 전에 그 기능을 직접 구현해 본 적이 없었습니다. 저는 항상 앵커 태그와 mailto이 있는 간단한 "문의하기" 버튼을 사용하는 데 익숙했습니다. href에서 다음과 같은 속성:

<button>
	<a href="mailto:myemail@example.com">Contact Me</a>
</button>

그러나 이 접근 방식에는 두 가지 불편한 점이 있습니다.

메시지를 보내려는 사용자와 메시지를 받는 사이트 소유자가 서로 이메일을 공유하도록 합니다. 일부 사용자에게는 괜찮지만 개인 정보 보호에 관심이 있는 개인에게는 적합하지 않습니다.
사이트 방문자의 경우 링크를 클릭하면 장치에서 기본 메일 프로그램이 강제로 열리므로 답답할 수 있습니다. 만약 그들이 공용 컴퓨터를 사용한다면? 로그인하지 않은 경우 어떻게 합니까? 단순히 메일 프로그램을 사용하고 싶지 않다면 어떻게 해야 합니까?
예, 기술적으로 그들은 수신자의 이메일 주소를 잡고 브라우저를 통해 또는 로그인한 모든 곳에서 메시지를 보낼 수 있습니다. 그러나 이러한 모든 추가 단계와 장애물은 사용자가 메시지를 보내는 것을 방해할 수 있으며 비즈니스에서 잠재적인 피드백을 잃을 수 있습니다. 기회.

이러한 이유로 우리는 사용자가 단순히 메시지를 작성하고 제출을 클릭하여 웹사이트를 떠나지 않고도 사이트 소유자에게 이메일을 보낼 수 있는 이메일 양식을 사용하기로 결정했습니다.

빠른 Google 검색을 통해 웹사이트에 포함할 수 있는 타사 도구/위젯이 있음을 알 수 있지만 대부분은 브랜드화되어 있으며 전체 사용자 정의를 위해 유료 구독이 필요합니다.

그리고 플러그인이 내장된 WordPress와 같은 CMS를 사용하지 않는 한 반복되는 불편한 비용입니다.

대신 내가 모든 권한을 가질 수 있도록 해당 기능을 직접 코딩하기로 했습니다.

이 가이드의 목적을 위해 HTML 및 AWS 서비스를 사용하여 해당 기능을 구현하기 위해 취한 단계를 다시 만들 것입니다.

HTML 양식

여기서는 매우 간단하게 유지하고 원하는 기능을 테스트하기 위해 CSS가 없는 기본 HTML 양식을 사용하겠습니다.

<h2>Contact Us</h2>
<form>
  <label for="name">Name:</label>
  <input name="name" type="text"/><br/><br/>
  <label for="email">Email:</label>
  <input name="email" type="email"/><br/><br/>
  <label for="name">Message:</label>
  <textarea name="message"></textarea><br/><br/>
  <input type="submit"/>
  <div>
    <p id="result-text"></p>
  </div>
</form>

AWS SES, Lambda 및 API Gateway를 사용하여 사이트에서 이메일을 수신하는 방법 문의 양식

여기에 볼 것이 없습니다...

이제 JavaScript로 제출 기능을 처리하려고 합니다.

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // prevent the form submit from refreshing the page
  event.preventDefault()
 
  const { name, email, message } = event.target
  console.log('Name: ', name.value)
  console.log('email: ', email.value)
  console.log('Message: ', message.value)
  
})

이 시점에서 사용자로부터 입력을 받는 양식과 콘솔에 결과를 표시하는 JavaScript 코드가 있습니다.

지금은 그대로 두고 양식 데이터를 수신하고 해당 데이터가 포함된 이메일을 보낼 백엔드 서비스 작업을 시작할 수 있습니다.

백엔드 개요

AWS와 어떤 서비스를 사용하고 어떻게 사용하는지 살펴보겠습니다.

제목에서 언급했듯이 AWS Lambda를 사용합니다. 및 간단한 이메일 서비스 (SES). SES는 호출 시 이메일 메시지를 보낼 수 있는 서버리스 메시징 서비스입니다. AWS Lambda를 사용하면 이벤트에 대한 응답으로 실행할 서버 측 코드를 작성할 수 있습니다.

API 게이트웨이도 사용합니다. 이를 통해 HTTP를 통해 Lambda 함수를 호출할 수 있습니다.

이 경우 양식이 제출되면 다음 워크플로가 발생합니다.

우리 브라우저(JavaScript)는 요청 본문의 양식 데이터를 사용하여 AWS API Gateway에서 지정한 엔드포인트 URL에 대한 게시 요청을 수행합니다.
API 게이트웨이가 이 요청을 검증합니다. 그런 다음 이벤트 매개변수를 수락하는 Lambda 함수를 트리거합니다. API Gateway는 이벤트 매개변수의 body 속성에 양식 데이터를 넣습니다.
우리의 Lambda 함수는 이벤트 본문에서 데이터를 추출한 다음 이 데이터를 사용하여 우리가 보내려는 이메일 본문과 수신자를 구축합니다. 그런 다음 우리 함수는 AWS SDK를 사용하여 이메일 데이터로 SES를 호출합니다.
SES가 sendMail을 받으면 요청 시 이메일 데이터를 실제 텍스트 이메일로 변환하여 AWS 자체 메일 서버를 통해 수신자에게 보냅니다.

이메일이 전송되면 브라우저는 상태 코드 200과 성공 메시지가 포함된 응답을 받게 됩니다. AWS 클라우드의 단계가 실패하면 응답에 500 상태 코드가 표시됩니다.

1단계:SES 설정 방법

실제로 SES부터 시작하여 역순으로 이러한 각 단계를 설정하는 것이 더 쉬울 것입니다.

먼저 AWS 콘솔에서 SES 서비스로 이동한 다음 —> 사이드 메뉴에서 이메일 주소를 클릭하십시오 —> "새 이메일 주소 확인" 버튼을 클릭하십시오.

열리는 대화 상자에서 SES 서비스가 발신자로 지정할 이메일 주소를 입력합니다. 이메일을 보낼 때.

클릭하면 확인할 수 있는 링크가 포함된 이메일이 입력한 이메일 주소로 전송됩니다. 이것은 AWS가 이메일 소유자가 자신의 이메일 주소를 발신자 주소로 사용하는 데 동의한다는 것을 아는 방법입니다.

이메일을 확인할 때까지 SES 이메일 대시보드는 확인 상태를 보류 중으로 유지합니다.

이메일 소유자가 AWS에서 받은 이메일을 열고 그 안에 있는 확인 링크를 클릭하면 확인 상태가 확인됨으로 변경되어야 합니다(변경 사항을 보려면 페이지를 새로고침).

SES를 위해 해야 할 일은 이것이 전부입니다. 선택적으로 목록에서 확인된 이메일을 선택하고 "테스트 이메일 보내기" 버튼을 클릭하여 서비스를 테스트할 수 있습니다. 이렇게 하면 받는 사람의 이메일 주소, 제목, 메시지를 입력하고 보낼 수 있습니다.

전송된 이메일은 AWS 서버에서 서명할 것이며 확인된 주소는 발신인이어야 합니다. 다음과 같아야 합니다.

2단계:Lambda 설정 방법

이제 이것이 가장 재미있는 부분입니다. 양식 데이터를 수신하고 SES를 호출하는 함수를 만들 것입니다.

Lambda 함수의 장점은 연중무휴 서버에서 백엔드 코드를 실행하고 해당 서버를 유지 관리하는 것에 대해 걱정할 필요가 없다는 것입니다. 서버리스입니다. .

그러나 이것이 관련 서버가 없다는 것을 의미하지는 않습니다. AWS는 내부적으로 이를 처리하므로 서버 유지 관리가 아닌 코드 작성에만 집중할 수 있습니다. 또한 함수가 호출된 횟수와 실행하는 데 걸리는 시간에 대해서만 비용이 청구되며 매우 저렴합니다!

IAM 역할 생성 및 구성

람다 함수 작성을 시작하기 전에 IAM 역할을 생성해야 합니다. 함수에 연결하고 SES 서비스를 호출할 수 있는 권한(AWS에서는 정책이라고 함)을 부여합니다.

AWS 콘솔에서 IAM 서비스로 이동 -> 사이드 메뉴에서 정책 클릭 -> "정책 생성" 버튼을 클릭합니다.

정책 생성 페이지에서 JSON 탭으로 이동하여 다음 권한을 붙여넣고 다음을 클릭합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail",
                "ses:SendRawEmail"
            ],
            "Resource": "*"
        }
    ]
}

세 번째 화면에서 정책 이름을 지정하고 "정책 만들기" 버튼을 클릭합니다.

이제 IAM 역할을 생성합니다. 이는 람다에 첨부되고 방금 생성한 권한 정책에 연결됩니다.

IAM 사이드 메뉴에서 역할을 클릭한 다음 "역할 생성" 버튼을 클릭합니다.

역할 생성 화면에서 선택한 유형이 "AWS 서비스"인지 확인하고 Lambda 사례를 선택한 후 "다음:권한" 버튼을 클릭합니다.

다음 화면에서 앞에서 생성한 정책을 이름으로 검색하여 선택한 후 다음을 클릭합니다.

검토 화면에서 기억할 수 있는 역할 이름을 입력한 다음 "역할 만들기"를 클릭하세요.

이제 새로운 람다 함수를 만들 수 있습니다. Lambda 서비스 대시보드로 이동하여 "함수 생성" 버튼을 클릭합니다.

함수 생성 화면에서 함수 이름을 지정하고 "처음부터 작성" 옵션을 선택한 다음 런타임으로 Node.js를 선택합니다.

"기본 실행 역할 변경"에서 "기존 역할 사용" 옵션을 선택한 다음 "기존 역할" 드롭다운에서 이전 단계에서 생성한 역할의 이름을 선택합니다.

마지막으로 "함수 생성" 버튼을 클릭하여 함수를 생성합니다.

코드 작성 및 테스트

편집기에서 index.js 파일(이 파일은 람다가 호출될 때 실행됨)을 열고 해당 내용을 다음 코드로 바꿉니다.

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
  const params = {
    Destination: {
      ToAddresses: ["your@email.com"],
    },
    Message: {
      Body: {
        Text: { 
            Data: `Hello from Lambda!` 
        },
      },
      Subject: { Data: `Message from AWS Lambda` },
    },
    Source: "your@email.com",
  };

  return ses.sendEmail(params).promise()
};

2행에서는 AWS SDK를 사용하고 SES 인스턴스를 생성하고 있습니다. us-east-1을 선택한 이유 그 지역이 내 이메일을 등록하고 확인한 곳이기 때문입니다. . 이메일을 교체하고 이메일을 등록한 AWS 리전을 사용해야 합니다.

이제 이 기능을 테스트하려면 "배포" 버튼을 클릭하십시오. 그런 다음 테스트 버튼 —> 테스트 이벤트 구성을 클릭하면 새 테스트 이벤트를 생성할 수 있는 테스트 구성 대화 상자가 열립니다.

테스트 이벤트 본문 편집기에서 궁극적으로 브라우저 요청에서 오는 것을 모방하는 다음 JSON을 입력합니다. 그런 다음 만들기를 클릭합니다.

{
  "body": {
        "senderName": "Namo",
        "senderEmail": "namo@trains.com",
        "message": "I love trains!"
    }
}

이제 테스트 버튼을 클릭하면 방금 만든 테스트가 실행됩니다. 편집기에서 새 탭을 열어 함수 실행으로 생성된 로그를 표시해야 합니다. 이 로그는 다음과 같아야 합니다.

로그아웃한 이벤트 개체가 테스트 이벤트에서 사용한 본문 데이터와 함께 함수 로그 아래에 표시됩니다.

이 테스트는 내 받은 편지함으로도 이메일을 보냈어야 했습니다. 그런 일이 발생했는지 봅시다.

네, 예상대로입니다. 그리고 그것은 테스트를 실행한 직후에 일어났습니다.

이제 테스트 데이터에서 더 의미 있는 메시지를 얻기 위해 함수 코드를 수정해 보겠습니다.

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
	// Extract the properties from the event body
  const { senderEmail, senderName, message } = JSON.parse(event.body)
  const params = {
    Destination: {
      ToAddresses: ["the.benhawy@gmail.com"],
    },
		// Interpolate the data in the strings to send
    Message: {
      Body: {
        Text: { 
            Data: `You just got a message from ${senderName} - ${senderEmail}:
            ${message}` 
        },
      },
      Subject: { Data: `Message from ${senderName}` },
    },
    Source: "the.benhawy@gmail.com",
  };

  return ses.sendEmail(params).promise();
};

API Gateway가 함수를 호출할 때 이벤트 본문에 문자열을 전달한다는 점에 유의하는 것이 중요합니다. 이것이 내가 JSON.parse을 사용하는 이유입니다. event.body에서 JSON으로 변환하고 보낸 사람의 이메일, 이름 및 메시지를 추출합니다. 그런 다음 문자열 보간을 사용하여 이메일 본문 텍스트와 제목에 해당 변수를 사용합니다.

테스트를 시도하면 코드에서 오류를 반환합니다. 테스트가 JSON 개체를 event.body에 전달하고 JSON에서 JSON.parse를 사용하기 때문에 JavaScript에서 오류가 발생합니다.

안타깝게도 테스트 편집기에서는 이벤트에 문자열을 전달할 수 없으므로 나중에 다른 곳에서 테스트해야 합니다.

3단계:API 게이트웨이 설정 방법

다음으로 우리가 사용할 마지막 AWS 서비스는 API 게이트웨이로, 이를 통해 브라우저에서 우리가 생성한 Lambda 함수에 HTTP 요청을 보낼 수 있습니다.

람다 함수 페이지를 종료하지 않고 "함수 개요" 섹션을 확장하고 "트리거 추가"를 클릭하십시오.

그런 다음 드롭다운에서 API 게이트웨이를 선택하고 API 유형으로 HTTP API를 선택하고 보안 메커니즘으로 "열기"를 선택하고 CORS 확인란 옵션을 선택합니다. 그런 다음 "추가"를 클릭하십시오.

방금 생성한 새 API 게이트웨이 트리거를 표시하는 함수의 "구성" 탭으로 리디렉션되어야 합니다. 여기에서 API 엔드포인트를 확인하세요. . 이것은 양식 데이터를 사용하여 브라우저에서 호출할 URL입니다.

HTML로 돌아가기

마침내 양식을 테스트하여 이메일이 전송되는지 여부를 확인할 수 있습니다.

양식이 제출될 때 요청 전송을 처리하도록 JavaScript를 수정해 보겠습니다.

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  // prevent the form submit from refreshing the page
  event.preventDefault();

  const { name, email, message } = event.target;

	// Use your API endpoint URL you copied from the previous step
  const endpoint =
    "<https://5ntvcwwmec.execute-api.us-east-1.amazonaws.com/default/sendContactEmail>";
  // We use JSON.stringify here so the data can be sent as a string via HTTP
	const body = JSON.stringify({
    senderName: name.value,
    senderEmail: email.value,
    message: message.value
  });
  const requestOptions = {
    method: "POST",
    body
  };

  fetch(endpoint, requestOptions)
    .then((response) => {
      if (!response.ok) throw new Error("Error in fetch");
      return response.json();
    })
    .then((response) => {
      document.getElementById("result-text").innerText =
        "Email sent successfully!";
    })
    .catch((error) => {
      document.getElementById("result-text").innerText =
        "An unkown error occured.";
    });
});

이제 진실의 순간:양식을 작성하고 제출을 클릭하십시오. 성공 메시지가 표시되면 이메일이 전송되었음을 의미합니다.

메시지가 전송된 이메일을 소유하고 있으므로 받은 편지함을 간단히 살펴보고 양식에 사용한 세부정보가 포함된 이메일을 받았는지 확인합니다.

따라했다면 이제 모든 웹사이트에 연결할 수 있는 "문의하기" 양식이 작동하는 것입니다. 그리고 실제로 사용한 경우에만 비용이 청구됩니다.

나는 당신에 대해 모르지만 이것은 꽤 굉장하고 거의 마술적이라고 생각합니다! 또한 워크플로에서 클라우드 컴퓨팅/서비스를 사용하는 훌륭하고 실용적인 방법입니다.

물론 React 또는 Vue와 같은 프론트엔드에서 프레임워크를 사용하거나 Python 또는 Go와 같은 Lambda용 다른 프로그래밍 언어를 사용하여 이 흐름을 사용자 지정할 수 있습니다.

가기 전에...

여기까지 읽어주셔서 감사합니다! 저는 JavaScript, 클라우드 개발 및 독학 개발자로서의 개인적인 교육 및 전문 경험에 대한 게시물을 씁니다. 따라서 트위터 @adham_benhawy에서 저를 팔로우하여 그들에 대해 트윗하기도 합니다!

자원

https://aws.amazon.com/premiumsupport/knowledge-center/lambda-send-email-ses/
https://docs.aws.amazon.com/lambda/latest/dg/lambda-invocation.html
https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html?icmpid=docs_lambda_console