コンタクトフォームをAESラムダで静的なウェブサイトに加える方法

11476 ワード
lambda aws apex javascript テキストリンク
私はフリーランスの開発者として東京で働いています.一方、私は製品と呼ばれる製品を構築してきたInkdrop . これは、マルチプラットフォームのマークダウンエディタアプリケーションです.私はUIの設計とバックエンドとフロントエンドの構築に取り組んできました.
最近、静的なウェブサイトにメールフォームを作る必要がありました.AWSラムダを使うことにしました.この記事ではどのように私はそれを構築する方法を教えてくれます.これを読むことなく試してみてくださいmy repository on GitHub .

静的ウェブサイトへのサーバサイドロジックの追加に関する一考察


あなたがGitを知っているならば、あなたはServiceGitHub Pages and Netlify . これらのサービスはとても便利です.
「静的」によって、ウェブサイトはHTML、CSSとJavaScriptだけを使用します.PHPのようなサーバサイドロジックを持っていません.
私のホストpersonal website and product website 速くて安定しているNetlifyで、そして、私は本当にそれが好きです..

NetLifyの上で展開されるInkdropの私の製品ウェブページ.
静的なウェブサイトは、ダイナミックな内容を生成することができません.彼らは電子メールを送るような許可を必要とすることをすることができません.しかし、時々あなたはそうしたいです.たとえば、連絡先フォームをホームページに追加します.
問題は、それのためにサーバーを配備するのがoverkillであるということです.それはあなたが訪問者があなたに連絡しようとするときに知らないすべての時間を実行しているサーバーを持っている意味をなさない.
サーバーレスのアーキテクチャは、サーバー側のロジックを静的なウェブサイトに追加するときに便利です.これは、サーバー側スクリプトを実行するときにのみ、それらを必要とすることができます.
例えば、AWS Lambda あなたの関数のリクエスト数とコードが実行される時間に基づいてのみ課金します.それで、訪問客があなたに連絡するのを待っている間、あなたは課金されません.

図A contact form on my homepage (テスト目的のためにメールを送ってください)
私は建てたa simple contact form AWSラムダを使用している私のホームページでは(テスト目的のためにメールを送ってください).オープンソースan example project Githubについて同じAPIを使用してビルドできます.これは、AWSラムダを使用するための良いチュートリアルです.

ラムダに基づいてメール送信APIを構築する



APIアーキテクチャ
APIを呼び出すと、ラムダで動作するスクリプトである関数を呼び出します.ノードをサポートします.デフォルトではJava、Python、JS、C.関数はAmazon SES メールを送信する簡単なメールサービス.ラムダ関数は既定ではインターネットにアクセスできないので、APIゲートウェイを使用して各HTTPエンドポイントを設定する必要があります.
あなたのAPIは、上記の図に示すように、あなたのウェブサイトから呼び出されることができます.

APPEXによるラムダ関数の管理


AWS内のラムダ関数を管理するのは難しいです.Apex ワークフローを簡素化することでこの問題を解決します.それはあなたが構築、展開、および容易にAWSラムダ関数を管理するのに役立ちます.
apexをインストールする
curl https://raw.githubusercontent.com/apex/apex/master/install.sh | sh
ApexはAWS資格情報を必要とします.以下の環境変数を指定しなければなりません.
  • AWS_ACCESS_KEY_ID アカウントアクセスキー
  • AWS_SECRET_ACCESS_KEY アカウント秘密鍵
  • AWS_REGION エリア
    • 参照here Apexを構成する詳細を学ぶには.
    では、このチュートリアルのリポジトリをクローン化することで新しいApexプロジェクトを作成しましょう.
    git clone [[email protected]](mailto:[email protected]):craftzdog/send-email-lambda.git
