การสร้างแบบฟอร์มการติดต่อแบบไร้เซิร์ฟเวอร์สำหรับไซต์แบบคงที่ของคุณ

เครื่องมือสร้างไซต์แบบคงที่เป็นทางเลือกที่รวดเร็วและง่ายดายสำหรับระบบจัดการเนื้อหา (CMS) เช่น WordPress ไม่มีการตั้งค่าเซิร์ฟเวอร์หรือฐานข้อมูล มีเพียงกระบวนการสร้างและ HTML, CSS และ JavaScript อย่างง่าย น่าเสียดายที่ไม่มีเซิร์ฟเวอร์ มันง่ายที่จะถึงขีดจำกัดอย่างรวดเร็ว เช่น ในการเพิ่มแบบฟอร์มการติดต่อ

ด้วยการเพิ่มขึ้นของสถาปัตยกรรมแบบไร้เซิร์ฟเวอร์ การเพิ่มแบบฟอร์มการติดต่อไปยังไซต์แบบสแตติกของคุณไม่จำเป็นต้องเป็นสาเหตุให้เปลี่ยนไปใช้ CMS อีกต่อไป เป็นไปได้ที่จะได้รับสิ่งที่ดีที่สุดจากทั้งสองโลก: ไซต์แบบคงที่ที่มีแบ็คเอนด์แบบไม่มีเซิร์ฟเวอร์สำหรับแบบฟอร์มการติดต่อ (ซึ่งคุณไม่จำเป็นต้องบำรุงรักษา) อาจดีที่สุดในไซต์ที่มีการเข้าชมต่ำ เช่น พอร์ตโฟลิโอ ข้อจำกัดที่สูงของผู้ให้บริการไร้เซิร์ฟเวอร์จำนวนมากทำให้บริการเหล่านี้ฟรีโดยสมบูรณ์!

ในบทความนี้ คุณจะได้เรียนรู้พื้นฐานของ Amazon Web Services (AWS) Lambda และ Simple Email Service (SES) API เพื่อสร้างจดหมายไซต์แบบสแตติกของคุณเองบน Serverless Framework บริการเต็มรูปแบบจะใช้ข้อมูลแบบฟอร์มที่ส่งจากคำขอ AJAX ไปที่ตำแหน่งข้อมูล Lambda แยกวิเคราะห์ข้อมูลเพื่อสร้างพารามิเตอร์ SES ส่งที่อยู่อีเมลและส่งคืนการตอบกลับสำหรับผู้ใช้ของเรา ฉันจะแนะนำคุณเกี่ยวกับการตั้งค่า Serverless เป็นครั้งแรกผ่านการปรับใช้ ใช้เวลาไม่ถึงหนึ่งชั่วโมงจึงจะเสร็จสมบูรณ์ มาเริ่มกันเลย!

การตั้งค่า

มีข้อกำหนดเบื้องต้นเพียงเล็กน้อยในการเริ่มต้นใช้เทคโนโลยี Serverless สำหรับจุดประสงค์ของเรา มันเป็นเพียงสภาพแวดล้อมโหนดที่มี Yarn, Serverless Framework และบัญชี AWS

การจัดตั้งโครงการ

เราใช้ Yarn เพื่อติดตั้ง Serverless Framework ลงในไดเร็กทอรีท้องถิ่น

1. สร้างไดเร็กทอรีใหม่เพื่อโฮสต์โครงการ
2. นำทางไปยังไดเร็กทอรีในอินเทอร์เฟซบรรทัดคำสั่งของคุณ
3. รัน yarn init เพื่อสร้างไฟล์ package.json สำหรับโปรเจ็กต์นี้
4. เรียกใช้ yarn add serverless เพื่อติดตั้งเฟรมเวิร์กในเครื่อง
5. รัน yarn serverless create --template aws-nodejs --name static-site-mailer เพื่อสร้างเทมเพลตบริการ Node และตั้งชื่อเป็น static-site-mailer

โครงการของเราได้รับการตั้งค่าแล้ว แต่เราจะทำอะไรไม่ได้จนกว่าเราจะตั้งค่าบริการของ AWS

