โปรเจกต์ใน AWS:

สร้างเว็บแอปพลิเคชันแบบไร้เซิร์ฟเวอร์

ด้วย AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB และ Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

ข้อมูลเบื้องต้น

Progression-Bar-07

โฮสต์เว็บไซต์แบบสแตติก

Progression-Bar-08

จัดการผู้ใช้

Progression-Bar-09

สร้างแบ็คเอนด์แบบไร้เซิร์ฟเวอร์

Progression-Bar-16

ปรับใช้ RESTful API

Progression-Bar-11

ยกเลิกการใช้งานทรัพยากร

โมดูลที่ 4 RESTful API

ในโมดูลนี้ คุณจะใช้ Amazon API Gateway เพื่อแสดงฟังก์ชัน Lambda ที่คุณสร้างไว้ในโมดูลที่แล้วเป็น RESTful API API จะสามารถเข้าถึงได้จากอินเทอร์เน็ตสาธารณะ ซึ่งจะได้รับการรักษาความปลอดภัยโดยใช้พูลผู้ใช้ของ Amazon Cognito ที่คุณสร้างไว้ในโมดูลที่แล้ว จากนั้น คุณจะเปลี่ยนเว็บไซต์ที่ได้รับการโฮสต์แบบสแตติกไปเป็นเว็บแอปพลิเคชันแบบไดนามิกโดยการเพิ่ม JavaScript ฝั่งไคลเอนต์ที่ทำให้ AJAX เรียกใช้ API ที่แสดงให้เห็น โดยใช้การกำหนดค่านี้

ภาพรวมของสถาปัตยกรรม

Serverless_Web_App_LP_assets-05

แผงผังข้างบนแสดงให้เห็นว่าส่วนประกอบของ API Gateway ที่คุณจะสร้างในโมดูลนี้ผสานรวมกับส่วนประกอบที่มีอยู่เดิมที่คุณสร้างไว้ก่อนหน้านี้ได้อย่างไร รายการที่ไฮไลต์เป็นสีเทาคือชิ้นส่วนที่คุณได้นำไปใช้งานแล้วในขั้นตอนก่อนๆ

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

โมดูลนี้จะมุ่งเน้นไปที่ขั้นตอนต่างๆ ที่จำเป็นในการสร้างส่วนประกอบระบบคลาวด์ของ API แต่หากคุณสนใจอยากจะทราบว่าโค้ดของเบราว์เซอร์ที่เรียกใช้ API ทำงานอย่างไร คุณสามารถตรวจสอบได้จากไฟล์ ride.js ของเว็บไซต์ ในกรณีนี้ แอปพลิเคชันจะใช้วิธีการ AJAX() ของ jQuery เพื่อสร้างคำขอจากระยะไกล

ระยะเวลาที่ใช้ในการศึกษาโมดูล: 15 นาที

บริการที่ใช้: Amazon API Gateway และ AWS Lambda

คำแนะนำในการนำมาใช้งาน

