したいこと
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の値にメール送信されることです。期待している動きを実現するためには、何か設定が足りないのか、それともコード修正が必要なのかご教示下さいますと幸いでございます。
あなたの回答
tips
プレビュー