การตั้งค่าบัญชี Amazon Web Services, ข้อมูลประจำตัว และบริการอีเมลอย่างง่าย

Serverless Framework ได้บันทึกวิดีโอแนะนำการใช้งานสำหรับการตั้งค่าข้อมูลรับรอง AWS แต่ฉันได้แสดงขั้นตอนต่างๆ ที่นี่ด้วย

1. ลงทะเบียนสำหรับบัญชี AWS หรือเข้าสู่ระบบหากคุณมีอยู่แล้ว
2. ในแถบค้นหาของ AWS ค้นหา “IAM”
3. ในหน้า IAM ให้คลิกที่ "ผู้ใช้" บนแถบด้านข้าง จากนั้นคลิกปุ่ม "เพิ่มผู้ใช้"
4. ในหน้าเพิ่มผู้ใช้ ให้ตั้งชื่อผู้ใช้ - บางอย่างเช่น "ไร้เซิร์ฟเวอร์" นั้นเหมาะสม ทำเครื่องหมายที่ "การเข้าถึงแบบเป็นโปรแกรม" ใต้ประเภทการเข้าถึง จากนั้นคลิกถัดไป
5. ในหน้าจอการอนุญาต ให้คลิกที่แท็บ "แนบนโยบายที่มีอยู่โดยตรง" ค้นหา "AdministratorAccess" ในรายการ ตรวจสอบแล้วคลิกถัดไป
6. ในหน้าจอตรวจสอบ คุณควรเห็นชื่อผู้ใช้ของคุณด้วย "การเข้าถึงแบบเป็นโปรแกรม" และ "การเข้าถึงของผู้ดูแลระบบ" จากนั้นจึงสร้างผู้ใช้
7. หน้าจอยืนยันจะแสดงผู้ใช้ “Access key ID” และ “Secret access key” คุณจะต้องใช้สิ่งเหล่านี้เพื่อให้ Serverless Framework เข้าถึงได้ ใน CLI ของคุณ ให้พิมพ์ yarn sls config credentials --provider aws --key YOUR_ACCESS_KEY_ID --secret YOUR_SECRET_ACCESS_KEY แทนที่ YOUR_ACCESS_KEY_ID และ YOUR_SECRET_ACCESS_KEY ด้วยคีย์บนหน้าจอการยืนยัน

ข้อมูลประจำตัวของคุณได้รับการกำหนดค่าแล้ว แต่ในขณะที่เราอยู่ในคอนโซล AWS มาตั้งค่า Simple Email Service

1. คลิก Console Home ที่มุมซ้ายบนเพื่อกลับบ้าน
2. บนโฮมเพจ ในแถบค้นหาของ AWS ค้นหา “Simple Email Service”
3. ในหน้าแรกของ SES ให้คลิกที่ "ที่อยู่อีเมล" ในแถบด้านข้าง
4. ในหน้ารายการที่อยู่อีเมล ให้คลิกปุ่ม "ยืนยันที่อยู่อีเมลใหม่"
5. ในหน้าต่างข้อความ ให้พิมพ์ที่อยู่อีเมลของคุณ จากนั้นคลิก "ยืนยันที่อยู่อีเมลนี้"
6. คุณจะได้รับอีเมลในทันทีที่มีลิงก์สำหรับยืนยันที่อยู่ คลิกที่ลิงค์เพื่อดำเนินการให้เสร็จสิ้น

เมื่อสร้างบัญชีของเราแล้ว มาดูไฟล์เทมเพลตแบบไร้เซิร์ฟเวอร์กัน

การตั้งค่า Serverless Framework

การรัน serverless create จะสร้างไฟล์สองไฟล์: handler.js ซึ่งมีฟังก์ชัน Lambda และ serverless.yml ซึ่งเป็นไฟล์กำหนดค่าสำหรับสถาปัตยกรรม Serverless ทั้งหมด ภายในไฟล์การกำหนดค่า คุณสามารถระบุตัวจัดการได้มากเท่าที่คุณต้องการ และแต่ละตัวจะจับคู่กับฟังก์ชันใหม่ที่สามารถโต้ตอบกับฟังก์ชันอื่นๆ ได้ ในโปรเจ็กต์นี้ เราจะสร้างตัวจัดการเพียงตัวเดียว แต่ในสถาปัตยกรรมแบบไร้เซิร์ฟเวอร์เต็มรูปแบบ คุณจะมีฟังก์ชันต่างๆ มากมายของบริการ

