How to Integrate GraphCMS with Netlify.

Netlify เป็นเครื่องมือที่ช่วยทำการ build code และ deploy เว็บไซต์ สำหรับเว็บไซต์นี้เราก็ใช้ Netlify เช่นกันค่ะ

ก่อนอื่นขอเล่าถึง Stack ที่ใช้ของเว็บนี้ก่อนนะคะ

ส่วน Frontend ใช้ Next.js ค่ะ เมื่อมีการอัพเดท code ที่ Frontend แล้ว push ไปที่ github ตัว Netlify จะทำการ Deploy เว็บไซต์ให้อัตโนมัติค่ะ

ในส่วนของ backend สำหรับจัดการ database และ content ใช้ GraphCMS ในการ Update content ที่ GraphCMS ตัว Netlify จะไม่ได้ Build & Deploy ให้ค่ะ เราต้องใช้วิธี manual ไปสังให้ deploy ที่ เว็บไซต์ของ Netlify เอง วันนี้ก็จะมาเล่าถึงการ Intregate Netlify เข้ากับ GraphCMS เพื่อให้เราสามารถกด Build & Deploy ได้ที่ GraphCMS โดยตรงเลยค่ะ

มาเริ่มกันเลย

เมื่อเรา Login เข้าสู่ GraphCMS แล้ว เราต้องไปทำการติดตั้ง Netlify ที่เมนู Apps ค่ะ โดยคลิกที่ปุ่ม Go to Marketplace แล้วค้นหา Netlify จากนั้นก็ทำการติดตั้ง

จากนั้นไป Setting ที่ Schema เพื่อตั้งค่าให้เราสามารถกดสั่ง Build & Deploy จาก GraphCMS โดยเลือก model ที่ต้องการเพิ่ม (ในตัวอย่างภาพข้างล่างคือ model ของ post) แล้วกดที่แถบ Sidebar ในฝั่ง Sidebar ด้านขวาจะแสดง Custom Widgets ขึ้นมา เราก็เลือก Netlify เพิ่มเข้ามาใน model นี้ได้เลยค่ะ

เมื่อเพิ่ม Netlify เข้ามาใน model ที่ต้องการเรียบร้อยแล้ว Netlify Deployment ก็จะขึ้นในแถบ Sidebar ของ Post ค่ะ

คราวนี้เวลาเราทำการเพิ่ม ลบ แก้ไข content เราก็สามารถสั่ง Build & Deploy จาก GraphCMS ได้เลย

จากวิธีข้างต้นจะเห็นว่าเป็นวิธี Build & Deploy ที่ manual มากๆ แล้ววิธีไม่ manual ทำยังไงนะ ไปดูที่โพสต์นี้กันเลยค่ะ Connecting GraphCMS Webhooks to Netlify's Build Hooks