การใช้ AWS Lambda @ Edge กับ CloudFront

Lambda @ Edge เป็นส่วนเสริมของบริการประมวลผล AWS Lambda ซึ่งใช้เพื่อปรับแต่งเนื้อหาที่ cloudfront มอบให้

แผนภาพบล็อกที่แสดงการทำงานของ AWS Lambda พร้อมระบบคลาวด์ฟรอนต์จาก AWS แสดงอยู่ด้านล่าง -

มีสี่วิธีในการใช้ AWS Lambda -

  • Viewer Request − ผู้ใช้ส่งคำขอที่เรียกว่า Viewer Request ไปยัง CloudFront

  • Origin Request − CloudFront ส่งต่อคำขอไปยังต้นทาง

  • Origin Response − CloudFront ได้รับการตอบสนองจากต้นทาง

  • Viewer Response − CloudFront ส่งการตอบสนองไปยังผู้ดู

เราสามารถใช้ Lambda @ Edge เพื่อวัตถุประสงค์ดังต่อไปนี้ -

  • เพื่อเปลี่ยนส่วนหัวตามคำขอและเวลาตอบสนอง

  • เพิ่มรายละเอียดคุกกี้ในส่วนหัว ทำการทดสอบ AB ตามคำขอและการตอบกลับ

  • เปลี่ยนเส้นทาง URL ไปยังไซต์อื่นโดยพิจารณาจากรายละเอียดส่วนหัว

  • เราสามารถดึง user-agent จากส่วนหัวและค้นหารายละเอียดของเบราว์เซอร์ OS และอื่น ๆ

ข้อกำหนด

ในการเริ่มต้นทำงานกับ CloudFront และ Lambda @ Edge เราจำเป็นต้องมีสิ่งต่อไปนี้ -

  • สร้างที่เก็บข้อมูล S3 พร้อมรายละเอียดไฟล์

  • สร้างบทบาทที่จะอนุญาตให้ทำงานกับ CloudFront และ Lambda @ Edge

  • สร้างการกระจาย CloudFront

  • สร้างฟังก์ชันแลมด้า

  • เพิ่มรายละเอียดฟังก์ชันแลมบ์ดาไปยังคลาวด์ฟร้อนท์

  • ตรวจสอบ URL ของ cloudfront ในเบราว์เซอร์

เราจะดำเนินการกับตัวอย่างด้วย CloudFront และ Lambda @ Egde ซึ่งเราจะโฮสต์เพจและเปลี่ยนการตอบสนองเมื่อตรวจพบว่าเป็นเดสก์ท็อปและอุปกรณ์

สร้าง S3 Storage Bucket พร้อมรายละเอียดไฟล์

เข้าสู่ระบบคอนโซล AWS และสร้างที่เก็บข้อมูลใน S3 และเพิ่มไฟล์ . html ไฟล์ที่คุณต้องการแสดง

คลิกที่ S3 และ Create bucket ดังแสดงด้านล่าง -

ตอนนี้คลิก Create bucket และเพิ่มรายละเอียดของถังตามที่แสดงด้านล่าง -

คลิกที่ Create และอัปโหลด. html ในนั้น

สร้างบทบาท

ไปที่คอนโซล AWS แล้วคลิก IAM.

ตอนนี้คลิก Roles -> Create role ปุ่มดังรูป -

เลือกการอนุญาตสำหรับ S3, Lambda และ Cloudfront. เป็นแนวทางปฏิบัติที่ดีในการสร้างนโยบายที่ให้สิทธิ์เฉพาะฟังก์ชันที่จำเป็นพื้นที่เก็บข้อมูลโดยใช้รายละเอียด ARN

ในตัวอย่างที่กล่าวถึงด้านล่างเรากำลังแสดงไฟล์ Full Accessการอนุญาต นโยบายสำหรับชื่อบทบาทrole for cloudfrontเพิ่มตามที่แสดงด้านบน คลิกที่สร้างบทบาท

นโยบายทั้งหมดที่จำเป็นสำหรับ lambda @ edge และ cloudfront มีดังที่แสดงไว้ด้านบน มีขั้นตอนเพิ่มเติมที่ต้องทำที่นี่เนื่องจากในกรณีของ cloudfront URL จะพร้อมใช้งานทั่วภูมิภาคและต้องการความสัมพันธ์ที่ไว้วางใจระหว่างบริการที่เราใช้

ตอนนี้สำหรับบทบาทที่สร้างขึ้นให้คลิกที่ Trust relationships tab ดังรูป -

คลิกที่ Edit Trust Relationship ดังแสดงด้านล่าง -

