โปรเจกต์ใน AWS

สร้างเว็บแอปพลิเคชันสมัยใหม่

ติดตั้งเว็บแอปพลิเคชันเพื่อใช้จริง เชื่อมต่อกับฐานข้อมูล และวิเคราะห์พฤติกรรมของผู้ใช้

โมดูลที่ 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 นาที

 บริการที่ใช้

คำแนะนำในการนำมาใช้งาน

  • ก: ลงชื่อเข้าใช้คอนโซล AWS

    เมื่อต้องการเริ่มต้น ให้ลงชื่อเข้าใช้ คอนโซล AWS สำหรับบัญชี AWS ที่คุณจะใช้ในเวิร์กช็อปนี้

    ข: เลือกเขต

    เว็บแอปพลิเคชันนี้สามารถติดตั้งใช้จริงได้ในเขต AWS ทุกเขตที่สนับสนุนบริการทั้งหมดที่ใช้ในแอปพลิเคชันนี้ โปรดอ้างอิงตารางเขต เพื่อดูเขตที่มีบริการที่สนับสนุน เขตที่ได้รับการสนับสนุน ประกอบด้วย:

    • สหรัฐอเมริกาฝั่งตะวันออก-1 (เวอร์จิเนียตอนเหนือ)
    • สหรัฐอเมริกาฝั่งตะวันออก-2 (โอไฮโอ)
    • สหรัฐอเมริกาฝั่งตะวันตก-2 (ออริกอน)
    • ยุโรปฝั่งตะวันตก-1 (ไอร์แลนด์)

    เลือกเขตจากรายการแบบเลื่อนลงที่มุมขวาบนของ AWS Management Console

  • ก: สร้างสภาพแวดล้อม AWS Cloud9 ใหม่

    ในหน้าหลักของคอนโซล AWS ให้พิมพ์ Cloud9 ลงในแถบค้นหาบริการแล้วเลือกบริการ:

    สร้างบอต Lex

    (คลิกเพื่อซูม)

    คลิก สร้างสภาพแวดล้อม ในหน้าหลัก Cloud9:

    สร้างบอต Lex

    (คลิกเพื่อซูม)

    สร้างบอต Lex

    ตั้งชื่อสภาพแวดล้อม MythicalMysfitsIDE พร้อมกับรายละเอียดใดๆ ที่คุณต้องการ แล้วคลิก ขั้นตอนถัดไป:

    สร้างบอต Lex

    (คลิกเพื่อซูม)

    สร้างบอต Lex

    เว้นการตั้งค่าสภาพแวดล้อมไว้ตามค่าเริ่มต้น แล้วคลิก ขั้นตอนถัดไป:

    สร้างบอต Lex

    (คลิกเพื่อซูม)

    สร้างบอต Lex

    เลือก สร้างสภาพแวดล้อม:

    สร้างบอต Lex

    (คลิกเพื่อซูม)

    สร้างบอต Lex

    เมื่อสร้าง IDE ให้กับคุณเสร็จแล้ว หน้าจอยินดีต้อนรับจะแสดงขึ้นมาซึ่งมีลักษณะคล้ายกับหน้าจอนี้:

    สร้างบอต Lex

    (คลิกเพื่อซูม)

    สร้างบอต Lex
    ข: โคลนคลังเวิร์กช็อป Mythical Mysfits

    ในแถบด้านล่าง คุณจะเห็นบรรทัดคำสั่งเทอร์มินัลเปิดอยู่และพร้อมใช้งาน เรียกใช้คำสั่ง Git ต่อไปนี้ในเทอร์มินัลเพื่อโคลนโค้ดที่จำเป็นเพื่อดำเนินการตามขั้นตอนของบทแนะนำสอนการใช้งานนี้ให้เสร็จสิ้น:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    หลังจากที่โคลนคลังแล้ว ตอนนี้คุณจะเห็น Project Explorer ที่มีไฟล์ที่โคลนรวมอยู่ด้วย:

    ไฟล์ที่โคลน

    (คลิกเพื่อซูม)

    ไฟล์ที่โคลน

    ในเทอร์มินัล เปลี่ยนไดเรกทอรี เป็นไดเรกทอรีคลังที่โคลนขึ้นมาใหม่:

    cd aws-modern-application-workshop
  • ก: สร้างบัคเก็ต 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:

    เปิดไฟล์ใน Cloud9

    (คลิกเพื่อซูม)

    เปิดไฟล์ใน Cloud9

    ซึ่งจะเปิด 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
    mysfits-welcome

    ยินดีด้วย คุณได้สร้างเว็บไซต์ Mythical Mysfits แบบสแตติกขั้นพื้นฐานสำเร็จแล้ว!

    จบโมดูลที่ 1

ถัดไปคือเรื่องโฮสต์แอปพลิเคชันบนเว็บเซิร์ฟเวอร์