การใช้งาน AWS Lambda และ Amazon API Gateway ร่วมกับโปรเจกต์ React

ข้อกำหนดเบื้องต้น

• บทความนี้มีเนื้อหาที่ต่อยอดมาจากบทความ การ Deploy โปรเจกต์ React โดยใช้ Amazon S3 และ Amazon CloudFront เพราะฉะนั้นควรทำความเข้าใจเนื้อหาในบทความก่อนหน้าก่อนครับ
• โดยในบทความนี้เราจะใช้โปรเจกต์ React ตาม ลิงก์ นี้แทน หากเข้าใจและเคยทดลองทำตามบทความก่อนหน้ามาแล้ว สามารถทำตาม Step 1 ของบทความก่อนหน้า เพื่อเปลี่ยนโปรเจกต์ React มาเป็นตัวนี้แทนได้ครับ

Step 1: เตรียมรูปภาพสำหรับใช้ในโปรเจกต์ React ไว้บน Amazon S3

ในส่วนของ Amazon S3 ทำการสร้างโฟลเดอร์ assets สำหรับเก็บรูปภาพไว้ในโฟลเดอร์นี้ โดยคลิกที่ Create folder

ในช่อง Folder name ใส่ assets แล้วคลิกที่ Create folder

อัปโหลดรูปภาพตามที่ต้องการไปที่โฟลเดอร์ assets โดยในบทความนี้ผมจะใช้เป็นรูปสายพันธุ์สุนัขต่างๆ จำนวน 9 รูปจาก pexels.com

ในกรณีที่ไม่ต้องการหารูปภาพมาใช้เอง ผมก็ได้อัปโหลดรูปภาพไว้ในโปรเจกต์ React ตามโฟลเดอร์ในรูปภาพด้านล่าง สามารถใช้คำสั่ง git clone (สามารถดูขั้นตอนได้จาก บทความก่อนหน้า) ให้ดาวน์โหลดรูปภาพแล้วนำไปอัปโหลดไว้ที่ Amazon S3 ได้เลยครับ

เราสามารถทดสอบได้โดยใช้ URL ของ Amazon CloudFront หรือ Amazon Route 53 จากบทความที่แล้ว ตามด้วย path ของไฟล์ที่อยู่ใน Amazon S3 ตามตัวอย่างด้านล่าง

https://[URL Amazon CloudFront หรือ Amazon Route 53]/assets/[ไฟล์รูปภาพ]

หากทำถูกต้องจะสามารถเข้าถึงไฟล์รูปภาพที่เราเพิ่งจะอัปโหลดไปได้ โดยใช้ URL ตามด้านบนไปวางที่ Browser

Step 2: สร้าง AWS Lambda

ใน AWS management console เข้าไปที่ AWS Lambda จากนั้นคลิก Create function

ในส่วนของ Function name สามารถใส่ชื่อได้ตามที่ต้องการ และในช่อง Runtime ปล่อยให้เป็น Node.js ไว้ จากนั้นคลิก Create function

เมื่อสร้าง AWS Lambda เรียบร้อยให้เลื่อนลงตรงส่วนของ Code source ให้คัดลอกโค้ด Node.js ที่อยู่ด้านล่างนี้ไปใส่ใน index.mjs โดยข้อความใน [URL] ให้ใส่เป็น URL ที่ใช้เข้าถึงไฟล์รูปภาพใน Amazon S3 และ [description] ให้ใส่เป็นคำบรรยายรูปภาพนั้นๆ

export const handler = async (event) => {
  const queryParams = event.queryStringParameters || {};
  const images = [
        {"id": 1,"url": "https://[URL]", "description": "[description]"},
    ]
  const imagesForResponse = images.slice((queryParams.page-1) * queryParams.perPage, queryParams.page * queryParams.perPage)
  return {
    statusCode: 200,
    body: JSON.stringify(imagesForResponse)
  }
};

จากนั้นคลิกมาที่ส่วนของ Test ในช่อง Event name ใส่ชื่อตามที่ต้องการ และในส่วนของ Event JSON ให้ใส่ {} จากนั้นคลิก Test และ Save ตามลำดับ

กลับมาที่หน้า Code คลิกที่ Test

จะปรากฏข้อความดังรูป การตั้งค่าในส่วนของ AWS Lambda จะมีเพียงเท่านี้

Step 3: สร้าง Amazon API Gateway

กลับมาที่ AWS management console ค้นหาและเข้าไปที่ Amazon API Gateway จากนั้นคลิก Create API

คลิก Build ในหัวข้อ HTTP API

ในช่อง Integrations เลือก Lambda และถัดมาที่ช่อง Lambda function เลือก Lambda ที่เราสร้างไว้ ส่วนของ API name ให้ตั้งชื่อ API Gateway ที่เราต้องการ จากนั้นคลิก Next

เลือก Method เป็น GET และในช่อง Resource path ตั้งชื่อตามที่ต้องการ จากนั้นคลิก Next

