โปรเจกต์ใน AWS:

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

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

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

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

Progression-Bar-13

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

Progression-Bar-08

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

Progression-Bar-09

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

Progression-Bar-10

ปรับใช้ RESTful API

Progression-Bar-11

ยกเลิกทรัพยากร

โมดูล 1 การโฮสต์เว็บแบบสแตติกพร้อมการปรับใช้แบบต่อเนื่อง

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

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

Amplify_Wild_Rydes

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

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

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

บริการที่ใช้: AWS Amplify

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

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

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

    เลือกรีเจี้ยน

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

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

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

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

    region

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

    region

  • ขั้นตอนที่ 2: สร้างคลังเก็บข้อมูล Git

    สร้างคลังเก็บข้อมูล Git

    คุณมีสองตัวเลือกในการจัดการซอร์สโค้ดสำหรับโมดูลนี้ได้แก่ AWS CodeCommit (รวมอยู่ใน AWS Free Tier) หรือ GitHub ในบทแนะนำสอนการใช้งานนี้ เราจะใช้ CodeCommit เพื่อจัดเก็บโค้ดของแอปพลิเคชัน แต่คุณสามารถทำได้เช่นกันใน GitHub โดย การสร้างคลังเก็บข้อมูล

    ก. เปิด AWS CodeCommit console
    ข. เลือก Create repository (สร้างคลังเก็บข้อมูล)
    ค. ตั้งชื่อคลังเก็บข้อมูล* ว่า "wildrydes-site"
    ง. เลือกCreate (สร้าง)
    จ. เมื่อสร้างคลังเก็บข้อมูลแล้ว ให้ตั้งค่าผู้ใช้ IAM ด้วยข้อมูลรับรอง Git ในคอนโซล IAM โดยปฏิบัติตามคำแนะนำเหล่านี้
    ฉ. กลับไปยังคอนโซล CodeCommit จากรายการดรอปดาวน์ Clone URL (URL โคลน) ให้เลือก Clone HTTPS (HTTPS โคลน)

    wildrydes_clone

    ช. จากหน้าต่างเทอร์มินัล ให้เรียกใช้โคลน Git และ HTTPS URL ของคลังเก็บข้อมูล

    $ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
    Cloning into 'wildrydes-site'... (กำลังโคลนสู่ 'wildrydes-site'...)
    Username for 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX (ชื่อผู้ใช้สำหรับ 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX)
    Password for 'USERID': XXXXXXXXXXXX (รหัสผ่านสำหรับ 'USERID': XXXXXXXXXXXX)
    warning: You appear to have cloned an empty repository (คำเตือน: เหมือนว่าคุณได้โคลนคลังเก็บข้อมูลที่ว่างเปล่า)

  • ขั้นตอนที่ 3: สร้างคลังเก็บข้อมูล Git

    สร้างคลังเก็บข้อมูล Git

    เมื่อคุณได้ใช้ AWS CodeCommit หรือ GitHub.com ในการสร้างคลังเก็บข้อมูล Git และโคลนลงในเครื่อง คุณจะต้องคัดลอกเนื้อหาของเว็บไซต์จากบัคเก็ต S3 ซึ่งสามารถเข้าถึงได้จากสาธารณะเดิมที่มีซึ่งเชื่อมโยงกับเวิร์กช็อปนี้และเพื่อเนื้อหาลงในคลังเก็บข้อมูลของคุณ

    ก. เปลี่ยนไดเรกทอรีไปยังคลังเก็บข้อมูลของคุณและคัดลอกไฟล์แบบสแตติกจาก S3
    cd wildrydes-site/
    aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

    ข. บันทึกไฟล์ลงในบริการ Git
    $ git add .
    $ git push

    Counting objects: 95, done. (กำลังนับจำนวนอ็อบเจกต์: 95 เสร็จสิ้น)
    Compressing objects: 100% (94/94), done. (กำลังบีบอัดอ็อบเจกต์: 100% (94/94) เสร็จสิ้น)
    Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done. (กำลังเขียนอ็อบเจกต์: 100% (95/95), 9.44 MiB | 14.87 MiB/s เสร็จสิ้น)
    Total 95 (delta 2), reused 0 (delta 0) (รวม 95 (delta 2) นำกลับมาใช้ใหม่ 0 (delta 0))
    ไปยัง https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    * [new branch] master -> master

  • ขั้นตอนที่ 4: เปิดใช้การโฮสต์เว็บไซต์ด้วย AWS Amplify Console

    เปิดใช้การโฮสต์เว็บไซต์ด้วย AWS Amplify Console

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

    ก. เปิด หน้าคอนโซล Amplify Console

    ข. คลิก Get Started (เริ่มต้น) ใต้การปรับใช้ด้วย Amplify Console

    ค. เลือกผู้ให้บริการคลังเก็บข้อมูลที่ใช้ไปวันนี้แล้วเลือก Next (ถัดไป)

    ง. หากคุณใช้ GitHub คุณจะต้องอนุมัติ AWS Amplify กับบัญชี GitHub ของคุณ

    จ. เลือก Repository and Branch just created (คลังเก็บข้อมูลและรุ่นที่เพิ่งสร้างขึ้น) จากรายการดรอปดาวน์

    wildrydes_clone2

    จ. ในหน้า "Configure build settings" (กำหนดการตั้งค่าสำหรับการสร้าง) ให้ปล่อยทั้งหมดไว้เป็นค่าเริ่มต้นแล้วเลือก Next (ถัดไป)

    ฉ. ในหน้า "Review" (รีวิว) ให้เลือก Save and deploy (บันทึกและปรับใช้)

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

    wildrydes_clone3

    เมื่อเสร็จสิ้น ให้คลิกที่รูปภาพของเว็บไซต์เพื่อเปิดใช้เว็บไซต์ Wild Rydes ของคุณ

    wildrydes_clone4

    หากคลิกที่ลิงก์สำหรับ Master (ตัวหลัก) คุณจะเห็นรายละเอียดการสร้างและการปรับใช้ที่เกี่ยวข้องกับรุ่นของคุณ รวมถึงภาพถ่ายหน้าจอของแอปในอุปกรณ์ต่างๆ

    wildrydes_clone5

  • ขั้นตอนที่ 5: ปรับแต่งเว็บไซต์ของคุณ

    ปรับแต่งเว็บไซต์ของคุณ

    AWS Amplify Console จะสร้างและปรับใช้แอปใหม่เมื่อตรวจพบความเปลี่ยนแปลงกับคลังเก็บข้อมูลที่เชื่อมต่ออยู่ ให้ลองทำการเปลี่ยนแปลงที่หน้าหลักเพื่อทดสอบขั้นตอนนี้

    ก. เปิดหน้า `index.html` และเปลี่ยนแปลงบรรทัดของชื่อให้เป็น: <title>Wild Rydes - Rydes of the Future!</title>

    ข. บันทึกไฟล์และบันทึกลงในคลังเก็บข้อมูล Git อีกครั้ง Amplify Console จะเริ่มสร้างเว็บไซต์อีกครั้งทันทีหลังจากที่พบการอัปเดตในคลังเก็บข้อมูล โดยจะเกิดขึ้นอย่างรวดเร็ว กลับไปยัง หน้าคอนโซล Amplify Console เพื่อดูการดำเนินการ

    $ git add index.html 