จะแสดงเอกสารนโยบาย เราจำเป็นต้องเพิ่มบริการอื่น ๆ ในไฟล์Principal -> Serviceที่เราวางแผนจะใช้ เอกสารนโยบายความสัมพันธ์ความไว้วางใจขั้นสุดท้ายมีดังที่แสดงด้านล่าง -

คลิก Update Trust Policy เพื่อบันทึกการเปลี่ยนแปลง

สร้างการกระจาย CloudFront

ไปที่บริการ CloudFront ดังที่แสดงด้านล่าง -

คลิกที่บริการ CloudFront และคลิกที่ Create Distribution -

การตั้งค่าแหล่งกำเนิดการตั้งค่าพฤติกรรมและการตั้งค่าการกระจาย

ให้เราตรวจสอบการตั้งค่าเหล่านี้ทีละรายการ -

Origin Settings

พารามิเตอร์ต่างๆของการตั้งค่า Origin มีคำอธิบายดังนี้ -

Origin Domain Name −นี่คือชื่อของถัง S3 ที่เราเก็บไฟล์ html นอกจากนี้เรายังสามารถจัดเก็บรูปภาพในถัง S3 ได้ด้วยการสร้างโฟลเดอร์ที่เราเลือก

Origin Path −ที่นี่คุณต้องป้อนชื่อของโฟลเดอร์ที่จัดเก็บไฟล์ ในปัจจุบันเราไม่มีโฟลเดอร์นี้ดังนั้นเราจะเว้นว่างไว้ในตอนนี้

Origin ID −จะได้รับการเติมข้อมูลเมื่อเลือกชื่อโดเมนต้นทาง คุณสามารถเปลี่ยนรหัสได้ตามที่คุณเลือก

Restrict Bucket Access − ในนี้เราจะเลือกตัวเลือก yes. ที่นี่เราต้องการความปลอดภัยสำหรับบัคเก็ต S3 เพื่อไม่ให้ใครสามารถเข้าถึงบัคเก็ต S3 ได้ สำหรับตัวเลือกนี้มีตัวเลือกเพิ่มเติมบางตัวเลือกเช่นOrigin Access Identity, Comment and Grant Read Permission on Bucket.

Origin Access Identity −เราได้ใช้ตัวเลือกสร้างเอกลักษณ์ใหม่ คุณยังสามารถเลือกข้อมูลประจำตัวที่มีอยู่ สิ่งนี้สร้างเอกลักษณ์ใหม่ซึ่ง CloudFront ใช้เพื่ออ่านรายละเอียดจากที่เก็บข้อมูล S3

Grand Read Permission on Bucket − สำหรับสิ่งนี้ให้เลือกตัวเลือก Yes.

Origin Custom Headers − เราจะเว้นส่วนหัวว่างไว้ตรงนี้เนื่องจากเราไม่ต้องการรายละเอียดในตอนนี้

ต่อไปให้เราพูดคุยและเติมเต็ม Behaviour Settings สำหรับการกระจาย Cloudront -

ตอนนี้เลือกโปรโตคอล - https หรือ http และตัวเลือกการแคช โปรดทราบว่าการแคชเริ่มต้นคือ 86400 หรือ 24 ชม. คุณสามารถเปลี่ยนค่านี้ได้ตามข้อกำหนด

คลิก Object Caching(ปรับแต่งตัวเลือก) เพื่อเปลี่ยนการแคช คุณสามารถใช้ได้smooth streamingในกรณีที่มีวิดีโอบนเพจของคุณ ที่นี่เรากำลังรักษาตัวเลือกเริ่มต้นไว้ เมื่อสร้างฟังก์ชันแลมบ์ดาแล้วจะมีการเพิ่มรายละเอียด

รายละเอียดสำหรับการตั้งค่าการแจกจ่ายแสดงไว้ด้านล่าง -

พารามิเตอร์ต่างๆของการตั้งค่าการกระจายอธิบายไว้ด้านล่าง -

Price class −มีรายละเอียดเช่นที่มาของการเข้าชมของผู้ใช้ โปรดทราบว่าที่นี่เราได้เลือกค่าเริ่มต้น -Use All Edge Locations.

AWS WAF Web ACL −ใช้สำหรับการเลือกไฟร์วอลล์เว็บแอปพลิเคชัน ที่นี่มีตัวเลือกเป็นNone. ขั้นแรกเราต้องสร้างไฟร์วอลล์ใน AWS ให้ความปลอดภัยกับไซต์

Alternate Domain Names − คุณสามารถระบุชื่อโดเมนได้ที่นี่หากคุณมี

