Deploy React แอปพลิเคชันด้วย AWS Amplify (Host Static-Website with AWS Amplify Part. 3)
สวัสดีครับ เบิร์ดจาก ClassMethod Thailand ครับ
บทความนี้เป็นส่วนหนึ่งของซีรีย์บทเรียน "สร้าง Host Static Website ด้วย React และ AWS Amplify" ที่ผมได้ทำการทดลองเลยอยากเอามาแชร์ให้เพื่อนๆ ได้อ่านกันและทำตาม โดยเนื้อหาในแต่ละบทความสามารถทำตามได้เป็นอิสระ แต่หากทำตามทุกขั้นตอนต่อเนื่องกัน จะมีลักษณะดังนี้
- สร้าง React Application
- Deploy React & Vite App ไปยัง GitHub
- Deploy React แอปพลิเคชันด้วย AWS Amplify
ในบทความนี้จะเป็น Part 3 Deploy React แอปพลิเคชันด้วย AWS Amplify
ในบทความนี้ผมได้ทำการแปลและทดลองโดยอ้างอิงจาก Link ด้านล่างนี้
Ref:
AWS Amplify คืออะไร
AWS Amplify คือชุดเครื่องมือและบริการจาก Amazon Web Services ที่ช่วยให้นักพัฒนาสร้างและปรับขนาดแอปพลิเคชัน full-stack ได้อย่างรวดเร็วโดยเฉพาะแอปพลิเคชันบนมือถือและเว็บได้
Deploy React & Vite App ด้วย AWS Amplify
ในขั้นตอนนี้เราจะมาเชื่อมต่อ GitHub repository ของเรากับ AWS Amplify
ซึ่งจะช่วยให้เราสามารถสร้างและปรับใช้โฮสต์แอปของเราบน AWS ได้
สิ่งที่ต้องมี :
1: Create a new React application
2: Initialize GitHub Repository
หมายเหตุ : หลังจากที่เราทำสองขั้นตอนนี้เสร็จแล้ว...เรามาเริ่ม AWS Amplify กันเลย
- ลงชื่อเข้าใช้ AWS Management Console
ในหน้าต่าง Console ค้นหา AWS Amplify
หรือไปที่ https://console.aws.amazon.com/amplify/apps
- เลือก Deploy app
ก่อน Deploy app ตรวจสอบ Region ที่ต้องการ
บทความนี้เราจะใช้ Asia Pacific(Tokyo)
- Authorize AWS Amplify ==> อนุญาตให้เข้าถึง GitHub
- เลือก Repository
Ex: pongsatornCMTH/staticwebsite
จากนั้นกด ==> Next
- ตั้งชื่อ app name
Ex : staticwebsite
จากนั้นตั้งค่า Frontend build command and Build output directory ตามภาพ
จากนั้นกด ==> Next
เมื่อเราตรวจสอบเสร็จแล้ว ลงมาล่างสุด
กด ==> Save and Deploy
จากนั้นรอสักพัก หลังจากการตั้งค่าเสร็จแล้ว เราสามารถกด Domain เพื่อเปิดเว็บไซต์ของเรา
เราจะสังเกตว่า เว็บไซต์ของเราได้ปรากฏขึ้นมาแล้ว
เท่านี้เราก็สามารถ Deploy React App ขึ้น AWS Amplify เรียบร้อยแล้วครับ
Clean up resources
ขอแนะนำวิธีการลบแอปและ backend resources ที่เราได้สร้างขึ้นมา เพื่อป้องกันค่าใช้จ่ายที่ไม่คาดคิด
วิธีลบ App
ในคอนโซล Amplify ในแถบนำทางด้านซ้ายสำหรับแอป staticwebsite ให้เลือก
App settings ==> General Settings ==> Delete app
สรุป
ก่อนหน้านี้เราได้สร้าง React Application และได้สร้าง GitHub Repository เพื่อเก็บไฟล์ของ React
ใน Part 3 นี้เราได้อนุญาต AWS Amplify เข้าไปยัง React App ทำการ Build และ Deploy แอปพลิเคชันขึ้นมา ทำให้เราสามารถดู Host a Static Website ได้
Congratulations
You have finished the Host a Static Website on AWS tutorial!
บทความอ้างอิง
บทความอื่นๆที่เกี่ยวข้องกับ AWS Amplify
(Thai)
(Japanese)