ใน handler.js คุณจะเห็นฟังก์ชันส่งออกเดียวชื่อ hello ปัจจุบันนี้เป็นฟังก์ชันหลัก (และเท่านั้น) พร้อมกับตัวจัดการโหนดทั้งหมด ใช้พารามิเตอร์สามตัว:

• event
  ซึ่งถือได้ว่าเป็นข้อมูลที่ป้อนเข้าสำหรับฟังก์ชัน
• context object
  ซึ่งมีข้อมูลรันไทม์ของฟังก์ชัน Lambda
• callback
  พารามิเตอร์ทางเลือกเพื่อส่งคืนข้อมูลไปยังผู้โทร

 // handler.js 'use strict'; module.exports.hello = (event, context, callback) => { const response = { statusCode: 200, body: JSON.stringify({ message: 'Go Serverless v1.0! Your function executed successfully!', input: event, }), }; callback(null, response); };

ที่ด้านล่างของ hello มีการโทรกลับ เป็นอาร์กิวเมนต์ที่เป็นทางเลือกในการตอบกลับ แต่ถ้าไม่ได้เรียก ไว้อย่างชัดเจน ก็จะคืนค่า โดยปริยาย ด้วย null การเรียกกลับใช้สองพารามิเตอร์:

• ผิดพลาด ผิดพลาด
  สำหรับการให้ข้อมูลข้อผิดพลาดเมื่อ Lambda เองล้มเหลว เมื่อ Lambda สำเร็จ ควรส่ง null ไปยังพารามิเตอร์นี้
• ผลลัพธ์ของวัตถุ
  สำหรับให้วัตถุตอบสนอง ต้องเข้ากันได้กับ JSON.stringify หากมีพารามิเตอร์ในฟิลด์ข้อผิดพลาด ฟิลด์นี้จะถูกละเว้น

ไซต์แบบคงที่ของเราจะส่งข้อมูลแบบฟอร์มของเราในเนื้อหาของเหตุการณ์ และการเรียกกลับจะตอบกลับให้ผู้ใช้ของเราเห็น

ใน serverless.yml คุณจะเห็นชื่อบริการ ข้อมูลผู้ให้บริการ และฟังก์ชันต่างๆ

 # serverless.yml service: static-site-mailer provider: name: aws runtime: nodejs6.10 functions: hello: handler: handler.hello 

สังเกตการแมประหว่างฟังก์ชัน hello และตัวจัดการ? เราสามารถตั้งชื่อไฟล์ของเราและทำงานอะไรก็ได้ ตราบใดที่มันแมปกับการกำหนดค่า มันก็จะใช้งานได้ มาเปลี่ยนชื่อฟังก์ชันของเราเป็น staticSiteMailer

 # serverless.yml functions: staticSiteMailer: handler: handler.staticSiteMailer

 // handler.js module.exports.staticSiteMailer = (event, context, callback) => { ... };

ฟังก์ชัน Lambda ต้องได้รับอนุญาตเพื่อโต้ตอบกับโครงสร้างพื้นฐานของ AWS อื่นๆ ก่อนที่เราจะสามารถส่งอีเมลได้ เราต้องอนุญาตให้ SES ทำเช่นนั้นได้ ใน serverless.yml ภายใต้ provider.iamRoleStatements เพิ่มการอนุญาต

 # serverless.yml provider: name: aws runtime: nodejs6.10 iamRoleStatements: - Effect: "Allow" Action: - "ses:SendEmail" Resource: ["*"]

เนื่องจากเราต้องการ URL สำหรับการดำเนินการกับแบบฟอร์ม เราจึงต้องเพิ่มเหตุการณ์ HTTP ในฟังก์ชันของเรา ใน serverless.yml เราสร้างเส้นทาง ระบุวิธีการเป็น post และตั้งค่า CORS เป็น true เพื่อความปลอดภัย

 functions: staticSiteMailer: handler: handler.staticSiteMailer events: - http: method: post path: static-site-mailer cors: true

