ในโมดูลนี้ คุณจะต้องกำหนดค่า AWS Amplify เพื่อโฮสต์ทรัพยากรแบบสแตติกสำหรับเว็บแอปพลิเคชันของคุณพร้อมการปรับใช้แบบต่อเนื่องในตัว Amplify Console มีเวิร์กโฟลว์ที่ขับเคลื่อนด้วย Git เพื่อการปรับใช้และการโฮสต์แบบต่อเนื่องของเว็บแอปทั้งสแตก ในโมดูลลำดับถัดไป คุณจะต้องเพิ่มฟังก์ชันการทำงานแบบไดนามิกไปยังหน้าเหล่านี้โดยใช้ JavaScript เพื่อเรียกใช้ RESTful API ระยะไกลที่สร้างด้วย AWS Lambda และ Amazon API Gateway
สถาปัตยกรรมสำหรับโมดูลนี้นั้นเรียบง่ายมาก เนื้อหาเว็บแบบสแตติกของคุณทั้งหมด ซึ่งรวมถึง 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
(คลิกเพื่อขยาย)
-
ขั้นตอนที่ 2: สร้างคลังเก็บข้อมูล 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 โคลน)
ช. จากหน้าต่างเทอร์มินัล ให้เรียกใช้โคลน 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
เมื่อคุณได้ใช้ 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 pushCounting 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 เพื่อปรับใช้เว็บไซต์ที่คุณเพิ่งจะบันทึกไปยัง Git Amplify Console ช่วยทำหน้าทื่ในการจัดตั้งพื้นที่สำหรับจัดเก็บโค้ดแอปพลิเคชันของเว็บแบบสแตติกของคุณและให้ความสามารถที่มีประโยชน์หลายประการในการลดความยุ่งยากในระหว่างระยะเวลาตามการใช้งานของแอปพลิเคชันนั้นๆ รวมถึงการใช้วิธีปฏิบัติที่ดีที่สุด
ก. เปิด หน้าคอนโซล Amplify Console
ข. คลิก Get Started (เริ่มต้น) ใต้การปรับใช้ด้วย Amplify Console
ค. เลือกผู้ให้บริการคลังเก็บข้อมูลที่ใช้ไปวันนี้แล้วเลือก Next (ถัดไป)
ง. หากคุณใช้ GitHub คุณจะต้องอนุมัติ AWS Amplify กับบัญชี GitHub ของคุณ
จ. เลือก Repository and Branch just created (คลังเก็บข้อมูลและรุ่นที่เพิ่งสร้างขึ้น) จากรายการดรอปดาวน์
จ. ในหน้า "Configure build settings" (กำหนดการตั้งค่าสำหรับการสร้าง) ให้ปล่อยทั้งหมดไว้เป็นค่าเริ่มต้นแล้วเลือก Next (ถัดไป)
ฉ. ในหน้า "Review" (รีวิว) ให้เลือก Save and deploy (บันทึกและปรับใช้)
ช. ขั้นตอนการจะใช้เวลาสักครู่เพื่อให้ Amplify Console สร้างทรัพยากรที่จำเป็นและปรับใช้โค้ดของคุณ
เมื่อเสร็จสิ้น ให้คลิกที่รูปภาพของเว็บไซต์เพื่อเปิดใช้เว็บไซต์ Wild Rydes ของคุณ
หากคลิกที่ลิงก์สำหรับ Master (ตัวหลัก) คุณจะเห็นรายละเอียดการสร้างและการปรับใช้ที่เกี่ยวข้องกับรุ่นของคุณ รวมถึงภาพถ่ายหน้าจอของแอปในอุปกรณ์ต่างๆ
-
ขั้นตอนที่ 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 และสังเกตดูความเปลี่ยนแปลง
-
สรุป
ในโมดูลนี้ คุณได้สร้างเว็บไซต์แบบสแตติกซึ่งเป็นพื้นฐานสำหรับธุรกิจ Wild Rydes ของเรา AWS Amplify Console ทำให้การปรับใช้เว็บไซต์แบบสแตติกตามโมเดลการผสานรวมและการส่งมอบอย่างต่อเนื่องเป็นเรื่องง่าย โดยมีความสามารถในการ "สร้าง" แอปพลิเคชันที่ขับเคลื่อนโดยเฟรมเวิร์ก Javascript ที่มีความซับซ้อนยิ่งขึ้นและมีคุณสมบัติ เช่น การปรับใช้คุณสมบัติย่อย การตั้งค่าโดเมนแบบกำหนดเองอย่างง่าย การปรับใช้โดยทันที และการป้องกันด้วยรหัสผ่าน
