ใช้ DynamoDB กับ Lambda สร้างฟังก์ชัน History : Serverless Web App บน AWS : Part 7

บทความนี้ดัดแปลงเนื้อหาบางส่วนมาจาก Hands-on Training ของ Website AWS Official ของญี่ปุ่น สามารถอ่านเนื้อหาต้นฉบับได้ที่ AWS Hands-on for Beginners Serverless #1 サーバーレスアーキテクチャで翻訳 Web API を構築する | AWS Webinar

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

เป้าหมายใหญ่สุดของบทเรียนนี้คือ การทำ Web app แปลภาษาที่เป็น serverless ครับ

สวัสดีครับ ต้า ครับ

บทความนี้เป็นส่วนนึงของเนื้อหาในบทเรียนเกี่ยวกับ AWS API Gateway ที่ผมสร้างขึ้นมา
ซึ่งผมทำการแยกย่อยๆออกมาโดยเนื้อหาในบทความพวกนี้สามารถจบได้ในตัวของมันเอง

สำหรับหัวข้ออื่นๆ ของบทความนี้ สามารถตรวจสอบได้ที่ช่วงท้ายของบทความครับ

สำหรับบทความนี้เราจะมาทำกันในส่วนนี้ครับ

ในหัวข้อนี้ เราจะมาทำระบบประวัติที่เราทำการค้นหา โดยที่จะไปดึงข้อมูลจาก DynamoDB มาแสดงขึ้นที่ หน้าเว็บ โดยการกระทำนี้เราจะต้องสร้าง API ขึ้นมาใหม่อีกอัน เชิญรับชมในหัวข้อต่อไปได้เลยครับ

บทความนี้เราจะมาทำกันใน Singapore Region กันครับ

เริ่มลงมือทำ

ทำระบบ History

สิ่งที่เราจะทำกันในบทความนี้ คือ ทำระบบประวัติ

โดยที่ตอนนี้เรารู้ว่า เรามีการเก็บข้อมูลประวัติข้อมูลที่เราทำการค้นหาลงใน DynamoDB โดยเราจะทำการดึงข้อมูลจาก DynamoDB มาแสดงขึ้นในหน้า index.html ของเรากันครับ

โดยเราต้อง

• สร้าง Lambda Function สำหรับดึงข้อมูลจาก DynamoDB ใหม่
• เพิ่มการตั้งค่าใน API Gateway

ในการดึงข้อมูลนี้มา

ก่อนอื่นเราจะสร้าง Lambda Function ใหม่กันก่อนครับ

Lambda Function สำหรับดึงข้อมูลจาก DynamoDB

ใน Lambda Function ที่เราสร้างรอบนี้จะเป็นการดึงข้อมูลมาจาก DynamoDB
ซึ่งไม่ได้มีการรับ input จาก API Gateway เขามาเลย

ทำให้ในการเทสนั้น เราจะไม่ใช้ Lambda proxy integration ซึ่งจะไปเกี่ยวกับหัวข้อที่เราจะมาตั้งค่าใน API Gateway ในหัวข้อถัดไป

ให้เราเข้าลิ้งค์ต่อไปนี้เพื่อทำการสร้าง Lambda Function
Create function

ตั้งค่าตามต่อไปนี้
◉ Author from scratch
Function name: get-history-translate
Runtime: Python 3.12

เราจะใช้ Lambda นี้ส่ง Request ไปยัง AWS DynamoDB ทำให้เราต้องทำให้ Lambda Function นี้ต้องมีสิทธิในการเข้าถึง AWS DynamoDB ก่อน โดยการตั้งค่าต่อไปนี้

ไปที่ Function ที่เราสร้างขึ้น > Configuration > Permissions > คลิก Role ที่เราสร้างขึ้น

กด Add permissions > Attach policies > ☑AmazonDynamoDBFullAccess > Add permissions

เราสามารถจำกัดสิทธิ์ให้มีความสามารถเท่าที่จำเป็นได้ แต่เพื่อความสะดวก ในบทความนี้จึงขอใช้เป็น FullAccess ไปก่อน

ถ้าได้ตามภาพด้านล่างนี้คือโอเคครับ

กลับมาที่ Lambda Function ที่เราสร้างขึ้น
ไปที่โค้ดก็อบข้อความด้านล่างไปใส่

โดยในการดึงข้อมูลครั้งนี้เราจะทำการดึงมาแค่ 5 ไอเทมล่าสุดเท่านั้น

