โครงการใน AWS:

สร้างเว็บแอปพลิเคชันแบบไร้เซิร์ฟเวอร์

ด้วย AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB และ Amazon Cognito

ข้อมูลเบื้องต้น

โฮสต์เว็บไซต์แบบสแตติก

จัดการผู้ใช้

สร้างแบ็คเอนด์แบบไร้เซิร์ฟเวอร์

ติดตั้ง RESTful API เพื่อใช้จริง

กำจัดทรัพยากร

โมดูล 1 การโฮสต์เว็บแบบสแตติก

ในโมดูลนี้ คุณจะต้องกำหนดค่า Amazon Simple Storage Service (S3) เพื่อโฮสต์ทรัพยากรแบบสแตติกสำหรับเว็บแอปพลิเคชันของคุณ ในโมดูลลำดับถัดไป คุณจะต้องเพิ่มฟังก์ชันการทำงานแบบไดนามิกไปยังหน้าเหล่านี้โดยใช้ JavaScript เพื่อเรียกใช้ RESTful API ระยะไกลที่สร้างด้วย AWS Lambda และ Amazon API Gateway

ภาพรวมของสถาปัตยกรรม

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

สำหรับวัตถุประสงค์ของโมดูลนี้ คุณจะต้องใช้ URL ตำแหน่งข้อมูลเว็บไซต์ของ Amazon S3 ที่เราจัดเตรียมให้ ซึ่งอยู่ในรูปแบบ http://{your-bucket-name}.s3-website.{region}.amazonaws.com สำหรับแอปพลิเคชันจริงส่วนใหญ่ คุณจะใช้โดเมนแบบกำหนดเองเพื่อโฮสต์เว็บไซต์ของคุณ หากคุณสนใจที่จะใช้โดเมนของตนเอง โปรดทำตามคำแนะนำสำหรับเอกสารประกอบการตั้งค่าเว็บไซต์แบบสแตติกโดยใช้โดเมนแบบกำหนดเองใน Amazon S3

ระยะเวลาที่ใช้ในการศึกษาโมดูล: 30 นาที

บริการที่ใช้: Amazon S3

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

เขต เทมเพลต CloudFormation
สหรัฐอเมริกาฝั่งตะวันออก (เวอร์จิเนียเหนือ) เปิดใช้งานสแต็ก >
สหรัฐอเมริกาฝั่งตะวันออก (โอไฮโอ) เปิดใช้งานสแต็ก >
สหรัฐอเมริกาฝั่งตะวันตก (ออริกอน) เปิดใช้งานสแต็ก >
สหภาพยุโรป (แฟรงเฟิร์ต) เปิดใช้งานสแต็ก >
สหภาพยุโรป (ไอร์แลนด์) เปิดใช้งานสแต็ก >
สหภาพยุโรป (ลอนดอน) เปิดใช้งานสแต็ก >
เอเชียแปซิฟิก (โตเกียว) เปิดใช้งานสแต็ก >
เอเชียแปซิฟิก (โซล) เปิดใช้งานสแต็ก >
เอเชียแปซิฟิก (ซิดนีย์) เปิดใช้งานสแต็ก >
เอเชียแปซิฟิก (มุมไบ) เปิดใช้งานสแต็ก >

คำแนะนำในการเปิดใช้งาน CloudFormation

  1. คลิกลิงก์ เปิดใช้งานสแต็ก ด้านบนสำหรับเขตที่คุณต้องการ

  2. คลิก ถัดไป ในหน้า “เลือกเทมเพลต”

  3. ระบุชื่อเฉพาะสากลสำหรับ ชื่อบัคเก็ตเว็บไซต์ เช่น wildrydes-yourname และคลิก ถัดไป

  4. ในหน้า “ตัวเลือก” ปล่อยไว้เป็นค่าเริ่มต้นทั้งหมดและคลิก ถัดไป

  5. ในหน้า “ตรวจสอบ” ให้เลือกกล่องกาเครื่องหมายเพื่อรับทราบว่า CloudFormation จะสร้างทรัพยากร IAM และคลิก สร้าง

    เทมเพลตนี้ใช้ทรัพยากรแบบกำหนดเองเพื่อคัดลอกสินทรัพย์ของเว็บไซต์แบบสแตติกจากบัคเก็ต S3 กลางลงในบัคเก็ตเฉพาะของคุณเอง ทรัพยากรแบบกำหนดเองจะต้องสร้างบทบาท IAM ที่สามารถใช้สิทธิ์ของบทบาทเหล่านั้นได้ เพื่อให้สามารถเขียนไปยังบัคเก็ตใหม่ในบัญชีของคุณได้

  6. รอให้สแต็ก wildrydes-webapp-1 มีสถานะเป็น CREATE_COMPLETE

  7. เมื่อเลือกสแต็ก wildrydes-webapp-1 แล้ว ให้คลิกแท็บ เอาต์พุต และคลิกลิงก์ URL ของเว็บไซต์

  8. ตรวจสอบว่าหน้าหลักของ Wild Rydes โหลดได้อย่างถูกต้องแล้วดำเนินการต่อไปยังโมดูลถัดไป “การจัดการผู้ใช้”

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