ไฟล์ serverless.yml และ handler.js ที่อัปเดตของเราควรมีลักษณะดังนี้:

 # serverless.yml service: static-site-mailer provider: name: aws runtime: nodejs6.10 functions: staticSiteMailer: handler: handler.staticSiteMailer events: - http: method: post path: static-site-mailer cors: true provider: name: aws runtime: nodejs6.10 iamRoleStatements: - Effect: "Allow" Action: - "ses:SendEmail" Resource: ["*"]

 // handler.js 'use strict'; module.exports.staticSiteMailer = (event, context, callback) => { const response = { statusCode: 200, body: JSON.stringify({ message: 'Go Serverless v1.0! Your function executed successfully!', input: event, }), }; callback(null, response); };

สถาปัตยกรรมไร้เซิร์ฟเวอร์ของเราได้รับการตั้งค่า ดังนั้นมาปรับใช้และทดสอบกัน คุณจะได้รับการตอบสนอง JSON อย่างง่าย

 yarn sls deploy --verbose yarn sls invoke --function staticSiteMailer { "statusCode": 200, "body": "{\"message\":\"Go Serverless v1.0! Your function executed successfully!\",\"input\":{}}" } 

การสร้างแบบฟอร์ม HTML

อินพุตของฟังก์ชัน Lambda และเอาต์พุตของฟอร์มจำเป็นต้องตรงกัน ดังนั้นก่อนที่เราจะสร้างฟังก์ชัน เราจะสร้างฟอร์มและเก็บเอาต์พุตของฟอร์มนั้น เราทำให้มันง่ายด้วยฟิลด์ชื่อ อีเมล และข้อความ เราจะเพิ่มการทำงานของแบบฟอร์มเมื่อเราปรับใช้สถาปัตยกรรมแบบไร้เซิร์ฟเวอร์และได้รับ URL ของเราแล้ว แต่เรารู้ว่ามันจะเป็นคำขอ POST ดังนั้นเราจึงสามารถเพิ่มสิ่งนั้นเข้าไปได้ ที่ส่วนท้ายของแบบฟอร์ม เราเพิ่มแท็กย่อหน้าสำหรับแสดง ข้อความตอบกลับไปยังผู้ใช้ซึ่งเราจะอัปเดตเมื่อมีการโทรกลับ

 <form action="{{ SERVICE URL }}" method="POST"> <label> Name <input type="text" name="name" required> </label> <label> Email <input type="email" name="reply_to" required> </label> <label> Message: <textarea name="message" required></textarea> </label> <button type="submit">Send Message</button> </form> <p></p>