ทำตามคำแนะนำทีละขั้นตอนด้านล่างนี้เพื่อสร้าง REST API ของคุณ คลิกหมายเลขขั้นตอนแต่ละหมายเลขเพื่อขยายส่วนนั้น

  • ขั้นตอนที่ 1 สร้าง REST API ใหม่

    สร้าง REST API ใหม่

    1. ใน AWS Management Console ให้คลิก บริการ แล้วเลือก API Gateway ใต้บริการสำหรับแอปพลิเคชัน

    2. เลือก สร้าง API

    3. เลือก API ใหม่ แล้วป้อน WildRydes ในส่วนของ ชื่อ API

    4. เลือก Edge optimized ไว้อย่างเดิมในรายการดรอปดาวน์ ประเภทตำแหน่งของข้อมูล หมายเหตุ: Edge optimized เป็นตัวเลือกที่ดีที่สุดสำหรับบริการสาธารณะที่เข้าถึงได้จากอินเทอร์เน็ต โดยทั่วไป ตำแหน่งข้อมูลประจำเขตจะใช้สำหรับ API ที่โดยส่วนใหญ่จะเข้าถึงได้จากภายในเขต AWS เดียวกัน

    5. เลือก สร้าง API

  • ขั้นตอนที่ 2 สร้างผู้อนุมัติพูลผู้ใช้ของ Cognito

    สร้างผู้อนุมัติพูลผู้ใช้ของ Cognito

    Amazon API Gateway สามารถใช้โทเค็น JWT ที่ส่งคืนกลับมาจากพูลผู้ใช้ของ Cognito เพื่อตรวจสอบความถูกต้องของการเรียกใช้ API ในขั้นตอนนี้ คุณจะกำหนดค่าผู้อนุมัติให้กับ API ของคุณเพื่อใช้พูลผู้ใช้ที่คุณสร้างไว้ในโมดูลที่ 2

    ใน Amazon API Gateway Console ให้สร้างผู้อนุมัติพูลผู้ใช้ของ Cognito รายใหม่ให้กับ API ของคุณ กำหนดค่าผู้อนุมัติพร้อมกับรายละเอียดของพูลผู้ใช้ที่คุณสร้างไว้ในโมดูลก่อนหน้า คุณสามารถทดสอบการกำหนดค่าใน Console โดยการคัดลอกและวางโทเค็นการให้สิทธิ์อนุญาตที่มอบให้แก่คุณหลังจากที่คุณเข้าสู่ระบบผ่านทางหน้า /signin.html ของเว็บไซต์ปัจจุบันของคุณ

    1. ใต้ API ที่คุณเพิ่งสร้างขึ้นมาใหม่ ให้เลือก ผู้อนุมัติ

    2. เลือก สร้างผู้อนุมัติใหม่

    3. ป้อน WildRydes ในส่วนของชื่อผู้อนุมัติ

    4. เลือก Cognito ในส่วนของประเภท

    5. ในรายการดรอปดาวน์เขตใต้ พูลผู้ใช้ของ Cognito ให้เลือกเขตที่คุณสร้างพูลผู้ใช้ของ Cognito ในโมดูลที่ 2 (เขตปัจจุบันน่าจะถูกเลือกไว้อยู่แล้วตามค่าเริ่มต้น)

    6. ป้อน WildRydes (หรือชื่อที่คุณตั้งให้กับพูลผู้ใช้) ในอินพุต พูลผู้ใช้ของ Cognito

    7. ป้อน การให้สิทธิ์อนุญาต ในส่วนของ แหล่งที่มาของโทเค็น

    8. เลือก สร้าง

    ตรวจสอบการกำหนดค่าผู้อนุมัติของคุณ

    1. เปิดแท็บเบราว์เซอร์ใหม่และเข้าไปที่ /ride.html ใต้โดเมนของเว็บไซต์

    2. หากระบบเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ ให้ลงชื่อเข้าใช้ด้วยชื่อผู้ใช้ที่สร้างขึ้นในโมดูลที่แล้ว ระบบจะเปลี่ยนเส้นทางคุณกลับไปที่ /ride.html

    3. คัดลอกโทเค็นการให้สิทธิ์อนุญาตจากการแจ้งเตือนใน /ride.html

    4. กลับไปที่แท็บก่อนหน้านี้ที่คุณเพิ่งสร้างผู้อนุมัติเสร็จ

    5. คลิก ทดสอบ ที่ด้านล่างของการ์ดสำหรับผู้อนุมัติ

    6. วางโทเค็นการให้สิทธิ์อนุญาตลงในช่อง โทเค็นการให้สิทธิ์อนุญาต ในกล่องโต้ตอบป๊อปอัป

    7. คลิกปุ่มทดสอบ และตรวจสอบว่ารหัสที่ตอบกลับมาคือ 200 และคุณเห็นการอ้างสิทธิ์สำหรับผู้ใช้ที่ปรากฏขึ้น

  • ขั้นตอนที่ 3 สร้างทรัพยากรและวิธีการใหม่

    สร้างทรัพยากรและวิธีการใหม่

    สร้างทรัพยากรใหม่ที่ชื่อว่า /ride ภายใน API ของคุณ จากนั้น ให้สร้างวิธีการ POST สำหรับทรัพยากรนั้น และกำหนดค่าเพื่อใช้การผสานรวมพร็อกซี Lambda ที่ได้รับการสนับสนุนโดยฟังก์ชัน RequestUnicorn ที่คุณสร้างในขั้นตอนแรกของโมดูลนี้

    1. ในการนำทางด้านซ้าย ให้คลิกที่ ทรัพยากร ใต้ WildRydes API ของคุณ

    2. จากรายการดรอปดาวน์ การดำเนินการ ให้เลือก สร้างทรัพยากร

    3. ป้อน ride ให้เป็นชื่อทรัพยากร

    4. ตรวจสอบให้แน่ใจว่า เส้นทางทรัพยากร ถูกตั้งค่าเป็น ride

    5. เลือก เปิดใช้งาน API Gateway CORS สำหรับทรัพยากร

    6. คลิก สร้างทรัพยากร

    7. เมื่อเลือกทรัพยากร /ride ที่เพิ่งสร้างขึ้นมา จากรายการดรอปดาวน์ การดำเนินการ ให้เลือก สร้างวิธีการ

    8. เลือก POST จากรายการดรอปดาวน์ใหม่ที่ปรากฏขึ้น แล้ว คลิกเครื่องหมายถูก

    9. เลือก ฟังก์ชัน Lambda สำหรับประเภทการผสานรวม

    10. ทำเครื่องหมายในช่อง ใช้การผสานรวมพร็อกซี Lambda

    11. เลือกเขตที่คุณกำลังใช้สำหรับ เขต Lambda

    12. ป้อนชื่อของฟังก์ชันที่คุณสร้างในโมดูลก่อนหน้า RequestUnicorn สำหรับ ฟังก์ชัน Lambda

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

    14. เมื่อได้รับการแจ้งให้มอบสิทธิ์ Amazon API Gateway เพื่อเรียกใช้ฟังก์ชันของคุณ ให้เลือก ตกลง

    15. เลือกที่การ์ด คำขอวิธีการ

    16. เลือกไอคอนดินสอที่อยู่ถัดจาก การให้สิทธิ์อนุญาต

    17. เลือกผู้อนุมัติพูลผู้ใช้ของ WildRydes Cognito จากรายการดรอปดาวน์ แล้วคลิกไอคอนเครื่องหมายถูก

  • ขั้นตอนที่ 4 ติดตั้ง API ของคุณเพื่อใช้จริง

    ติดตั้ง API ของคุณเพื่อใช้จริง

    จาก Amazon API Gateway Console ให้เลือกการดำเนินการ ติดตั้ง API เพื่อใช้จริง คุณจะได้รับการแจ้งเพื่อสร้างขั้นตอนใหม่ คุณสามารถใช้ prod เป็นชื่อขั้นตอนได้

    1. ในรายการดรอปดาวน์การดำเนินการให้เลือกติดตั้ง API เพื่อใช้จริง

    2. เลือก [ขั้นตอนใหม่] ในรายการดรอปดาวน์ ขั้นตอนการติดตั้งใช้จริง

    3. ป้อน prod สำหรับ ชื่อขั้นตอน

    4. เลือก ติดตั้งใช้จริง

    5. จด URL การเรียกใช้งาน คุณจะต้องใช้ในส่วนถัดไป

  • ขั้นตอนที่ 5 อัปเดตการกำหนดค่าเว็บไซต์

    อัปเดตการกำหนดค่าเว็บไซต์

    อัปเดตไฟล์ /js/config.js ในการติดตั้งเว็บไซต์เพื่อใช้จริงเพื่อให้มี URL การเรียกใช้งานของขั้นตอนที่คุณเพิ่งสร้างรวมอยู่ด้วย คุณควรคัดลอก URL การเรียกใช้งานจากส่วนบนสุดของหน้าตัวแก้ไขขั้นตอนใน Amazon API Gateway Console โดยตรง และวาง URL ลงในคีย์ _config.api.invokeUrl ของไฟล์ /js/config.js ของเว็บไซต์ของคุณ ตรวจสอบให้แน่ใจเมื่อคุณอัปเดตไฟล์กำหนดค่าว่าไฟล์ยังคงมีการอัปเดตที่คุณทำไว้ในโมดูลก่อนหน้าสำหรับพูลผู้ใช้ของ Cognito

    1. เปิดไฟล์ config.js ในโปรแกรมแก้ไขข้อความ

    2. อัปเดตการตั้งค่า invokeUrl ใต้คีย์ API ในไฟล์ config.js ตั้งค่าเป็น URL การเรียกใช้งาน สำหรับขั้นตอนการติดตั้งใช้จริงที่คุณสร้างขึ้นในส่วนก่อนหน้า

      ตัวอย่างของไฟล์ config.js ที่สมบูรณ์ถูกนำมารวมไว้ที่ด้านล่าง หมายเหตุ ค่าจริงในไฟล์ของคุณจะแตกต่างออกไป

    window._config = {

    cognito: {

        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

        region: 'us-west-2' // e.g. us-east-2 

    }, 

    api: { 

        invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 

    } 

};

    1. บันทึกไฟล์ที่ดัดแปลงและส่งต่อไปยังคลังเก็บข้อมูล Git เพื่อปรับใช้งานโดยอัตโนมัติกับ Amplify Console

    $ git push

  • ขั้นตอนที่ 5 ตรวจสอบความถูกต้องของการนำไปใช้งานของคุณ

    ตรวจสอบความถูกต้องของการนำไปใช้งานของคุณ

    หมายเหตุ: มีความเป็นไปได้ที่คุณจะเห็นความล่าช้าระหว่างการอัปเดตไฟล์ config.js ในบัคเก็ต S3 และขณะที่เนื้อหาที่ได้รับการอัปเดตปรากฏขึ้นในเบราว์เซอร์ของคุณ นอกจากนี้ คุณควรตรวจสอบให้แน่ใจว่าคุณล้างแคชของเบราว์เซอร์ของคุณก่อนที่จะปฏิบัติตามขั้นตอนต่อไปนี้

    1. เข้าไปที่ /ride.html ใต้โดเมนของเว็บไซต์ของคุณ

    2. หากระบบเปลี่ยนเส้นทางเพื่อนำคุณไปยังหน้าลงชื่อเข้าใช้ ให้ลงชื่อเข้าใช้ด้วยชื่อผู้ใช้ที่สร้างขึ้นในโมดูลก่อนหน้า

    3. หลังจากที่โหลดแผนที่แล้ว ให้คลิกที่ส่วนใดๆ บนแผนที่เพื่อตั้งค่าตำแหน่งที่ตั้งที่จะเดินทางไปรับ

    4. เลือก ขอยูนิคอร์น คุณควรจะเห็นการแจ้งเตือนในแถบข้างด้านขวาที่ยูนิคอร์นกำลังอยู่บนเส้นทาง แล้วเห็นไอคอนยูนิคอร์นบินไปยังตำแหน่งที่ตั้งที่จะเดินทางไปรับ

ถัดไป: ยกเลิกการใช้งานทรัพยากร