[Update] วิธีการแสดงผลเว็บไซต์ที่สร้างจาก EC2 ด้วย CloudFront

Amazon CloudFront คืออะไร

Amazon CloudFront เป็น Web Cache Server ใช้แคชข้อมูลในการแสดงผล ทำให้สามารถเพิ่มความเร็วของการแสดงผลด้วยการแสดงเนื้อหาที่แคชบันทึกไว้จนกว่าแคชจะหมดอายุ ซึ่ง CloudFront จะบันทึกข้อมูลลงแคชไฟล์ โดยแคชไฟล์จะถูกเก็บอยู่ใน Edge location ต่างๆ ทั่วโลก เมื่อมีการเรียกใช้งานเว็บไซต์ ระบบจะดึงแคชไฟล์จาก Edge location ที่ใกล้ที่สุดมาแสดงผล

โดยมีการแสดงผลข้อมูลจากเซิร์ฟเวอร์ที่ใกล้กับผู้ใช้งานมากที่สุดเพื่อความรวดเร็วไม่ว่าเราจะอยู่ส่วนใดของโลกก็ตาม

ดูรายละเอียดเพิ่มเติมเกี่ยวกับ Amazon CloudFront ได้ที่ลิงก์ด้านล่างนี้
https://dev.classmethod.jp/articles/amazon-cloudfront-introducing-the-latest-aws-functions-in-2022/

สิ่งที่ต้องมี

EC2 Instance

・สร้าง EC2 Instance แล้ว

ดูตัวอย่างได้ที่ลิงก์บทความด้านล่างนี้
https://dev.classmethod.jp/articles/how-to-install-amazon-linux-2023-on-ec2-in-thailand-region/

เชื่อมโยง Elastic IP (EIP)

・เชื่อมโยง Elastic IP ให้กับ EC2 Instance แล้ว

ดูตัวอย่างได้ที่ลิงก์บทความด้านล่างนี้
https://dev.classmethod.jp/articles/how-to-link-eip-to-ec2-instance/

ติดตั้ง PHP 8.2 และ Apache

・ติดตั้ง PHP 8.2 และ Apache ใน Amazon Linux 2023 บน EC2 แล้ว

ดูตัวอย่างได้ที่ลิงก์บทความด้านล่างนี้
https://dev.classmethod.jp/articles/how-to-install-php82-and-apache-in-ec2-amazon-linux-2023/

เป้าหมายการทำ Amazon CloudFront

เราจะสร้าง Distribution ใน Amazon CloudFront โดยนำ Public DNS ของ EC2 Instance ไปใส่ใน Origin เพื่อแสดงผลเว็บไซต์ที่รันบน EC2 Instance ผ่าน Amazon CloudFront

การแสดงผลเว็บไซต์ผ่าน Amazon CloudFront

ก่อนอื่นให้คัดลอก Public DNS ในหน้าจอ Instance ที่จะใช้แสดงเว็บไซต์เตรียมไว้ แล้วสร้าง Distribution ใน CloudFront ในขั้นตอนถัดไป

สร้าง Distribution ใน CloudFront

ไปที่ช่อง Search แล้วค้นหาและเลือก CloudFront

กรณีที่ยังไม่เคยสร้าง Distribution มาก่อนจะแสดงหน้าจอเริ่มต้นของ CloudFront แบบนี้
จะคลิก Create a CloudFront distribution จากหน้าจอนี้เลยก็ได้

หรือจะเลือก Distributions จากเมนูด้านซ้าย แล้วคลิก Create distribution ด้านขวาที่หน้าจอนี้ก็ได้

แล้วเริ่มสร้าง Distribution ดังนี้

Step 1: Get started

・Distribution name: tinnakorn-al2023-cf
・Description - optional: tinnakorn-al2023-cf
・คลิก Next

Step 2: Specify origin

Origin type
・Other

Origin
・Custom origin: ec2-xx-xx-xx-xx.ap-southeast-7.compute.amazonaws.com

Settings
・Origin settings: Customize origin settings (ต้องป้อน Custom origin ก่อน แล้วเลือกอันนี้ จึงจะแสดงขึ้นมาตามรูป)
・Enable Origin Shield: No
・Protocol: HTTP only → [HTTP port: 80]
・คลิก Next

Step 3: Enable security

Enable security
・Web Application Firewall (WAF): Do not enable security protections (หากต้องการเพิ่มความปลอดภัยแนะนำให้เปิดใช้งาน)
・คลิก Next

ดูรายละเอียดเพิ่มเติมเกี่ยวกับ WAF ได้ที่ลิงก์ด้านล่างนี้
https://dev.classmethod.jp/articles/aws-2022-introductory-edition-aws-waf/

Step 4: Review and create

ตรวจสอบการตั้งค่าตั้งแต่ Step 1 - Step 3 แล้วคลิก Create distribution

เมื่อสร้างเสร็จแล้วจะแสดงหน้าจอแบบนี้ แล้วรอระบบเริ่มต้นสักครู่จนกว่าจะ Deploy เสร็จสิ้น

ทดสอบแสดงผลเว็บไซต์ด้วย Distribution domain name

หลังจาก Deploy เสร็จแล้ว ให้คัดลอก Distribution domain name เตรียมไว้

แล้วนำ Distribution domain name มาเปิดบนเว็บเบราว์เซอร์ ก็จะแสดงหน้าจอเว็บไซต์แบบนี้

https://xxxxxxxxxxxxxx.cloudfront.net/test.php

สรุป

การแสดงผลเว็บไซต์ผ่าน Amazon CloudFront จะช่วยให้เว็บไซต์มีความเร็ว และปลอดภัยกว่าการใช้ IP Address ที่ EC2 สร้างขึ้นให้โดยอัตโนมัติ

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

• วิธีการเปิดใช้งาน EC2 บน AWS Thailand Region (Amazon Linux 2023, PuTTY)
• วิธีเชื่อมโยง Elastic IP (EIP) ไปยัง EC2 Instance
• วิธีติดตั้ง PHP 8.2 และ Apache ใน Amazon Linux 2023 บน EC2
• Amazon CloudFront คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS
• AWS WAF คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS