
สร้างเว็บไซต์แบบสแตติก
โมดูลที่ 1: สร้างเว็บไซต์แบบสแตติก
ในโมดูลนี้ คุณจะโฮสต์เว็บไซต์แบบสแตติกของคุณบน Amazon S3 และตั้งค่า IDE บนพื้นฐานระบบคลาวด์ AWS Cloud9
ภาพรวม
ในโมดูลนี้ เราจะโฮสต์เนื้อหาแบบสแตติก (html, js, css, เนื้อหาสื่อ ฯลฯ) ของเว็บไซต์ Mythical Mysfit ของเราบน Amazon S3 (Simple Storage Service) S3 คือบริการพื้นที่จัดเก็บอ็อบเจ็กต์ที่พร้อมใช้งานและความคงทนสูง อีกทั้งมีค่าบริการที่ไม่แพง ซึ่งสามารถให้บริการอ็อบเจ็กต์ที่จัดเก็บไว้ได้โดยตรงผ่าน HTTP ซึ่งตรงจุดนี้เองที่ทำให้บริการนี้มีประโยชน์อย่างยอดเยี่ยมในการให้บริการเนื้อหาเว็บแบบสแตติกไปยังเว็บเบราว์เซอร์โดยตรงสำหรับเว็บไซต์บนอินเทอร์เน็ต
ก่อนที่เราจะเริ่มต้นจัดเก็บ Mysfits ของเราใน S3 เรามาตั้งค่า AWS Cloud9 ให้คุณกันเถอะ Cloud9 คือสภาพแวดล้อมสำหรับการพัฒนาแบบเบ็ดเสร็จ (IDE) บนระบบคลาวด์ที่ให้คุณเขียน ใช้งาน และแก้จุดบกพร่องโค้ดได้เพียงแค่ใช้เบราว์เซอร์
แผนผังสถาปัตยกรรม

