ดูรูปภาพใน S3 ผ่าน CloudFront ด้วย OAI

2022.09.30

ต้า ครับ!

วันนี้เราจะมาลองใช้ฟังก์ชัน OAI ของ CloudFront ในการดึงรูปภาพที่อยู่ใน S3 ออกมาดูกันครับ
(รูปอธิบายประมาณนี้)

โดยฟังก์ชัน OAI(Origin Access Identity) คือการตั้งค่าอนุญาตให้ CloudFront สามารถเข้าไปดึงไฟล์ที่อยู่ใน S3 มาจำหน่ายต่อ User ได้

configure CloudFront to send authenticated requests to Amazon S3, and configure Amazon S3 to only allow access to authenticated requests from CloudFront. CloudFront provides two ways to send authenticated requests to an Amazon S3 origin: origin access control (OAC) and origin access identity (OAI).
Restricting access to an Amazon S3 origin - Amazon CloudFront

ซึ่งจำทำให้ User ไม่ต้องทำการเชื่อมต่อไปยัง S3 แต่สามารถดูภาพได้จาก CloudFront ครับ
งั้นเรามาลองทำกันเลยครับ

เริ่มลงมือ

สำหรับใครที่ไม่เคยใช้งาน S3 จริงๆ สามารถวิธีแบบมีรูปภาพได้ที่ลิ้งค์ด้านล่างนี้

How To Static Website EP2: การเก็บข้อมูลเว็บไซต์ลงบน Amazon S3 เพื่อให้ไปแสดงผลผ่าน Amazon CloudFront | DevelopersIO

ให้เราไปยังเมนู S3 ใน Management Console แล้วทำการสร้าง Bucket แล้วก็ตั้งค่าตามนี้ครับ

  • Block Public Access settings for this bucket: ✅Block all public access

จากนั้นให้เราทำการอัพโหลดไฟล์รูปภาพสักอย่างลงไปครับ

ในตอนนี้หากเราลองทำการเปิด Object URL ของภาพที่เราอัพไปผ่าน S3 ดูจะพบว่าเราไม่สามารถเปิดดูได้ครับ

จากนั้นให้เราไปยังเมนู CloudFront จากนั้นเรากดเข้าไปที่ Distribution ที่สร้าง แล้วเลือก Behaviors กด Create behavior แล้วตั้งค่าตามนี้

  • ในส่วน Origin domain ให้เลือก Bucket ที่เราสร้างขึ้น
  • ตั้งชื่อในส่วน Name
  • ในส่วน Origin access ให้เราเลือกLegacy access identities
  • ในส่วน Origin access identity ให้กดCreate new OAIแล้วเลือกที่เราสร้างขึ้น
  • ในส่วน Bucket policy ให้เลือกYes, update the bucket policy

เมื่อสร้างเสร็จให้เรารอให้ขึ้น Status เป็น Enabled ถึงจะใช้งานได้ ```

จากนั้นทำการ Copy Distribution domain name และชื่อไฟล์ แล้วเปิด browser พิมพ์ตามนี้ลงไป
{Distribution domain name}/{ชื่อไฟล์}
เช่น https://dxxxxxxxx.cloudfront.net/Ufenau_-_Oryctolagus_cuniculus_2011-07-25_17-33-40.jpg


เราก็จะเจอกับภาพที่เราอัพลงไป

สรุป

ก็จบไปแล้วครับกับการดูรูปภาพใน S3 ผ่าน CloudFront ด้วย OAI และในบทความต่อไปที่ผมจะมาเขียนเกี่ยวกับ OAC(Origin Access Control) ซึ่งเป็นเวอร์ชั่นพัฒนาของ OAI มาให้ทุกคนได้อ่านกันครับ

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

ดูรายละเอียดเพิ่มเติมได้ที่นี่ สอบถามเพิ่มเติมเกี่ยวกับ AWS คลิกที่นี่