サイトから E メールを受信する方法お問い合わせフォーム AWS SES、Lambda、および API Gateway を使用する

私は最近、メールを共有せずにウェブサイトを通じてメールを受信したいクライアントのために、シンプルなランディングページのウェブサイトを構築していました。

正直なところ、その機能を自分で実装しようとしたことはありませんでした。私はいつも、アンカータグと mailto が付いたシンプルな「お問い合わせ」ボタンに慣れていました。 href でこのような属性:

<button>
	<a href="mailto:[email protected]">Contact Me</a>
</button>

しかし、このアプローチには 2 つの不都合があります:

<オール>

メッセージを送信したいユーザーとメッセージを受信したサイト所有者の両方が、お互いにメールを共有することを強制します。一部の人にとっては問題ありませんが、プライバシーを重視する個人にとっては理想的ではありません。

サイトの訪問者は、リンクをクリックするとデバイスでデフォルトのメールプログラムを開く必要があり、イライラすることがあります。彼らが公共のコンピューターを使用している場合はどうなりますか?ログインしていない場合はどうなりますか?メールプログラムを使いたくない場合はどうすればよいでしょうか。
はい、技術的には、受信者のメールアドレスを取得して、ブラウザまたはログインしている場所からメッセージを送信できます。機会。

このため、ユーザーがメッセージを入力して [送信] をクリックするだけで、Web サイトを離れることなくサイトの所有者にメールを送信できるメールフォームを使用することにしました。

Google で簡単に検索すると、Web サイトに埋め込むことができるサードパーティのツール/ウィジェットがあることがわかりますが、それらのほとんどはブランド化されており、完全なカスタマイズには有料のサブスクリプションが必要です。

また、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>

サイトから E メールを受信する方法お問い合わせフォーム 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 Gateway も使用しますこれにより、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 は、E メールの所有者が E メールアドレスを送信者アドレスとして使用することに同意したことを認識します。

メールを確認するまで、SES メールダッシュボードは確認ステータスを保留中のままにします。

E メールの所有者が AWS から受信した E メールを開き、その中の検証リンクをクリックすると、検証ステータスが検証済みに変わります (ページを更新して変更を確認してください)。

SES で行う必要があるのはこれだけです。必要に応じて、リストで確認済みのメールを選択し、[テストメールを送信] ボタンをクリックして、サービスをテストできます。これにより、受信者の電子メールアドレス、件名、メッセージを入力して送信できます。

送信される E メールは AWS サーバーによって署名され、確認済みのアドレスが送信者になります。次のようになります:

ステップ 2:Lambda のセットアップ方法

今、これが最も楽しい部分です。フォームデータを受け取り、SES を呼び出す関数を作成します。

Lambda 関数の優れた点は、24 時間年中無休でサーバー上でバックエンドコードを実行し、そのサーバーを維持することについて心配する必要がないことです。 サーバーレスです .

しかし、それはサーバーが関与していないという意味ではありません。 AWS が内部でそれを処理するため、サーバーの保守ではなく、コードの記述にのみ集中できます。さらに、関数が呼び出された回数と実行にかかった時間に対してのみ請求され、信じられないほど安価です!

IAM ロールを作成して設定する

ラムダ関数を書き始める前に、IAM role を作成する必要があります関数にアタッチし、SES サービスを呼び出すためのアクセス許可 (AWS ではポリシーと呼ばれます) を付与します。

AWS コンソールから、IAM サービスに移動 —> サイドメニューの [ポリシー] をクリック —> [ポリシーの作成] ボタンをクリックします。

ポリシー作成ページで、[JSON] タブに移動し、次のアクセス許可を貼り付けて、[次へ] をクリックします。

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

3 番目の画面で、ポリシーに名前を付けて、[ポリシーの作成] ボタンをクリックします。

次に、IAM role を作成しますこれはラムダに添付され、作成したパーミッションポリシーにリンクされます。

IAM サイドメニューから [役割] をクリックし、[役割の作成] ボタンをクリックします。

ロール作成画面で、選択したタイプが「AWS サービス」であることを確認し、Lambda ケースを選択してから、[次へ:アクセス許可] ボタンをクリックします。

次の画面で、先ほど作成したポリシーを名前で検索して選択し、[次へ] をクリックします。

レビュー画面で、役割に覚えやすい名前を付けてから、[役割の作成] をクリックします。

これで、新しいラムダ関数を作成できます。 Lambda サービスダッシュボードに移動し、[関数の作成] ボタンをクリックします。

関数作成画面で、関数に名前を付け、[Author from scratch] オプションを選択し、ランタイムとして 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: ["[email protected]"],
    },
    Message: {
      Body: {
        Text: { 
            Data: `Hello from Lambda!` 
        },
      },
      Subject: { Data: `Message from AWS Lambda` },
    },
    Source: "[email protected]",
  };

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