cd send-email-lambda
apex init
> Project name: send-email
    プロジェクト名send-email . 次に、プロジェクト名に基づいてIAMロールを設定します.そして、あなたは得るproject.json プロジェクトのルートディレクトリで.以下のように編集します:
    {
  "name": "send-email",
  "description": "Simple email transmitter",
  "memory": 128,
  "timeout": 5,
  "environment": {},
  "runtime": "nodejs6.10",
  "role": "<YOUR_IAM_ROLE>"
}
    今すぐラムダを使用する準備が整いました!

    ラムダ関数からのメール送信


    ラムダ関数に電子メールを送信させるには、AWS SESを設定しなければなりません.あなたのメールアドレスを登録する必要があります.
    次のように「このメールアドレスを確認」ボタンを押してSESで確認します.

    あなたの電子メールアドレスをSESに登録すること
    AWSはあなたに検証メールを送ります.それのリンクを開けてください、そして、あなたの電子メールアドレスはSEとラムダを通して電子メールを送るために準備ができています.

    SESを使用するためのラムダ関数の設定


    あなたはファイルをfunctions/submit/function.json 「submit」という名前の関数の設定です.このファイルを編集します
    {
  "environment": {
    "SES_REGION": "us-west-2",
    "FROM_NAME": "Your Contact Form",
    "FROM_EMAIL": "<YOUR_AUTOMATED_EMAIL_SENDER>",
    "TO_EMAIL": "<EMAIL_TO_RECEIVE>"
  }
}
  • SES_REGION : SESのためのAWS領域
  • FROM_NAME : 連絡先フォームのような送信者名
  • FROM_EMAIL : あなたが受け取るメールアドレス.例えば、[email protected]
  • TO_EMAIL : メールを受信するメールアドレス.

    • IAMロールへのアクセス許可を追加する


    Apexプロジェクトに対するIAMの役割は、虐待を防ぐための最小限の許可を持っています.デフォルトでは、SESへのアクセスを制限します.ラムダ関数を使用する許可を追加しましょう.
    IAMダッシュボードに行って、Apexが作成したIAMロールを見つけてください.以下のイメージで役割の名前はcontact-form_lambda_function . あなたの役割はsend-email_lambda_function .

    次のロールポリシーを作成するにはsend-email_submit :
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1504526549000",
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}
    このポリシーは、ラムダ関数を使用してSESを使用します.

    メール送信の配備とテスト


    今すぐあなたのプロジェクトは、電子メールを送信する準備が整いました.テストしましょう.以下のコマンドはラムダ関数を展開します.プロジェクトのルートディレクトリから実行します.
    apex deploy
    次に、以下のコマンドで手動でラムダ関数を実行できます.
    echo -n '{ "subject": "hello", "body": "world" }' | apex invoke submit
    あなたは“こんにちは”と“ボディ”のタイトルで構成されたアドレスに電子メールを受信します.おめでとう!
    メールを受け取っていない場合は、次のコマンドでログを確認してください.
    apex logs -f
    エラーメッセージを読み取り、IAMロールとAWS領域が正しいかどうかを確認します.SESに送付者アドレスを正しく登録するべきです.

    HTTPゲートウェイでHTTP経由で呼び出すことが可能にする


    現在、我々はウェブサイトからラムダ機能を起動したいです.AWS API Gateway 関数のHTTPエンドポイントを作成できます.
    リクエストを受け入れるように設定しましょう/submit とPOST ラムダ関数を呼び出すメソッドです.

    APIを作成する


    APIゲートウェイコンソールに移動し、“APIを作成”ボタンを押します.それは“私の素晴らしい送信メールAPI”または何か好きな名前を付けましょう.

    2 .終了点の作成/送信



    をクリックします➜ リソースを作成する/submit リソースセクションからのリソース.
    その後、“APIゲートウェイを有効にする”チェックします.

    メイクポストメソッド


    エンドポイントを設定する新しいメソッドを定義する/submit 受け入れるPOST アクションを選択する方法➜ "createメソッド"

    上記のようにラムダ関数を起動するように設定します.

    API APIエンドポイント概要

    APIの配備


    をクリックします➜ APIを展開するには、「APIを展開」します.
    これは、Web上でAPIを公開します.

    今APIはあなたのウェブサイトから呼び出すことができます.

    展開結果
    上記のように、Invoke URLはAPIのエントリポイントです.
    を呼び出すことができますcurl コマンド
    curl --request POST \
  --url [https://******.execute-api.us-west-1.amazonaws.com/production/submit](https://qen9yylar9.execute-api.us-west-1.amazonaws.com/production/submit) \
  --header 'content-type: application/json' \
  --data '{
 "subject": "Hello",
 "body": "Hoge"
}'
    電子メールを得たか.それは今働いている!

    オプション:レート制限


    リクエスト数が制限されるように、あなたのAPIに料金制限を設定することをお勧めします.
    上記の画面で「有効な絞り込み」チェックボックスをクリックし、「レート」に1または2の値を指定します.

    あなたのウェブサイトとの統合


    今、あなたはAjaxで呼び出すことができるAPIを持っている.
    ここでは、Fetch API :
    export default function sendEmail (subject, body) {
  return fetch('[https://******.execute-api.us-west-1.amazonaws.com/production/submit'](https://qen9yylar9.execute-api.us-west-1.amazonaws.com/production/submit'), {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ subject, body })
  })
}
    今、あなたがしなければならないすべては、提出されるとき、この機能を起動するJavaScriptでフォームを作ることです.

    動的コンテンツを追加するサーバは必ずしも必要ありません


    ラムダを動的にフォームを簡単に追加できます.これは非常に企業やお店のシンプルなホームページを構築するために便利です.
    Serverlessなアーキテクチャでは、動的コンテンツを生成するWebサイトを構築できます.そして、あまりに多くのお金を使うことなく.たとえば、S 3とラムダでコメントフォームを構築できます.それはとても強力です.
    読書ありがとう.私は私のプロダクトを構築し、フリーランスでの私の経験を共有しているmy blog . あなたが楽しんだならば、それからトップ記事をチェックしてください:
  • How to Price Yourself as a Freelance Developer
  • How I Built a Markdown Editor Earning \$1300/mo Profit — Inkdrop
  • VSCode-like environment with vim + tmux
    • 連絡を取り合うために続いてください!

    JavaScript 3日目
    yumローカルrpmソフトウェアのインストールスキームの詳細