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

สวัสดีค่ะทุกคน กลับมาพบกับพิชชาอีกแล้วนะคะ วันนี้พิชชาก็มาพร้อมกับบทความต่อจาก 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 ใช้แคชข้อมูลในการใช้งาน ทำให้สามารถเพิ่มความเร็วของการแสดงผลด้วยการแสดงเนื้อหาที่แคชบันทึกไว้จนกว่าแคชจะหมดอายุ

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

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

1. สร้าง CloudFront Distribution

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

กดไปที่ Create distribution

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

เลือก S3 bucket access และ Bucket policy เป็น Yes จากนั้นเข้าไป Create new OAI

จากนั้นใส่ชื่อเป็น access identity- จากนั้นตามด้วยชื่อ S3 Bucket ที่ได้สร้างไว้ และกด Create

จากนั้นไปที่หัวข้อ Default root object ให้ใส่ index.html จากนั้นกด 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 เลยค่ะ แล้วอย่าลืมติดตามตอนต่อไปกันนะคะ

สอบถามเพิ่มเติมเกี่ยวกับ AWS คลิกที่นี่