SSL Certificate −นี่มีรายละเอียดทั้งหมดที่ต้องเลือกสำหรับใบรับรอง SSL เราจะเก็บค่าเริ่มต้นไว้

Default Root Object −ที่นี่เราจะระบุชื่อไฟล์ที่เราอัปโหลดใน S3 สำหรับสิ่งนี้เราต้องการให้เนื้อหาจาก. html แสดงตามค่าเริ่มต้น

ส่วนที่เหลือเราจะคงค่าเริ่มต้นไว้

คลิก Create Distribution เพื่อเพิ่มการกระจาย

โปรดทราบว่าการแจกจ่ายจะใช้เวลาสักครู่เพื่อแสดงสถานะว่าทำให้ใช้งานได้

สร้างฟังก์ชัน AWS Lambda

ไปที่คอนโซล AWS และสร้างฟังก์ชัน Lambda

ในรหัส AWS Lambda เราจะใช้ส่วนหัวของคำขอและตรวจสอบตัวแทนผู้ใช้ หาก user-agent มาจากเดสก์ท็อปเราจะเปลี่ยนการตอบกลับเพื่อแสดงข้อความเป็น“DESKTOP : Welcome to AWS Lambda with Cloudfront!” และหากอุปกรณ์ข้อความจะเป็น“MOBILE DEVICES : Hello from Lambda@Edge!”

รหัส AWS Lambda ที่สอดคล้องกันดังแสดงด้านล่าง -

let content = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple Lambda@Edge Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>MOBILE DEVICES : Hello from Lambda@Edge!</h1>
   </body>
</html>
`;
let content1 = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple Lambda@Edge Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>DESKTOP : Welcome to AWS Lambda with Cloudfront!</h1>
   </body>
</html>
`;
exports.handler = (event, context, callback) => {
   let request = event.Records[0].cf.request;
   let finalrequest = JSON.stringify(request);
   let headers = request.headers;
   let useragent = JSON.stringify(headers["user-agent"][0].value);
   let str = "";
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(useragent)) {
      str = content;
   } else {
      str = content1;
   }
   const response = {
      status: '200',
      statusDescription: 'OK',        
      body: str+useragent,
   };
   callback(null, response);
};

ตอนนี้บันทึกฟังก์ชัน Lambda โปรดทราบว่าเราจำเป็นต้องเผยแพร่ฟังก์ชัน Lambda เพื่อให้สามารถใช้งานได้กับทุกภูมิภาค ในการเผยแพร่เราต้องดำเนินการดังต่อไปนี้ -

จากรายการแบบเลื่อนลงการดำเนินการเลือก Publish new version ดังแสดงด้านล่าง -

หากคุณคลิก Publish new versionจะแสดงหน้าจอต่อไปนี้ -

ตอนนี้ป้อนคำอธิบายเวอร์ชันแล้วคลิก Publish. ARN จะแสดงเวอร์ชันของฟังก์ชัน AWS Lambda ที่สร้างขึ้นดังที่แสดงด้านล่าง -

เพิ่มทริกเกอร์ CloudFront ไปยังเวอร์ชันใหม่ที่สร้างขึ้นดังที่แสดงด้านล่าง -

ตอนนี้เพิ่มรายละเอียดการกำหนดค่าสำหรับ CloudFront เหตุการณ์ CloudFront มีตัวเลือกสำหรับViewer request, Origin request, Origin responseและ Viewer response.

จากนั้นเลือกการกระจาย CloudFront ที่สร้างขึ้นก่อนหน้านี้ จากeventsเราจะเลือก Viewer request. ตามคำขอของผู้ดูเดสก์ท็อป / อุปกรณ์จากตัวแทนผู้ใช้จะได้รับการตัดสินใจและการตอบสนองจะเปลี่ยนไป จากนั้นเพิ่มรายละเอียดทริกเกอร์

เมื่อเพิ่มทริกเกอร์แล้วเราต้องรอให้การแจกจ่ายจาก CloudFront ใช้งานได้

เมื่อสถานะเปลี่ยนเป็น Deployedเราสามารถทดสอบ URL ของ CloudFront และตรวจสอบชื่อโดเมนในเบราว์เซอร์

การแสดงผลในเบราว์เซอร์เดสก์ท็อปเป็นดังที่แสดงด้านล่าง ที่นี่เราได้พิมพ์ user-agent จากเหตุการณ์ viewer-request

นี่คือการแสดงผลในอุปกรณ์พกพา

ดังนั้นในตัวอย่างข้างต้นเราจึงใช้ Lambda @ Edge เพื่อเปลี่ยนการตอบสนองบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่