![[Update] วิธีการสร้างเว็บไซต์แบบ Static โดยใช้ S3 + CloudFront (ใช้งาน OAC)](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-f66629e23bafcf47fa6477fd0349a4f7/3e371b05917375d87daf613d54a600d8/amazon-cloudfront?w=3840&fm=webp)
[Update] วิธีการสร้างเว็บไซต์แบบ Static โดยใช้ S3 + CloudFront (ใช้งาน OAC)
สวัสดีครับ POP จากบริษัท Classmethod (Thailand) ครับ
เนื่องจาก UI ของขั้นตอนการสร้าง Amazon CloudFront มีการเปลี่ยนแปลง จึงมาอัปเดตในบทความนี้ครับ
เป้าหมาย
Service ที่ใช้ในบทความนี้คือ:
- Amazon S3
- Buckets
- Amazon CloudFront
- Distributions
- Origin access
เตรียม S3 Bucket สำหรับใช้ Web Hosting
การสร้าง Buckets ใน Amazon S3
Login เข้ามาที่ AWS Management Console แล้วเลือก Thailand Region เตรียมไว้
ค้นหาและเลือก S3
เลือก General purpose buckets จากเมนูด้านซ้าย และคลิก Create bucket ด้านขวา
การตั้งค่า General configuration
・AWS Region: Asia Pacific (Thailand) ap-southeast-7 (หากเลือก Thailand Region เตรียมไว้ในตอนแรกก็จะแสดงแบบนี้ ดังนั้นโปรดตรวจสอบในส่วนนี้ให้แน่ใจว่าดำเนินการอยู่ใน Thailand Region)
・Bucket name: tinnakorn-test-s3 (ป้อนชื่อตามต้องการ)
เลื่อนลงมาด้านล่างสุด คลิกปุ่ม Create bucket
เตรียมไฟล์ HTML
ครั้งนี้จะสร้างไฟล์ HTML โดยเปิด Notepad ใน Windows แล้วป้อนโค้ดตามด้านล่างนี้ แล้วบันทึกเป็นชื่ออะไรก็ได้ เช่น index.html (ต้องลงท้ายด้วย .html)
<html><body>test</body></html>
แล้วจะอัปโหลดใน Bucket ในขั้นตอนถัดไป
อัปโหลดไฟล์ลงใน Bucket
เมื่อเตรียมไฟล์เสร็จแล้ว เข้าไปที่หน้า Bucket ของเรา
เลือกแท็บ Objects แล้วอัปโหลดไฟล์โดยคลิก Upload แล้วเลือก File ที่เราเตรียมไว้
หรือคลิกที่ไฟล์ค้างไว้แล้วลากมาวางใน Object ตามรูปภาพก็ได้
แล้วจะเห็นไฟล์ที่เราจะอัปโหลดแสดงขึ้นมาแบบนี้ จากนั้นคลิก Upload ด้านล่างสุด
แล้วคลิก Close ก็จะแสดงหน้าจอแบบนี้
สร้าง Amazon CloudFront สำหรับแสดงผลเว็บไซต์จาก S3
ไปที่ช่อง Search แล้วค้นหาและเลือก CloudFront
กรณีที่ยังไม่เคยสร้าง Distribution มาก่อนจะแสดงหน้าจอเริ่มต้นของ CloudFront แบบนี้
จะคลิก Create a CloudFront distribution จากหน้าจอนี้เลยก็ได้
หรือจะเลือก Distributions จากเมนูด้านซ้าย แล้วคลิก Create distribution ด้านขวาที่หน้าจอนี้ก็ได้
แล้วเริ่มสร้าง Distribution ดังนี้
Step 1: Get started
・Distribution name: tinnakorn-test-cf
・Description - optional: tinnakorn-test-cf
・คลิก Next
Step 2: Specify origin
Origin type
・Amazon S3
Origin
・S3 origin: คลิก Browse S3
ค้นหาและเลือก Bucket ที่ใช้เป็น Web Hosting แล้วคลิก Choose
แล้ว S3 origin จะแสดงเป็น [bucket_name].s3.ap-southeast-7.amazonaws.com แบบนี้
Settings
・Allow private S3 bucket access to CloudFront: ติ๊ก ✅️ Allow private S3 bucket access to CloudFront - Recommended ตามค่าเริ่มต้น
※ในส่วนของ Origin settings จะไม่ตั้งค่าใดๆ แต่จะตั้งค่าแค่ Cache settings ในขั้นตอนถัดไป
ให้ตั้งค่า Cache settings ดังนี้
・Cache settings: Customize cache settings (เมื่อเลือกแล้ว จะมีฟังก์ชันต่างๆ ขยายออกมา)
・Viewer protocol policy: Redirect HTTP to HTTPS
・Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
・Cache policy: CachingOptimized
・Origin request policy - optional: CORS-S3Origin
・คลิก Next
Step 3: Enable security
Enable security
・Web Application Firewall (WAF): Do not enable security protections (หากต้องการเพิ่มความปลอดภัยแนะนำให้เปิดใช้งาน)
・คลิก Next
ดูรายละเอียดเพิ่มเติมเกี่ยวกับ WAF ได้ที่ลิงก์ด้านล่างนี้
Step 4: Review and create
ตรวจสอบการตั้งค่าตั้งแต่ Step 1 - Step 3 แล้วคลิก Create distribution
เมื่อสร้างเสร็จแล้วจะแสดงหน้าจอแบบนี้ แล้วรอระบบเริ่มต้นสักครู่จนกว่าจะ Deploy เสร็จสิ้น
ตรวจสอบ Bucket policy ใน S3
เข้ามาที่หน้าจอ S3 Bucket ของเรา แล้วเลือกแท็บ Permissions
เลื่อนลงมาด้านล่างที่หัวข้อ Bucket policy ก็จะเห็น Policy ที่กำหนดค่าของ CloudFront กับ S3 แบบนี้
ตั้งค่า Default root object
มาที่หน้าจอ CloudFront เลือกแท็บ General แล้วคลิก Edit ในหัวข้อ Settings
เลื่อนลงมาที่หัวข้อ Default root object - optional แล้วป้อน path index.html และคลิก Save changes
ดูที่ Default root object ในช่อง Settings จะเห็นว่ามี index.html แสดงขึ้นมาแล้ว
ทดสอบแสดงผล Web Hosting ของ S3 ด้วย Distribution domain name ของ CloudFront
มาที่หน้าจอ CloudFront แล้วคลิกไอคอนคัดลอกที่ Distribution domain name เตรียมไว้
แล้วนำ Distribution domain name มาเปิดบนเว็บเบราว์เซอร์ ก็จะแสดงหน้าจอเว็บไซต์แบบนี้
https://xxxxxxxxxxxxxx.cloudfront.net
การลบ AWS Resource ที่สร้างขึ้น
การลบ General purpose buckets ใน S3
※ก่อนอื่นเราต้องทำให้ Bucket เป็น Empty ก่อน จึงจะสามารถลบได้
เข้ามาที่หน้าจอ Amazon S3 แล้วดำเนินการดังนี้
- เลือก
General purpose bucketsจากเมนูด้านซ้าย - ค้นหา S3 Bucket ที่จะลบ
- เลือก S3 Bucket ที่จะลบ
- เลือก
Empty
ป้อน permanently delete ลงในช่องตามคำแนะนำ แล้วคลิก Empty
ระบบจะเปลี่ยนมาหน้าจอสถานะการลบ แล้วคลิก Exit
ค้นหาและเลือก S3 Bucket ที่จะลบอีกครั้ง แล้วเลือก Delete
แล้วป้อนชื่อ S3 Bucket ลงในช่องตามคำแนะนำ แล้วคลิก Delete bucket
การลบ Distributions ใน CloudFront
※ก่อนอื่นเราต้อง Disable ตัว Distribution ก่อน จึงจะสามารถลบได้
เข้ามาที่หน้าจอ Amazon CloudFront แล้วดำเนินการดังนี้
เลือก Distributions จากเมนูด้านซ้าย แล้วเลือก ID ที่จะลบ แล้วคลิก Disable
คลิก Disable
แล้วเลือก ID ที่จะลบอีกครั้ง แล้วคลิก Delete
คลิก Delete
ต่อไปเลือก Origin access ในหัวข้อ Security จากเมนูด้านซ้าย แล้วเลือก ID ที่จะลบ และคลิก Delete
แล้วคลิก Delete
เพียงเท่านี้การลบ Resource ก็เสร็จเรียบร้อย
ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ
POP จากบริษัท Classmethod (Thailand) ครับ !