ส่วนนี้จะเป็นการตั้งชื่อ Stage name ก็ให้ตั้งชื่อตามที่ต้องการเช่นกัน จากนั้นคลิก Next

ในส่วนสุดท้ายจะเป็นหน้า Review เมื่อตรวจสอบความถูกต้องเรียบร้อยแล้ว สามารถกด Create ได้เลยครับ

เมื่อสร้าง Amazon API Gateway ให้มาที่แถบด้านซ้ายตรงหัวข้อ Develop กดตรงคำว่า CORS จากนั้นคลิก Configure ที่มุมบนขวา และให้ใส่ * ตรงช่อง Access-Control-Allow-Origin เป็นการให้สิทธิทุกเว็บไซต์สามารถนำ API endpoint ของ Amazon API Gateway ไปใช้งานได้ หรือหากต้องการจำกัดสิทธิก็ใส่เฉพาะ URL ของเว็บไซต์ที่ต้องการนำไปใช้ ตัวอย่างเช่น URL ของ Amazon CloudFront และ Amazon Route 53 จากนั้นกด Save

กลับมาที่ AWS Lambda ส่วน Configuration จะเห็นว่ามี Amazon API Gateway เชื่อมกับ AWS Lambda เรียบร้อยแล้ว ให้ทำการคัดลอก API endpoint เพื่อนำไปใช้ในขั้นตอนต่อไป

Step 4: Deploy โปรเจกต์ React ขึ้น Amazon S3

ใช้ VSCode ทำการ Extention Remote – SSH ไปยัง EC2 และทำการ git clone โปรเจกต์ React ตาม ลิงก์ นี้ (สำหรับผู้ที่ทำตาม Step 1 ที่ใช้คำสั่ง git clone เพื่อดาวน์โหลดรูปภาพมาใช้แล้ว สามารถข้ามคำสั่งนี้ได้เลยครับ)
จากนั้นให้แก้ไข URL ในส่วนนี้แทนที่ด้วย URL ของ Amazon API Gateway ที่เราสร้างไว้ และผมได้กำหนดจำนวนรูปภาพเอาไว้ที่ 3 รูป ต่อการเรียกใช้ 1 ครั้ง หากต้องการเรียกใช้รูปภาพมากกว่านี้ ก็สามารถเปลี่ยนตัวเลขตรง const perPage ได้ครับ

หลังจากที่เรา Deploy โปรเจกต์ React ไปที่ Amazon S3 เรียบร้อยแล้ว (ขั้นตอนการทำอยู่ในบทความก่อนหน้า) ลองนำ URL ของ Amazon CloudFront หรือ Amazon Route 53 ไปเปิดใน Browser ก็จะได้เว็บไซต์ตามภาพด้านล่าง
และเมื่อเรากดปุ่ม Show More โปรเจกต์ React จะดึงรูปภาพมาตามลิงก์ทีละ 3 รูปตามที่ตั้งค่าไว้ในโปรเจกต์จนกว่าจะไม่มีข้อมูลให้ดึงอีก และเมื่อเราเพิ่ม URL รูปภาพใน AWS Lambda หรือเขียนคำสั่งบน AWS Lambda ให้ส่ง URL รูปภาพมาทุกครั้งที่มีการอัปโหลดรูปใหม่มายัง Amazon S3 เว็บไซต์ก็สามารถแสดงรูปภาพใหม่ได้ โดยที่เราไม่ต้องไปแก้ไขโค้ดในโปรเจกต์ React

สรุป

ในบทความนี้เป็นการนำ AWS Lambda และ Amazon API Gateway ซึ่งเป็นบริการของ AWS มาใช้ร่วมกับ SPA(Single-page application) ซึ่งจะทำให้เว็บไซต์ของเราใช้งานได้สะดวกมากยิ่งขึ้นเมื่อมีข้อมูลใหม่ๆเพิ่มขึ้นมา โดยที่ไม่ต้องไปแก้ไขโปรเจกต์ React ทุกครั้งที่มีการอัพเดทข้อมูล ซึ่งนี่ก็เป็นอีกหนึ่งจากหลายหลายฟังก์ชันที่ AWS Lambda สามารถทำได้ครับ

บทความที่เกี่ยวข้อง

• การ Deploy โปรเจกต์ React โดยใช้ Amazon S3 และ Amazon CloudFront
• AWS Lambda คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS
• มาเชื่อมต่อ Lambda กับ API gateway กันเถอะ
• ทดลองสร้าง RESTful API ด้วย Serverless Lambda (Python) + API Gateway
• การสร้าง AWS Lambda โดยใช้ NodejsFunction ของ CDK ใน EC2 Instance
• การสร้าง Lambda Layer (Python requests) บน AWS
• วิธีการแจ้งเตือนค่าใช้จ่ายการใช้งาน AWS ใน Slack ทุกวัน
• pexels.com (Images source)