ทำตามคำแนะนำแบบทีละขั้นตอนด้านล่างเพื่อโฮสต์เว็บไซต์แบบสแตติก คลิกหมายเลขขั้นตอนแต่ละหมายเลขเพื่อขยายส่วนนั้น

  • ขั้นตอนที่ 1 เลือกเขต

    เลือกเขต

    เว็บแอปพลิเคชันนี้สามารถติดตั้งใช้จริงได้ในเขต AWS ทุกเขตที่สนับสนุนบริการทั้งหมดที่ใช้ในแอปพลิเคชันนี้ ซึ่งรวมถึง Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 และ Amazon DynamoDB

    คุณสามารถอ้างอิง ตารางเขต เพื่อดูได้ว่าเขตใดบ้างที่มีบริการที่สนับสนุน เขตที่สนับสนุนที่คุณสามารถเลือกได้ ได้แก่

    • สหรัฐอเมริกาฝั่งตะวันออก (เวอร์จิเนียเหนือ)
    • สหรัฐอเมริกาฝั่งตะวันออก (โอไฮโอ)
    • สหรัฐอเมริกาฝั่งตะวันตก (ออริกอน)
    • สหภาพยุโรป (แฟรงเฟิร์ต)
    • สหภาพยุโรป (ไอร์แลนด์)
    • สหภาพยุโรป (ลอนดอน)
    • เอเชียแปซิฟิก (โตเกียว)
    • เอเชียแปซิฟิก (โซล)
    • เอเชียแปซิฟิก (ซิดนีย์)
    • เอเชียแปซิฟิก (มุมไบ)

     

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

    (คลิกเพื่อขยาย)

  • ขั้นตอนที่ 2 สร้างบัคเก็ต S3

    สร้างบัคเก็ต S3

    Amazon S3 สามารถใช้ในการโฮสต์เว็บไซต์แบบสแตติกได้โดยไม่ต้องกำหนดค่าหรือจัดการเว็บเซิร์ฟเวอร์ใดๆ ในขั้นตอนนี้ คุณจะต้องสร้างบัคเก็ต S3 ใหม่ที่จะใช้ในการโฮสต์สินทรัพย์แบบสแตติกทั้งหมด (เช่น HTML, CSS, JavaScript และไฟล์รูปภาพ) สำหรับเว็บแอปพลิเคชันของคุณ 

    ในขั้นตอนนี้ คุณจะต้องใช้ Console หรือ AWS CLI เพื่อสร้างบัคเก็ต Amazon S3 โปรดอย่าลืมว่าชื่อบัคเก็ตของคุณจะต้องมีความเฉพาะตัวที่เป็นสากล เราขอแนะนำให้ใช้ชื่ออย่าง wildrydes-firstname-lastname หากได้รับข้อผิดพลาดที่ระบุว่ามีชื่อบัคเก็ตของคุณอยู่แล้ว ให้ลองเพิ่มตัวเลขหรืออักขระจนกว่าจะพบชื่อที่ยังไม่เคยใช้

    1. ใน AWS Management Console ให้เลือก บริการ จากนั้นเลือก S3 ภายใต้ “พื้นที่จัดเก็บ”
    2. เลือก +สร้างบัคเก็ต
    3. ระบุชื่อเฉพาะสากลสำหรับชื่อบัคเก็ตของคุณ เช่น wildrydes-firstname-lastname หากได้รับข้อผิดพลาดที่ระบุว่ามีชื่อบัคเก็ตของคุณอยู่แล้ว ให้ลองเพิ่มตัวเลขหรืออักขระจนกว่าจะพบชื่อที่ยังไม่เคยใช้
    4. เลือกเขตที่คุณได้เลือกไว้เพื่อใช้สำหรับเวิร์กช็อปนี้จากรายการแบบเลื่อนลง
    5. เลือก สร้าง ที่ด้านซ้ายล่างของกล่องโต้ตอบโดยไม่ต้องเลือกบัคเก็ตที่จะคัดลอกการตั้งค่า

  • ขั้นตอนที่ 3 อัปโหลดเนื้อหา

    อัปโหลดเนื้อหา

    ในขั้นตอนนี้ คุณจะต้องอัปโหลดสินทรัพย์ของเว็บไซต์สำหรับโมดูลนี้ไปยังบัคเก็ต S3 ของคุณ คุณสามารถใช้ AWS Management Console (ต้องใช้เบราว์เซอร์ Google Chrome), AWS CLI หรือเทมเพลต CloudFormation ที่จัดเตรียมให้เพื่อดำเนินการขั้นตอนนี้ให้เสร็จสมบูรณ์ หากคุณติดตั้งและกำหนดค่า AWS CLI ลงในเครื่องเฉพาะของคุณอยู่แล้ว เราขอแนะนำให้ใช้วิธีการดังกล่าว หรือใช้ Console หากคุณได้ติดตั้ง Google Chrome เวอร์ชันล่าสุดเอาไว้ 

    คำแนะนำแบบทีละขั้นตอนสำหรับ Console

    หากต้องการอัปโหลดไฟล์และไดเรกทอรีย่อยทั้งหมดในไดเรกทอรีภายในผ่านทาง AWS Management Console คุณจะต้องใช้เว็บเบราว์เซอร์ Chrome เวอร์ชันล่าสุด หากไม่สามารถใช้ Chrome ได้ โปรดทำตามคำแนะนำสำหรับการใช้ AWS CLI หรือเทมเพลต CloudFormation ที่จัดเตรียมให้

    1. ดาวน์โหลดข้อมูลเก็บถาวรของที่เก็บนี้โดยใช้ลิงก์นี้

    2. แตกไฟล์การเก็บถาวรที่ดาวน์โหลดมาในเครื่องเฉพาะของคุณ

    3. เปิด AWS Management Console ใน Chrome เลือก บริการ จากนั้นเลือก S3 ภายใต้ “พื้นที่จัดเก็บ”

    4. เลือกบัคเก็ตที่สร้างไว้ในขั้นตอนก่อนหน้านี้และตรวจสอบให้แน่ใจว่าคุณกำลังดูแท็บ ภาพรวม

    5. เปิด File Explorer บน Windows หรือ Finder บน macOS และเรียกดูไปยังเนื้อหาที่ขยายของไฟล์ Zip ที่คุณดาวน์โหลดในขั้นตอนแรก

    6. เรียกดูไปยังไดเรกทอรี WebApplication/1_StaticWebHosting/website ในเครื่องเฉพาะของคุณ

    7. เลือกไฟล์และไดเรกทอรีย่อยทั้งหมดในไดเรกทอรีของเว็บไซต์ ตรวจสอบให้แน่ใจว่าไม่ได้เลือกตัวไดเรกทอรีของเว็บไซต์เอง

    8. ลากแล้วปล่อยไฟล์ที่เลือกจากระบบไฟล์ในเครื่องของคุณลงในเนื้อหาภายใต้แท็บ ภาพรวม ใน Console ของ S3

    9. เลือก อัปโหลด ที่ด้านซ้ายล่างของกล่องโต้ตอบที่ปรากฏขึ้นมา

    10. รอให้การอัปโหลดเสร็จสมบูรณ์ และตรวจสอบให้แน่ใจว่าคุณเห็นเนื้อหาไดเรกทอรีของเว็บไซต์ระบุอยู่ใน Console ของ S3 หากเห็นไดเรกทอรีของ เว็บไซต์ เพียงรายการเดียว คุณควรลบไดเรกทอรีนั้นออกจากบัคเก็ตแล้วทำตามคำแนะนำนี้อีกครั้ง โดยดูให้แน่ใจว่าคุณเลือกเฉพาะเนื้อหาของไดเรกทอรีเท่านั้นก่อนที่จะลากแล้วปล่อยลงใน Console ของ S3

    คำแนะนำแบบทีละขั้นตอนสำหรับ CLI

    หากคุณติดตั้งและกำหนดค่า CLI ไว้อยู่แล้ว คุณสามารถใช้ CLI ในการคัดลอกสินทรัพย์ของเว็บที่จำเป็นจาก s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ไปยังบัคเก็ตของคุณได้

    1. ดำเนินการคำสั่งต่อไปนี้โดยตรวจสอบให้แน่ใจว่าได้แทนที่ YOUR_BUCKET_NAME ด้วยชื่อที่คุณใช้ในส่วนก่อนหน้านี้ และแทนที่ YOUR_BUCKET_REGION ด้วยรหัสเขต (เช่น us-east-2) ที่คุณสร้างบัคเก็ต

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. หากคำสั่งสำเร็จแล้ว คุณควรจะเห็นรายการของอ็อบเจกต์ที่ถูกคัดลอกมายังบัคเก็ตของคุณ

     

    คำแนะนำแบบทีละขั้นตอนสำหรับ CloudFormation

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

  • ขั้นตอนที่ 4 เพิ่มนโยบายบัคเก็ตเพื่ออนุญาตให้สาธารณะสามารถอ่านได้

    เพิ่มนโยบายบัคเก็ตเพื่ออนุญาตให้สาธารณะสามารถอ่านได้

    คุณสามารถกำหนดได้ว่าจะอนุญาตให้ใครเข้าถึงเนื้อหาในบัคเก็ต S3 บ้างโดยใช้นโยบายบัคเก็ต นโยบายบัคเก็ตคือเอกสาร JSON ที่ระบุว่าผู้ใช้หลักคนใดบ้างที่สามารถดำเนินการต่างๆ กับอ็อบเจกต์ในบัคเก็ตของคุณได้

    ในขั้นตอนนี้ คุณจะต้องเพิ่มนโยบายบัคเก็ตไปยังบัคเก็ต Amazon S3 ใหม่ของคุณเพื่ออนุญาตให้ผู้ใช้ที่ไม่ระบุชื่อดูเว็บไซต์ของคุณได้ ตามค่าเริ่มต้น บัคเก็ตของคุณจะเข้าถึงได้เฉพาะผู้ใช้ที่ได้รับการรับรองความถูกต้องซึ่งมีสิทธิ์การเข้าถึงบัญชี AWS ของคุณเท่านั้น

    ดู ตัวอย่างนี้ ของนโยบายที่จะมอบสิทธิ์การเข้าถึงแบบอ่านอย่างเดียวให้กับผู้ใช้ที่ไม่ระบุชื่อ นโยบายตัวอย่างนี้อนุญาตให้ทุกคนบนอินเทอร์เน็ตดูเนื้อหาของคุณได้ วิธีที่ง่ายที่สุดในการอัปเดตนโยบายบัคเก็ตก็คือการใช้ Console เลือกบัคเก็ต เลือกแท็บ “สิทธิ์” จากนั้นเลือก “นโยบายบัคเก็ต”

    1. ใน Console ของ S3 ให้เลือกชื่อของบัคเก็ตที่คุณสร้างไว้ในส่วนที่ 1
    2. เลือกแท็บ สิทธิ์ จากนั้นเลือก นโยบายบัคเก็ต
      1. ใน Console ของ S3 ให้เลือกชื่อของบัคเก็ตที่คุณสร้างไว้ในส่วนที่ 1
      2. เลือกแท็บ สิทธิ์ แล้วตรวจสอบให้แน่ใจว่าได้เลือกการตั้งค่าการเข้าถึงแบบ “สาธารณะ”
      3. คลิก แก้ไข และยกเลิกการเลือกดังต่อไปนี้
        • “บล็อกนโยบายบัคเก็ตสาธารณะใหม่”
        • “บล็อกการเข้าถึงแบบสาธารณะและข้ามบัญชีหากบัคเก็ตมีนโยบายสาธารณะ”
      4. คลิก บันทึก
      5. ในโมดอลการยืนยันที่ปรากฏขึ้นมา ให้พิมพ์ว่า “ยืนยัน” แล้วคลิก ยืนยัน 
      6. ขณะที่ยังอยู่ในแท็บ สิทธิ์ ให้เลือก นโยบายบัคเก็ต  
    3. ใส่เอกสารนโยบายต่อไปนี้ลงในตัวแก้ไขนโยบายบัคเก็ต โดยแทนที่ [YOUR_BUCKET_NAME] ด้วยชื่อของบัคเก็ตที่สร้างไว้ในส่วนที่ 1:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. เลือก บันทึก เพื่อปรับใช้นโยบายใหม่

  • ขั้นตอนที่ 5 เปิดใช้งานการโฮสต์เว็บไซต์

    เปิดใช้งานการโฮสต์เว็บไซต์

    ตามค่าเริ่มต้น อ็อบเจกต์ในบัคเก็ต S3 จะพร้อมใช้งานผ่าน URL ด้วยโครงสร้าง http://.amazonaws.com// หากต้องการให้บริการสินทรัพย์จาก URL ราก (เช่น /index.html) คุณจะต้องเปิดใช้งานการโฮสต์เว็บไซต์บนบัคเก็ตนั้น ซึ่งจะทำให้อ็อบเจกต์ของคุณพร้อมใช้งานที่ตำแหน่งข้อมูลเว็บไซต์แบบเฉพาะเขต AWS ของบัคเก็ตนั้น: .s3-website-.amazonaws.com

    คุณสามารถใช้โดเมนแบบกำหนดเองสำหรับเว็บไซต์ของคุณได้เช่นกัน ตัวอย่างเช่น http://www.wildrydes.com โฮสต์อยู่บน S3 เวิร์กช็อปนี้ไม่ได้สอนวิธีการตั้งค่าโดเมนแบบกำหนดเอง แต่คุณสามารถดูคำแนะนำโดยละเอียดได้ในเอกสารประกอบของเรา

    ในขั้นตอนนี้ คุณจะต้องใช้ Console เพื่อเปิดใช้งานการโฮสต์เว็บไซต์แบบสแตติก โดยสามารถทำได้ที่แท็บ “คุณสมบัติ” หลังจากที่เลือกบัคเก็ตแล้ว ตั้งค่า index.html เป็นเอกสารดัชนี แล้วเว้นว่างที่เอกสารข้อผิดพลาด ดูรายละเอียดเพิ่มเติมได้จากเอกสารประกอบเกี่ยวกับ การกำหนดค่าบัคเก็ตสำหรับการโฮสต์เว็บไซต์แบบสแตติก

    1. จากหน้ารายละเอียดบัคเก็ตใน Console ของ S3 ให้เลือกแท็บ คุณสมบัติ
    2. เลือกการ์ด การโฮสต์เว็บไซต์แบบสแตติก
    3. เลือก ใช้บัคเก็ตนี้เพื่อโฮสต์เว็บไซต์ และป้อน index.html สำหรับเอกสารดัชนี เว้นว่างที่ช่องอื่นๆ
    4. สังเกต URL ตำแหน่งข้อมูล ที่ด้านบนของกล่องโต้ตอบก่อนเลือก บันทึก คุณจะต้องใช้ URL นี้ตลอดการเข้าร่วมเวิร์กช็อปส่วนที่เหลือเพื่อดูเว็บแอปพลิเคชันของคุณ นับจากนี้เป็นต้นไป URL นี้จะเรียกว่า URL ฐานของเว็บไซต์ของคุณ
    5. คลิก บันทึก เพื่อบันทึกการเปลี่ยนแปลง

  • ขั้นตอนที่ 6 ตรวจสอบความถูกต้องของการนำไปใช้งานของคุณ

    ตรวจสอบความถูกต้องของการนำไปใช้งานของคุณ

    หลังจากดำเนินการตามขั้นตอนการนำไปใช้งานเหล่านี้เสร็จสมบูรณ์แล้ว คุณควรสามารถเข้าถึงเว็บไซต์แบบสแตติกของคุณได้โดยไปที่ URL ตำแหน่งข้อมูลเว็บไซต์สำหรับบัคเก็ต S3 ของคุณ

    ไปที่ URL ฐานของเว็บไซต์ของคุณ (URL ที่คุณบันทึกไว้ในส่วนก่อนหน้านี้) ในเบราว์เซอร์ที่ต้องการ คุณควรจะเห็นหน้าหลักของ Wild Rydes แสดงอยู่ หากจำเป็นต้องค้นหา URL ฐาน ให้ไปที่ Console ของ S3 เลือกบัคเก็ตของคุณแล้วคลิก การโฮสต์เว็บแบบสแตติก ในแท็บ คุณสมบัติ

    หากหน้าดังกล่าวแสดงผลอย่างถูกต้อง (ดูตัวอย่างภาพหน้าจอด้านล่าง) คุณสามารถไปยังโมดูลถัดไป “การจัดการผู้ใช้” ได้

ถัดไป: จัดการผู้ใช้