ใช้ 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