แล้วกด Deploy

import boto3
from boto3.dynamodb.conditions import Key

def lambda_handler(event, context):
    # Initialize DynamoDB client
    dynamodb = boto3.resource('dynamodb')

    # Specify your table name
    table_name = 'translate-log'
    table = dynamodb.Table(table_name)

    # Perform the scan operation
    response = table.scan(
        #ScanIndexForward=False  # This will sort in descending order
    )

    # Extract items from the response
    items = response['Items']

    # Sort items based on a timestamp field (assuming you have one)
    # Replace 'timestamp' with your actual timestamp field name
    sorted_items = sorted(items, key=lambda x: x['timestamp'], reverse=True)

    # Get the last 5 items (or fewer if there are less than 5 items)
    last_five_items = sorted_items[:5]

    return {
        'statusCode': 200,
        'body': last_five_items,
        'headers': {
            "Access-Control-Allow-Origin": "*", 
            "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        }
    }

จากนั้นเรากด Test ดู เราจะเห็นหน้าต่างให้เราสร้าง Event
ผมจะตั้งชื่อไว้ว่า history-test แล้วกด Save

แล้วกด Test อีกที
หาเราได้คำแปลล่าสุดออกมาประมาณด้านล่างคือ โอเคครับ

แก้ไข API

เปิดหน้าต่าง API ที่เราสร้างขึ้น

กด Create resource

ในส่วนของ Resource name ให้เรากรอก history
ส่วน CORS ยังไม่ต้องติ๊กตอนนี้ เราจะไปสร้างต่อในขั้นต่อไป

กด Create resource

จากนั้นให้เรามาที่ /history แล้วเลือก Create method

จากนั้นเราเลือก Method type: GET
Lambda function：get-history-translate

แล้วจากนั้นเลือก Create method

จากนั้นเลือกเปิดการใช้งาน CORS ให้เรากด Enable CORS

☑GET
☑OPTION

เลือก Save

เท่านี้ถือว่าสร้างเสร็จแล้วครับ

ให้เรามาที่ในส่วน GET ของ /history ให้เรากด Deploy API

เลือก stage:dev

แล้วเลือก Deploy

ให้เรามาที่ในส่วน GET ของ /history แล้วทำการ Copy ลิ้งค์

แล้วนำไปเปิด หากได้ภาพประมาณด้านล่างนี้ถือว่าโอเคครับ

จากนั้นให้เราไปเปิดเปิดไฟล์ script.js ที่เราโหลดมา

ทำการเอาลิ้งค์ที่ Copy มาเอาไปใส่ใน API_ENDPOINT_HISTORY ของ function callHistory

แล้วทำการเปิดไฟล์ index.html ดู หากได้ตามภาพด้านล่างถือว่าเสร็จสิ้นครับ

ทิ้งท้าย

ในบทความนี้ เราได้ระบบ History ไปแล้ว ต่อไปเราจะพาอัพเว็บไซต์เราทั้งหมดลงใน AWS เพื่อให้ทั้งหมดเป็น Serverless ครับ

บทความ Part อื่นๆ

• ใช้ AWS Lambda เรียกใช้งาน Amazon Translate แปลภาษา : Part 1 | DevelopersIO
• ใช้ API Gateway เชื่อมต่อไปยัง Lambda เรียก API แปลภาษา : Part 2 | DevelopersIO
• ใช้ DynamoDB บันทึกข้อมูลจาก Lambda : Part 3 | DevelopersIO
• แก้ ensure_ascii=False เพื่อให้แปลภาษาอังกฤษ > ไทย แล้วตัวอักษรไม่เพี้ยน : Part 4 | DevelopersIO
• เพิ่มตัวแปรให้เพิ่มรูปแบบการแปลได้หลากหลายมากขึ้น : Part 5 | DevelopersIO
• ดาวน์โหลดโค้ด Front-end และ ตั้งค่า CORS : Part 6 | DevelopersIO
• เพิ่มฟังก์ชัน History ให้สามารถเรียกดูปะวัติการแปลได้ : Part 7 | DevelopersIO
• อัพโหลดเว็บไซต์ขึ้นบน S3 (Hosting Server) : Part 8 | DevelopersIO

บทความอ้างอิง

• AWS Lambda คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS | DevelopersIO
• Amazon API Gateway | การจัดการ API | Amazon Web Services
• Amazon DynamoDB คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS | DevelopersIO