質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
AWS Lambda

AWS Lambdaは、クラウド上でアプリを実行できるコンピューティングサービス。サーバーのプロビジョニングや管理を要せず複数のイベントに対してコードを実行します。カスタムロジック用いた他AWSサービスの拡張やAWSの規模やパフォーマンスを用いたバックエンドサービスを作成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1783閲覧

【React】Amplify+Lambda+SES でメール送信したい

Tatsu060314

総合スコア8

AWS Lambda

AWS Lambdaは、クラウド上でアプリを実行できるコンピューティングサービス。サーバーのプロビジョニングや管理を要せず複数のイベントに対してコードを実行します。カスタムロジック用いた他AWSサービスの拡張やAWSの規模やパフォーマンスを用いたバックエンドサービスを作成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/10/27 14:26

したいこと

React+AWS を利用してメール送信機能を実装したいと考えています。

実施したこと

・AWSの東京リージョンでメール検証をしました。
・Amplify に React アプリをホスティングして、メール送信機能を実装しました。
フロントエンド(React)

javascript

1import React, { useState } from "react"; 2import Amplify, { API } from "aws-amplify"; 3import awsconfig from "./aws-exports"; 4 5export default function Email() { 6 Amplify.configure(awsconfig); 7 8 const [name, setName] = useState(""); 9 const [email, setEmail] = useState(""); 10 const [inquiry, setInquiry] = useState(""); 11 12 const handleChange = event => { 13 switch (event.target.name) { 14 case "name": 15 setName(event.target.value); 16 break; 17 case "email": 18 setEmail(event.target.value); 19 break; 20 case "inquiry": 21 setInquiry(event.target.value); 22 break; 23 default: 24 } 25 }; 26 27 const handleSubmit = e => { 28 e.preventDefault(); 29 30 const APIName = "sendEmailAPI"; 31 const path = "/email"; 32 const params = { 33 body: { 34 name: name, 35 email: email, 36 inquiry: inquiry 37 } 38 }; 39 if (inquiry === "" || name === "" || email === "") { 40 window.alert("全項目を入力してください"); 41 return; 42 } 43 console.log("success"); 44 API.post(APIName, path, params); 45 }; 46 47 return ( 48 <form onSubmit={handleSubmit}> 49 <table> 50 <tbody> 51 <tr> 52 <td>お名前</td> 53 <td> 54 <input type="text" name="name" onChange={handleChange} /> 55 </td> 56 </tr> 57 <tr> 58 <td>E mail</td> 59 <td> 60 <input type="text" name="email" onChange={handleChange} /> 61 </td> 62 </tr> 63 <tr> 64 <td>お問い合わせ内容</td> 65 <td> 66 <textarea 67 name="inquiry" 68 rows="5" 69 cols="100" 70 onChange={handleChange} 71 ></textarea> 72 </td> 73 </tr> 74 </tbody> 75 </table> 76 <input type="submit" value="送信"></input> 77 </form> 78 ); 79}

サーバーサイド(Lambda)

javascript

1/* Amplify Params - DO NOT EDIT 2 ENV 3 REGION 4Amplify Params - DO NOT EDIT */ /* 5Copyright 2017 - 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 6Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with the License. A copy of the License is located at 7 http://aws.amazon.com/apache2.0/ 8or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 9See the License for the specific language governing permissions and limitations under the License. 10*/ 11 12/* Amplify Params - DO NOT EDIT 13 14Amplify Params - DO NOT EDIT */ 15 16const AWS = require("aws-sdk"); 17const express = require("express"); 18const bodyParser = require("body-parser"); 19const awsServerlessExpressMiddleware = require("aws-serverless-express/middleware"); 20 21// declare a new express app 22const app = express(); 23app.use(bodyParser.json()); 24app.use(awsServerlessExpressMiddleware.eventContext()); 25 26// Enable CORS for all methods 27app.use(function(req, res, next) { 28 res.header( 29 "Access-Control-Allow-Headers", 30 "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token" 31 ); 32 res.header( 33 "Access-Control-Allow-Methods", 34 "GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD" 35 ); 36 res.header("Access-Control-Allow-Origin", "*"); 37 38 next(); 39}); 40 41/**************************** 42 * Example post method * 43 ****************************/ 44 45app.post("/email", function(req, res) { 46 if (!req.body.name || !req.body.email || !req.body.inquiry) { 47 console.log("req.body.* not found..."); 48 res.status(400).send("More Pamaraters are Required"); 49 return; 50 } 51 52 const params = { 53 Destination: { 54 ToAddresses: ["xxxxxxxxxx@example.com"] 55 }, 56 Message: { 57 Body: { 58 Text: { 59 Charset: "UTF-8", 60 Data: `名前: ${req.body.name} \nメールアドレス: ${req.body.email} \nお問い合わせ内容: ${req.body.inquiry}` 61 } 62 }, 63 Subject: { 64 Charset: "UTF-8", 65 Data: "お問い合わせを受け付けました" 66 } 67 }, 68 Source: "xxxxxxxxxx@example.com" 69 }; 70 console.log("set params to send an email"); 71 72 AWS.config.update({ region: "ap-northeast-1" }); 73 const ses = new AWS.SES(); 74 try { 75 ses.sendEmail(params).promise(); 76 console.log("Success to Send an Email"); 77 res.json({ success: "post call succeed!" + params }); 78 return; 79 } catch (e) { 80 console.log(`Failed to Send an Email: ${e}`); 81 res.status(500).send("Internal Server Error"); 82 return; 83 } 84}); 85 86app.listen(3000, function() { 87 console.log("App started"); 88}); 89 90// Export the app object. When executing the application local this does nothing. However, 91// to port it to AWS Lambda we will create a wrapper around that will load the app from 92// this file 93module.exports = app;

解決したいこと

フロントエンドで実装されている「送信」ボタンを押しても、サーバサイドのToAddresses(※SESに検証したアドレスと同一)の値にメールが送信されません。しかしながら、「送信」ボタンを3回以上、連続でクリックするとToAddresses宛にメールが送信されます。その為、疎通事態は問題ないことが確認できております。
ただ。本来期待している動きは、「送信」ボタンを一回押下しただけでToAddressesの値にメール送信されることです。期待している動きを実現するためには、何か設定が足りないのか、それともコード修正が必要なのかご教示下さいますと幸いでございます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問