ในการจับภาพผลลัพธ์ เราได้เพิ่มตัวจัดการการส่งลงในแบบฟอร์ม เปลี่ยนพารามิเตอร์แบบฟอร์มของเราให้เป็นวัตถุ และส่ง JSON แบบสตริงไปยังฟังก์ชัน Lambda ของเรา ในฟังก์ชัน Lambda เราใช้ JSON.parse() เพื่ออ่านข้อมูลของเรา หรือคุณสามารถใช้ Serialize หรือ query-string ของ jQuery เพื่อส่งและแยกวิเคราะห์พารามิเตอร์ของแบบฟอร์มเป็นสตริงการสืบค้น แต่ JSON.stringify() และ JSON.parse() เป็นไฟล์ดั้งเดิม

 (() => { const form = document.querySelector('form'); const formResponse = document.querySelector('js-form-response'); form.onsubmit = e => { e.preventDefault(); // Prepare data to send const data = {}; const formElements = Array.from(form); formElements.map(input => (data[input.name] = input.value)); // Log what our lambda function will receive console.log(JSON.stringify(data)); }; })();

ไปข้างหน้าและส่งแบบฟอร์มของคุณจากนั้นจับภาพเอาต์พุตคอนโซล เราจะใช้ในฟังก์ชัน Lambda ต่อไป

เรียกใช้ฟังก์ชันแลมบ์ดา

โดยเฉพาะอย่างยิ่งในระหว่างการพัฒนา เราต้องทดสอบการทำงานของเราว่าเป็นไปตามที่เราคาดไว้ Serverless Framework จัดเตรียมการ invoke และ invoke local คำสั่งในเครื่องเพื่อทริกเกอร์ฟังก์ชันของคุณจากสภาพแวดล้อมการ ทำงาน จริงและ การพัฒนา ตามลำดับ คำสั่งทั้งสองต้องมีชื่อฟังก์ชันที่ส่งผ่าน ในกรณีของเรา staticSiteMailer

 yarn sls invoke local --function staticSiteMailer

ในการส่งข้อมูลจำลองไปยังฟังก์ชันของเรา ให้สร้างไฟล์ใหม่ที่ชื่อ data.json พร้อมเอาต์พุตคอนโซลที่บันทึกไว้ภายใต้คีย์ body ภายในออบเจ็กต์ JSON ควรมีลักษณะดังนี้:

 // data.json { "body": "{\"name\": \"Sender Name\",\"reply_to\": \"[email protected]\",\"message\": \"Sender message\"}" }

ในการเรียกใช้ฟังก์ชันด้วยข้อมูลในเครื่อง ให้ส่งอาร์กิวเมนต์ --path พร้อมกับพาธไปยังไฟล์

 yarn sls invoke local --function staticSiteMailer --path data.json 

คุณจะเห็นการตอบสนองที่คล้ายกันก่อนหน้านี้ แต่คีย์ input จะมีเหตุการณ์ที่เราเยาะเย้ย ลองใช้ข้อมูลจำลองของเราเพื่อส่งอีเมลโดยใช้ Simple Email Service!

การส่งอีเมลด้วยบริการอีเมลอย่างง่าย

เราจะแทนที่ฟังก์ชัน staticSiteMailer ด้วยการเรียกใช้ฟังก์ชัน sendEmail ส่วนตัว สำหรับตอนนี้ คุณสามารถแสดงความคิดเห็นหรือลบโค้ดเทมเพลตและแทนที่ด้วย:

 // hander.js function sendEmail(formData, callback) { // Build the SES parameters // Send the email } module.exports.staticSiteMailer = (event, context, callback) => { const formData = JSON.parse(event.body); sendEmail(formData, function(err, data) { if (err) { console.log(err, err.stack); } else { console.log(data); } }); };

ขั้นแรก เราแยกวิเคราะห์ event.body เพื่อเก็บข้อมูลในแบบฟอร์ม จากนั้นจึงส่งต่อไปยังฟังก์ชัน sendEmail ส่วนตัว sendEmail มีหน้าที่ในการส่งอีเมล และฟังก์ชันการโทรกลับจะส่งคืนการตอบสนองที่ล้มเหลวหรือสำเร็จด้วย err หรือ data ในกรณีของเรา เราสามารถบันทึกข้อผิดพลาดหรือข้อมูลได้ง่ายๆ เนื่องจากเราจะแทนที่สิ่งนี้ด้วยการโทรกลับของ Lambda ในอีกสักครู่

Amazon มี SDK ที่สะดวก aws-sdk สำหรับเชื่อมต่อบริการกับฟังก์ชัน Lambda บริการหลายอย่างรวมถึง SES เป็นส่วนหนึ่งของบริการนี้ เราเพิ่มลงในโปรเจ็กต์ด้วย yarn add aws-sdk และนำเข้าไปยังไฟล์ตัวจัดการด้านบน

 // handler.js const AWS = require('aws-sdk'); const SES = new AWS.SES();

ในฟังก์ชัน sendEmail ส่วนตัว เราสร้างพารามิเตอร์ SES.sendEmail จากข้อมูลในฟอร์มที่แยกวิเคราะห์แล้วใช้การเรียกกลับเพื่อตอบกลับการตอบกลับไปยังผู้โทร พารามิเตอร์ต้องการสิ่งต่อไปนี้เป็นวัตถุ:

• แหล่งที่มา
  ที่อยู่อีเมล SES กำลังส่ง จาก .
• ตอบกลับไปยังที่อยู่
  อาร์เรย์ของที่อยู่อีเมลที่เพิ่มเข้ามาในการตอบกลับฟิลด์ในอีเมล
• ปลายทาง
  ออบเจ็กต์ที่ต้องมีอย่างน้อยหนึ่ง ToAddresses , CcAddresses หรือ BccAddresses แต่ละฟิลด์ใช้อาร์เรย์ของที่อยู่อีเมลที่สอดคล้องกับฟิลด์ ถึง , สำเนา และ สำเนาลับ ตามลำดับ
• ข้อความ
  วัตถุที่มี ร่างกาย และ หัวเรื่อง

เนื่องจาก formData เป็นอ็อบเจ็กต์ เราจึงสามารถเรียกฟิลด์ของฟอร์มของเราได้โดยตรง เช่น formData.message สร้างพารามิเตอร์ของเรา และส่ง เราส่งอีเมลที่ได้รับการยืนยัน SES ของคุณ ไปยัง Source and Destination.ToAddresses ตราบใดที่อีเมลได้รับการยืนยันแล้ว คุณสามารถส่งอะไรก็ได้ที่นี่ รวมถึงที่อยู่อีเมลอื่น เราถอนการตอบกลับ , message และ name อ็อบเจ็กต์ formData ของเราเพื่อกรอกข้อมูลใน ReplyToAddresses reply_to Message.Body.Text.Data

 // handler.js function sendEmail(formData, callback) { const emailParams = { Source: '[email protected]', // SES SENDING EMAIL ReplyToAddresses: [formData.reply_to], Destination: { ToAddresses: ['[email protected]'], // SES RECEIVING EMAIL }, Message: { Body: { Text: { Charset: 'UTF-8', Data: `${formData.message}\n\nName: ${formData.name}\nEmail: ${formData.reply_to}`, }, }, Subject: { Charset: 'UTF-8', Data: 'New message from your_site.com', }, }, }; SES.sendEmail(emailParams, callback); }

SES.sendEmail จะส่งอีเมลและการโทรกลับของเราจะตอบกลับ การเรียกใช้ฟังก์ชันในพื้นที่จะส่งอีเมลไปยังที่อยู่ที่ยืนยันแล้วของคุณ

 yarn sls invoke local --function staticSiteMailer --path data.json 

การตอบกลับจากตัวจัดการ

ฟังก์ชันของเราจะส่งอีเมลโดยใช้บรรทัดคำสั่ง แต่ผู้ใช้ของเราจะโต้ตอบกับอีเมลนั้นไม่ได้ เราจำเป็นต้องส่งคืนการตอบกลับการส่งแบบฟอร์ม AJAX ของเรา หากล้มเหลว เราควรส่งคืน statusCode ที่เหมาะสมรวมถึง err.message เมื่อดำเนินการสำเร็จ 200 statusCode ก็เพียงพอแล้ว แต่เราจะส่งคืนการตอบกลับทางไปรษณีย์ในเนื้อหาเช่นกัน ใน staticSiteMailer เราสร้างข้อมูลการตอบกลับและแทนที่ฟังก์ชันการโทรกลับ sendEmail ด้วย Lambda callback

 // handler.js module.exports.staticSiteMailer = (event, context, callback) => { const formData = JSON.parse(event.body); sendEmail(formData, function(err, data) { const response = { statusCode: err ? 500 : 200, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'https://your-domain.com', }, body: JSON.stringify({ message: err ? err.message : data, }), }; callback(null, response); }); };

การโทรกลับแลมบ์ดาของเราจะส่งคืนข้อความแสดงความสำเร็จและความล้มเหลวจาก SES.sendEmail เราสร้างการตอบสนองด้วยการตรวจสอบว่ามีข้อ err หรือไม่ ดังนั้นการตอบสนองของเราจึงสอดคล้องกัน ฟังก์ชันเรียกกลับของแลมบ์ดาเองส่ง null ในฟิลด์อาร์กิวเมนต์ข้อผิดพลาดและการตอบสนองเป็นค่าที่สอง เราต้องการส่งต่อข้อผิดพลาดต่อไป แต่ถ้า Lambda ล้มเหลว การโทรกลับจะถูกเรียกโดยปริยายพร้อมการตอบสนองข้อผิดพลาด

ใน headers คุณจะต้องแทนที่ Access-Control-Allow-Origin ด้วยโดเมนของคุณเอง การดำเนินการนี้จะป้องกันไม่ให้โดเมนอื่นใช้บริการของคุณและอาจเรียกเก็บเงิน AWS ในชื่อของคุณ! และฉันไม่ได้กล่าวถึงในบทความนี้ แต่คุณสามารถตั้งค่า Lambda เพื่อใช้โดเมนของคุณเองได้ คุณจะต้องอัปโหลดใบรับรอง SSL/TLS ไปยัง Amazon ทีมงาน Serverless Framework เขียนบทช่วยสอนที่ยอดเยี่ยมเกี่ยวกับวิธีการทำเช่นนั้น

การเรียกใช้ฟังก์ชันภายในจะส่งอีเมลและตอบกลับการตอบกลับที่เหมาะสม

 yarn sls invoke local --function staticSiteMailer --path data.json 

การเรียกฟังก์ชันแลมบ์ดาจากแบบฟอร์ม

บริการของเราเสร็จสมบูรณ์แล้ว! ในการปรับใช้มันรัน yarn sls deploy -v เมื่อปรับใช้แล้ว คุณจะได้รับ URL ที่ดูเหมือน https://r4nd0mh45h.execute-api.us-east-1.amazonaws.com/dev/static-site-mailer ซึ่งคุณสามารถเพิ่มลงในการดำเนินการของแบบฟอร์มได้ ต่อไป เราสร้างคำขอ AJAX และส่งคืนการตอบกลับไปยังผู้ใช้

 (() => { const form = document.querySelector('form'); const formResponse = document.querySelector('js-form-response'); form.onsubmit = e => { e.preventDefault(); // Prepare data to send const data = {}; const formElements = Array.from(form); formElements.map(input => (data[input.name] = input.value)); // Log what our lambda function will receive console.log(JSON.stringify(data)); // Construct an HTTP request var xhr = new XMLHttpRequest(); xhr.open(form.method, form.action, true); xhr.setRequestHeader('Accept', 'application/json; charset=utf-8'); xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); // Send the collected data as JSON xhr.send(JSON.stringify(data)); // Callback function xhr.onloadend = response => { if (response.target.status === 200) { // The form submission was successful form.reset(); formResponse.innerHTML = 'Thanks for the message. I'll be in touch shortly.'; } else { // The form submission failed formResponse.innerHTML = 'Something went wrong'; console.error(JSON.parse(response.target.response).message); } }; }; })();

ในการเรียกกลับ AJAX เราตรวจสอบรหัสสถานะด้วย response.target.status หากเป็นอย่างอื่นที่ไม่ใช่ 200 เราสามารถแสดงข้อความแสดงข้อผิดพลาดให้ผู้ใช้ทราบ มิฉะนั้น แจ้งให้ผู้ใช้ทราบว่าข้อความถูกส่งแล้ว เนื่องจากแลมบ์ดาของเราส่งคืน JSON แบบสตริง เราจึงสามารถแยกวิเคราะห์ข้อความเนื้อหาด้วย JSON.parse(response.target.response).message มีประโยชน์อย่างยิ่งในการบันทึกข้อผิดพลาด

คุณควรจะสามารถส่งแบบฟอร์มของคุณได้ทั้งหมดจากไซต์คงที่ของคุณ!

ขั้นตอนถัดไป

การเพิ่มแบบฟอร์มการติดต่อไปยังสแตติกของคุณเป็นเรื่องง่ายด้วย Serverless Framework และ AWS โค้ดของเรายังมีช่องว่างให้ต้องปรับปรุง เช่น การเพิ่มการตรวจสอบความถูกต้องของฟอร์มด้วย honeypot การป้องกันไม่ให้ AJAX เรียกฟอร์มที่ไม่ถูกต้อง และปรับปรุง UX หากมีการตอบกลับ แต่ก็เพียงพอแล้วสำหรับการเริ่มต้น คุณสามารถดูการปรับปรุงเหล่านี้ได้ใน repo ของไซต์สแตติกที่ฉันสร้างขึ้น ฉันหวังว่าฉันจะเป็นแรงบันดาลใจให้คุณลองใช้ Serverless ด้วยตัวคุณเอง!