$ git commit -m "updated title"
[master dfec2e5] updated title
 1 file changed, 1 insertion(+), 1 deletion(-)

$ git push
Counting objects: 3, done.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: processing 
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
   2e9f540..dfec2e5  master -> master

    ค. เมื่อเสร็จสิ้น ให้เปิดเว็บไซต์ Wild Rydes และสังเกตดูความเปลี่ยนแปลง

    wildrydes_clone6

  • สรุป

    สรุป

    ในโมดูลนี้ คุณได้สร้างเว็บไซต์แบบสแตติกซึ่งเป็นพื้นฐานสำหรับธุรกิจ Wild Rydes ของเรา AWS Amplify Console ทำให้การปรับใช้เว็บไซต์แบบสแตติกตามโมเดลการผสานรวมและการส่งมอบอย่างต่อเนื่องเป็นเรื่องง่าย โดยมีความสามารถในการ "สร้าง" แอปพลิเคชันที่ขับเคลื่อนโดยเฟรมเวิร์ก Javascript ที่มีความซับซ้อนยิ่งขึ้นและมีคุณสมบัติ เช่น การปรับใช้คุณสมบัติย่อย การตั้งค่าโดเมนแบบกำหนดเองอย่างง่าย การปรับใช้โดยทันที และการป้องกันด้วยรหัสผ่าน

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