2 行目では、AWS SDK を使用して SES インスタンスを作成していることに注意してください。 us-east-1 を選んだ理由地域は、メールを登録して確認した場所だからです . E メールを必ず置き換えて、E メールを登録した AWS リージョンを使用してください。

この機能をテストするには、[デプロイ] ボタンをクリックします。次に、[テスト] ボタン —> [テストイベントの構成] をクリックします。これにより、新しいテストイベントを作成できるテスト構成ダイアログが開きます。

テストイベント本文エディターで、ブラウザーリクエストから最終的に来るものを模倣した次の JSON を入力します。次に、[作成] をクリックします。

{
  "body": {
        "senderName": "Namo",
        "senderEmail": "[email protected]",
        "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: ["[email protected]"],
    },
		// 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: "[email protected]",
  };

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

API Gateway が関数を呼び出すと、文字列がイベント本文に渡されることに注意してください。これが私が JSON.parse を使う理由です event.body で、それを JSON に変換し、送信者の電子メール、名前、およびメッセージを抽出します。次に、文字列補間を使用して、これらの変数をメール本文テキストと件名で使用します。

テストを試みると、コードはエラーを返します。これは、テストが JSON オブジェクトを event.body に渡し、JSON で JSON.parse を使用しているためです。これにより、JavaScript でエラーが発生します。

残念ながら、テストエディターではイベントに文字列を渡すことができないため、後で別の場所からテストする必要があります。

ステップ 3:API ゲートウェイの設定方法

次に、最後に使用する AWS サービスは API Gateway です。これにより、作成した Lambda 関数にブラウザが HTTP リクエストを送信できるようになります。

ラムダ関数のページを離れずに、[関数の概要] セクションを展開し、[トリガーの追加] をクリックします。

次に、ドロップダウンから API Gateway を選択し、API タイプとして HTTP API、セキュリティメカニズムとして「開く」を選択し、CORS チェックボックスオプションをオンにします。次に、[追加] をクリックします。

関数の [構成] タブにリダイレクトされ、作成したばかりの新しい API Gateway トリガーが表示されます。そこから、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.";
    });
});

では、決定的な瞬間です。フォームに入力して [送信] をクリックしてください。成功メッセージが表示された場合は、メールが送信されたことを意味します。

メッセージが送信されたメールの所有者は私なので、受信トレイをざっと見てみると、フォームで使用した詳細が記載されたメールが自分から届いていることがわかります!

フォローしてきた場合は、「お問い合わせ」フォームが機能しており、どの Web サイトにもプラグインできます。また、実際に使用した分だけ料金が発生します。

あなたのことはわかりませんが、これはかなり素晴らしく、ほとんど魔法のようだと思います!これは、ワークフローでクラウドコンピューティング/サービスを使用する優れた実用的な方法です。

もちろん、React や Vue などのフロントエンドでフレームワークを使用したり、Python や Go などの Lambda 用の別のプログラミング言語を使用するという観点から、このフローをカスタマイズできます。

行く前に...

ここまで読んでくれてありがとう！ JavaScript、クラウド開発、および独学の開発者としての個人的な教育および専門的経験について投稿しています。だから、Twitter @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

メールマガジンの作り方【2021年チュートリアル】 – デザイン、レイアウト、送信

クインシー・ラーソンズ 5 メールに値する時間のかかるリンク – 全リスト

EmailJS を使用して Vue.js アプリケーションからメールを送信する方法
数日前、私は単純な Vue プロジェクトに取り組むことに決め、作成した連絡先からメールを送信する必要がありました。誰かが私の連絡先フォームに記入するたびに、自動化された電子メールを受け取りたいと思っていました。そこで私は検索を開始し、EmailJs にたどり着きました。この記事を書くことにしたのは、彼らのドキュメントが素晴らしく、とても使いやすいと感じたからです。また、それが誰かの助けになることを願っています:) 始めましょう! この記事では、EmailJS を使用して Vuejs アプリケーションからメールを送信する方法を紹介します。続行する前に、Vue CLI を使用してミニ
Mac から暗号化された電子メールを送信する方法
通常、メールの交換は安全な問題であり、プロバイダーは送受信するメールのセキュリティに注意を払っています。ただし、電子メールの暗号化は、使用しているすべての電子メールサービスで利用できるとは限りません。メールの安全性をさらに高めたい場合は、メールアプリで使用することをお勧めします。 Mac を使用している限り、マシンのストックメールアプリから暗号化されたメールを送信できます。組み込みのメールアプリを使用すると、メールを送信する前に暗号化できます。この暗号化プロセスでは、実際には Mac に電子メール証明書をインストールする必要があります。この証明書は、利用可能なオンラインプロ

サイトから E メールを受信する方法 お問い合わせフォーム AWS SES、Lambda、および API Gateway を使用する