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

ซีรี่ส์ของบทความที่จะแนะนำวิธีการสร้าง Static Website โดยใช้ S3 และ CloudFront เป็นเครื่องมือหลัก พร้อมทั้งแนะนำขั้นตอนการทำอย่างละเอียด

Pisha Mangkalakere

2021.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

สวัสดีค่ะทุกคน กลับมาพบกับพิชชาอีกแล้วนะคะ วันนี้พิชชาก็มาพร้อมกับบทความต่อจาก How To Static Website EP1: แนะนำก่อนเริ่มต้นใช้งาน ที่ได้เขียนไปก่อนหน้านี้ค่ะ

ในบทความนี้พิชชาจะมาพูดถึงเจ้าตัว Amazon S3 และ Amazon CloudFront ซึ่งเป็น Service ของทาง AWS โดยพิชชาจะมาเล่าให้ทุกท่านฟังถึงทุก ๆ ขั้นตอนในการนำเว็บไซต์ของเราไป Deploy บน AWS ว่าทำอย่างไรบ้างค่ะ ถ้าทุกคนพร้อมแล้วก็ไปติดตามอ่านกันได้เลยค่ะ

Amazon S3 คืออะไร?

Amazon S3 หรือ Simple Storage Service เป็นบริการพื้นที่จัดเก็บที่สามารถเชื่อถือได้ และมีความปลอดภัยในการใช้งานสูง โดยมีการสำรองข้อมูลเอาไว้ถึง 3 แห่งตาม Availability Zone ส่งผลให้เกิดความเสียหายของข้อมูลหรือข้อมูลเกิดความล้มเหลวได้ยาก อีกทั้งยังมีความจุที่ไม่จำกัด โดยมีค่าธรรมเนียมตามขนาดของการใช้งานจริงเท่านั้น (ราคาในการจัดเก็บอยู่ที่ประมาณ 0.025 USD / GB / เดือน)

ขั้นตอนในการดึงข้อมูลเว็บไซต์มาลงบน Amazon S3

1. สร้าง S3 Bucket

เข้าไปที่หน้าของ Amazon S3

จากนั้นเลือก Create bucket

ใส่ชื่อ Bucket name เช่น "s3-cf-chawish-web" และเลือกใช้ Region ที่ใกล้ที่สุด (Asia Pacific (Singapore) ap-southeast-1)

เอาเครื่องหมายถูกในช่อง Block all public access ออก และทำเครื่องหมายถูกที่ช่อง I acknowledge that the current settings might result in this bucket and the objects within becoming public. แทน เสร็จแล้วก็ทำการกด Create bucket ได้เลย

2. อัพโหลดไฟล์เว็บไซต์ลงบน S3 Bucket

สามารถลากไฟล์เว็บไซต์ทั้งหมดลงไปที่ Bucket ที่เราสร้างเอาไว้ได้เลย

ไฟล์ทั้งหมดก็จะเข้ามาอยู่ใน Bucket ของเรา จากนั้นกด Upload

เมื่ออัพโหลดเสร็จเรียบร้อยแล้ว จะมีหน้าตาแบบนี้

กลับมาที่ Bucket ที่เราสร้างไว้ จากนั้นไปที่เมนู Properties

ไปที่ Static website hosting จากนั้นกด Edit และ ทำเครื่องหมายถูกที่ช่อง Enable

ในส่วนของ Index document ให้ใส่ index.html จากนั้นกด Save changes ได้เลย

3. เสร็จเรียบร้อย

เพียงเท่านี้เว็บไซต์ของเราก็ได้ถูกอัพโหลดไปบน Amazon S3 เรียบร้อยแล้ว

เพียงไม่กี่ขั้นตอนเราก็สามารถอัพโหลดไฟล์เว็บไซต์ลงบน Amazon S3 ได้แล้ว ไม่ยากเลยใช่ไหมคะ และต่อไปพิชชาจะมาพูดถึงวิธีการที่จะทำให้เว็บไซต์ของเราสามารถแสดงผลผ่าน Amazon Cloudfront ได้กันค่ะ

Amazon CloudFront คืออะไร?

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

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

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

1. สร้าง CloudFront Distribution