เวลาดำเนินการ
20 นาที
บริการที่ใช้
ลองใช้บน Github
คำแนะนำในการนำมาใช้งาน
-
ขั้นตอนที่ 1: เริ่มต้นใช้งาน
ก: ลงชื่อเข้าใช้คอนโซล AWS
เมื่อต้องการเริ่มต้น ให้ลงชื่อเข้าใช้ คอนโซล AWS สำหรับบัญชี AWS ที่คุณจะใช้ในเวิร์กช็อปนี้
ข: เลือกเขต
เว็บแอปพลิเคชันนี้สามารถติดตั้งใช้จริงได้ในเขต AWS ทุกเขตที่สนับสนุนบริการทั้งหมดที่ใช้ในแอปพลิเคชันนี้ โปรดอ้างอิงตารางเขต เพื่อดูเขตที่มีบริการที่สนับสนุน เขตที่ได้รับการสนับสนุน ประกอบด้วย:
- สหรัฐอเมริกาฝั่งตะวันออก-1 (เวอร์จิเนียตอนเหนือ)
- สหรัฐอเมริกาฝั่งตะวันออก-2 (โอไฮโอ)
- สหรัฐอเมริกาฝั่งตะวันตก-2 (ออริกอน)
- ยุโรปฝั่งตะวันตก-1 (ไอร์แลนด์)
เลือกเขตจากรายการแบบเลื่อนลงที่มุมขวาบนของ AWS Management Console
-
ขั้นตอนที่ 2: สร้าง Mythical Mysfit IDE ของคุณ
ก: สร้างสภาพแวดล้อม AWS Cloud9 ใหม่
ตั้งชื่อสภาพแวดล้อม MythicalMysfitsIDE พร้อมกับรายละเอียดใดๆ ที่คุณต้องการ แล้วคลิก ขั้นตอนถัดไป:
เมื่อสร้าง IDE ให้กับคุณเสร็จแล้ว หน้าจอยินดีต้อนรับจะแสดงขึ้นมาซึ่งมีลักษณะคล้ายกับหน้าจอนี้:
ข: โคลนคลังเวิร์กช็อป Mythical Mysfits
ในแถบด้านล่าง คุณจะเห็นบรรทัดคำสั่งเทอร์มินัลเปิดอยู่และพร้อมใช้งาน เรียกใช้คำสั่ง Git ต่อไปนี้ในเทอร์มินัลเพื่อโคลนโค้ดที่จำเป็นเพื่อดำเนินการตามขั้นตอนของบทแนะนำสอนการใช้งานนี้ให้เสร็จสิ้น:
git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git
ในเทอร์มินัล เปลี่ยนไดเรกทอรี เป็นไดเรกทอรีคลังที่โคลนขึ้นมาใหม่:
cd aws-modern-application-workshop
-
ขั้นตอนที่ 3: โฮสต์เว็บไซต์บน S3
ก: สร้างบัคเก็ต S3 และกำหนดค่าบัคเก็ตสำหรับการโฮสต์เว็บไซต์
ถัดจากนั้น เราจะสร้างองค์ประกอบของโครงสร้างพื้นฐานที่จำเป็นสำหรับการโฮสต์เว็บไซต์แบบสแตติกใน Amazon S3 ผ่าน AWS CLI
อันดับแรก คุณจะสร้างบัคเก็ต S3 และแทนที่ชื่อด้านล่าง (mythical-mysfits-bucket-name) ด้วยชื่อบัคเก็ตเฉพาะของคุณ หมายเหตุ: โปรดดูข้อกำหนดสำหรับชื่อบัคเก็ต คัดลอกชื่อที่คุณเลือกและบันทึกเพื่อใช้ในภายหลัง เนื่องจากคุณจะต้องใช้ชื่อนั้นหลายครั้งในที่อื่นๆ ระหว่างที่ฝึกใช้ในเวิร์กช็อปนี้:
aws s3 mb s3://REPLACE_ME_BUCKET_NAME
ตอนนี้เราได้สร้างบัคเก็ตขึ้นมาแล้ว เราจำเป็นต้องกำหนดตัวเลือกการกำหนดค่าบางอย่างที่ทำให้บัคเก็ตสามารถใช้สำหรับการโฮสต์เว็บไซต์แบบสแตติกได้ การกำหนดค่านี้จะทำให้สามารถขออ็อบเจ็กต์ในบัคเก็ตได้โดยใช้ชื่อ DNS สาธารณะที่จดทะเบียนสำหรับบัคเก็ตดังกล่าว รวมถึงกำหนดเส้นทางคำขอเว็บไซต์ไปยังเส้นทางพื้นฐานของชื่อ DNS เพื่อไปยังหน้าหลักของเว็บไซต์ที่เลือก (ในกรณีส่วนใหญ่คือ index.html):
aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
ข: อัปเดตนโยบายบัคเก็ต S3
บัคเก็ตทั้งหมดที่สร้างขึ้นใน Amazon S3 เป็นบัคเก็ตส่วนตัวโดยสมบูรณ์ตามค่าเริ่มต้น ในการที่จะใช้เป็นเว็บไซต์สาธารณะนั้น เราจำเป็นต้องสร้างนโยบายบัคเก็ต S3 ที่ระบุอ็อบเจ็กต์ที่จัดเก็บไว้ในบัคเก็ตใหม่นี้ ซึ่งอาจจะให้บุคคลทั่วไปสามารถเข้าถึงได้ นโยบายบัคเก็ตจะอยู่ในรูปของเอกสาร JSON ที่กำหนดการดำเนินการ S3 (การเรียกใช้ API ของ S3) ที่ได้รับอนุญาต (หรือไม่ได้รับอนุญาต) ให้ดำเนินการโดยผู้ใช้หลักที่ต่างกัน (ในกรณีของเราคือสาธารณะหรือบุคคลทั่วไป)
เอกสาร JSON สำหรับนโยบายบัคเก็ตที่จำเป็นอยู่ที่: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json ไฟล์นี้มีสตริงที่จำเป็นจะต้องแทนที่ด้วยชื่อบัคเก็ตที่คุณได้เลือกไว้ (ระบุด้วย REPLACE_ME_BUCKET_NAME)
หมายเหตุ: ตลอดการฝึกในเวิร์กช็อปนี้ คุณจะเปิดไฟล์ที่คล้ายคลึงกันซึ่งมีเนื้อหาที่จำเป็นต้องเปลี่ยน (ไฟล์ทั้งหมดจะขึ้นต้นด้วย REPLACE_ME_ เพื่อทำให้ง่ายต่อการค้นหาโดยใช้ CTRL-F บน Windows หรือ ⌘-F บน Mac)
เมื่อต้องการเปิดไฟล์ใน Cloud9 ให้ใช้ File Explorer ที่แถบด้านซ้าย และดับเบิลคลิกที่ website-bucket-policy.json:
ซึ่งจะเปิด bucket-policy.json ในแถบตัวแก้ไขไฟล์ แทนที่สตริงที่แสดงขึ้นมาด้วยชื่อบัคเก็ตที่คุณเลือกไว้ซึ่งใช้ในคำสั่งก่อนหน้า:
ปฏิบัติการคำสั่ง CLI ต่อไปนี้ เพื่อเพิ่มนโยบายบัคเก็ตสาธารณะลงในเว็บไซต์ของคุณ:
aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
ค: เผยแพร่เนื้อหาของเว็บไซต์ไปยัง S3
ตอนนี้ บัคเก็ตใหม่ของเว็บไซต์ก็ได้รับการกำหนดค่าอย่างเหมาะสมแล้ว เรามาเพิ่มการปฏิบัติทวนซ้ำครั้งแรกของหน้าหลักของ Mythical Mysfits ให้กับบัคเก็ตกันเถอะ ใช้คำสั่ง S3 CLI ต่อไปนี้ที่เลียนแบบคำสั่งสำหรับการคัดลอกไฟล์ (cp) ของ Linux เพื่อคัดลอกหน้าดัชนี.html ที่ให้มาภายในเครื่องจาก IDE ของคุณไปยังบัคเก็ต S3 อันใหม่ (การเปลี่ยนชื่อบัคเก็ตอย่างเหมาะสม)
aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html
ตอนนี้ ให้เปิดเว็บเบราว์เซอร์ตัวโปรดของคุณขึ้นมา แล้วป้อน URI อันใดอันหนึ่งที่อยู่ด้านล่างลงในแถบที่อยู่ หนึ่งใน URI ด้านล่างนี้มีเครื่องหมาย '.' หน้าชื่อเขต ส่วน URI อื่นๆ มีเครื่องหมาย '-' หน้าชื่อเขต URI ที่คุณควรเลือกใช้นั้น ขึ้นอยู่กับเขตที่คุณกำลังใช้งาน
สตริงที่จะแทนที่ REPLACE_ME_YOUR_REGION ควรตรงกับเขตที่คุณสร้างบัคเก็ต S3 (เช่น: สหรัฐอเมริกาฝั่งตะวันออก-1):
สำหรับสหรัฐอเมริกาฝั่งตะวันออก-1 (เวอร์จิเนียตอนเหนือ) สหรัฐอเมริกาฝั่งตะวันตก-2 (ออริกอน), ยุโรปฝั่งตะวันตก-1 (ไอร์แลนด์) ให้ใช้:
http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com
สำหรับสหรัฐอเมริกาฝั่งตะวันออก-2 (โอไฮโอ) ให้ใช้:
http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
ยินดีด้วย คุณได้สร้างเว็บไซต์ Mythical Mysfits แบบสแตติกขั้นพื้นฐานสำเร็จแล้ว!
จบโมดูลที่ 1