เข้าไปที่หน้าของ Amazon CloudFront

กดไปที่ Create distribution

ในส่วนของ Original domain ให้เลือกเป็นชื่อของ S3 Bucket ที่ได้สร้างไว้ก่อนหน้านี้ เช่น s3-cf-chawish-web

ในส่วนของ S3 bucket access ให้ตั้งค่าตามนี้ได้เลย
เลือก ◉ Yes use OAI (bucket can restrict access to only CloudFront)
ใส่ชื่อ S3 bucket ลงไปแล้วเลือก access-identity ที่ตามด้วยชื่อ S3 bucket ของเรา
เลือก Bucket policy: ◉ Yes, update the bucket policy

ในส่วนของ Default cache behavior ให้ตั้งค่าตามรูปภาพด้านบนนี้
เลือก Redirect HTTP to HTTPS
เลือก GET, HEAD, OPTIONS
เลือก ✅ OPTIONS

ในส่วนของ Cache key and origin requests ให้ตั้งค่าตามรูปภาพด้านบนนี้
เลือก Cache policy: CachingOptimized
เลือก Origin request policy - optional: CORS-S3Origin

ไปที่หัวข้อ Default root object ให้ใส่ index.html ตามนี้
ถัดมาใส่ Description (ใส่ข้อความอะไรก็ได้)
จากนั้นกด Create distribution ได้เลย

เมื่อสร้างเสร็จเรียบร้อยแล้วจะขึ้นหน้าตาแบบนี้

จากนั้นให้เรารอจนกว่าตัว Status จะเปลี่ยนเป็น Deployed

2. ทดสอบการ Deploy เว็บไซต์

หลังจาก Status เราเป็น Deployed เรียบร้อยแล้ว ให้เราทำการ Copy ตัว Domain name เพื่อนำไป Test ที่ Web browser

ตอนนี้เราก็ได้ทำการ Deploy เว็บไซต์ของเราขึ้นไปบน AWS โดยใช้ Amazon S3 และ Amazon CloudFront เรียบร้อยแล้ว

3. เช็ค Bucket policy (Optional)

เราลองมาเช็คในส่วนของ S3 Bucket ของเรากัน ให้เข้าไปที่หัวข้อ Permission จะเห็นได้ว่า Bucket policy มีการ Generate โค้ดขึ้นมาเองหลังจากสร้าง CloudFront โดยถ้าหากว่าเราสร้างแค่ S3 bucket ตรงส่วนของ Bucket policy นี้ก็จะยังไม่มีการสร้างขึ้นมา

นี่ก็เป็นขั้นตอนในการทำให้เว็บไซต์ของเราสามารถแสดงผลผ่าน Amazon CloudFront ค่ะ ไม่ยากเลยใช่ไหมคะ แต่ถ้าหากท่านใดที่ยังมีข้อสงสัยก็สามารถติดต่อเข้ามาที่ Classmethod Thailand ได้เลยนะคะ
ส่วนในวันนี้พิชชาก็ขอตัวลาไปก่อนนะคะ แล้วเจอกันใหม่ในบทความตอนต่อไปค่ะ

ทุกท่านสามารถอ่านบทความของซีรี่ส์ก่อนหน้าได้ที่
How To Static Website EP1: แนะนำก่อนเริ่มต้นใช้งาน

ข้อมูลในบทความนี้ที่พิชชานำมาเล่าให้ทุกท่านได้อ่านนะคะ ก็มาจากงานสัมมนา "งานสัมมนาออนไลน์สำหรับผู้เริ่มต้นใช้ AWS วิธีสร้างเว็บเพจ Static ในราคาที่แสนถูกด้วย S3+CloudFront" ของทาง Classmethod Thailand ที่ได้จัดขึ้น หากท่านใดที่สนใจงานสัมมนาอื่น ๆ ของทาง Classmethod Thailand ที่จะจัดขึ้นในอนาคต ทุกท่านสามารถเข้ามาดูในส่วนของตารางกิจกรรมได้ที่ Classmethod Thailand เลยค่ะ แล้วอย่าลืมติดตามตอนต่อไปกันนะคะ

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

Amazon S3 คืออะไร?