adaydesign
บล็อกนี้เป็นเรื่องของการ Deploy แอพเข้าฟรีโฮตติ้งที่ชื่อว่า Netlify ซึ่งเราสามารถ Build และ Deploy React แอพของเราเข้าโฮตและรันใช้งานได้บนอินเตอร์เน็ตปกติได้แบบฟรีๆๆ
Netlify คืออะไร
Netlify เป็นคลาวด์โฮตติ้งที่ให้บริการพื้นที่ในการ Build และ Deploy แอพพลิเคชันบนเว็บเบราเซอร์ จาก Git Server
เพียงแค่เรามีโค้ดที่อยู่บน Git Server ที่สามารถเชื่อมกับ Netlify ได้ ก็สามารถนำโค้ดโปรแกรมนั้นมารันบน Netlify ได้เหมือนกัน
Netlify รองรับเทคโนโลยีอะไรบ้าง
เทคโนโลยีที่ Netlify รองรับในส่วนของแอพพลิเคชันที่เป็นฝั่ง Front End ได้แก่ Jamstack, React, Next.js, Vue.js, Gatsby, Angular, Sitecore, Drupal และ WordPress (ณ วันที่ 2/9/64)
ในส่วนของ Server (Back End) ทาง Netlify ก็มีฟีเจอร์ไว้รองรับอย่าง Netlify Functions แต่ในบทความนี้จะไม่ได้กล่าวถึง
สิ่งที่ต้องเตรียมพร้อมก่อนอัพโค้ดเข้า Netlify
- โค้ดโปรเจคบน Git Repository (ในบทความนี้จะใช้ GitHub)
- สมัครใช้งาน Netlify
วิธีการอัพโค้ดเข้า Netlify
1. จากหน้าแรกกดปุ่ม New site from Git (สร้างแอพใหม่จาก Git)
2. เลือก Git Server ที่เราเก็บโค้ดเอาไว้ ตัวอย่างจะเลือกเป็น GitHub (เราสร้างเชื่อมไปยัง Private Git ของหน่วยงานได้ด้วย แต่ต้องใช้แพ็กเก็ตที่มีค่าใช้จ่าย)
3. ยืนยันตัวตน เสร็จแล้ว ให้เลือก Git Repository ที่ต้องการจะ Deploy โค้ด
4. ตรวจสอบและตั้งค่าการรันโค้ดต่างๆ ก่อน Deploy ในเบื้องต้น ได้แก่ git branch, คำสั่ง build และ โฟลเดอร์ build เมื่อตั้งค่าเรียบร้อยแล้ว (ปกติ ไม่ได้แก้ไขอะไรเลย) ให้กดปุ่ม Deploy site
5. รอ ระบบกำลังทำการ Deploy
6. เมื่อระบบทำการ Deploy เสร็จแล้ว (เราสามารถเช็คสถานะการ Deploy และ Publish ได้ผ่านหน้าเว็บเลย) เราสามารถเข้าใช้งานแอพของเราผ่านทาง Domain ที่ระบบได้สร้างให้ (ตัวอย่าง https://gracious-hypatia-72c294.netlify.app)
7. แก้ไขชื่อ Site (เราสามารถแก้ไขชื่อ Site ได้ เพื่อให้จำได้ง่ายขึ้น) กลับไปที่หน้าแรก กดที่เมนู General และกดปุ่ม Change site Name จะมีป๊อบอัพให้ใส่ชื่อ Site เข้าไป
8. เปลี่ยนชื่อ Site
9. กดเข้าใช้งานแอพผ่านเบราเซอร์ (ตัวอย่าง https://monitv2.netlify.app/ )
สรุป
Netlify เป็นเว็บหนึ่งที่เราสามารถ Build และ Deploy React แอพ ได้บน Netlify ด้วยขั้นตอนที่ง่ายๆ แค่เรามีโค้ดบน Git ไม่ว่าจะเป็น GitHub GitLab หรือ Bitbucket ก็สามารถ Deploy ได้
หมายเหตุ หากเราไม่มีโค้ดบน Git เราก็สามารถ Deploy เข้า Netlify ได้เช่นกัน โดยวิธีการ ลากโฟลเดอร์ build หรือ dist มาใส่ที่ช่อง [Drag and Drop your site output folder here]
การ Deploy เหล่านี้ทำได้โดยไม่เสียค่าใช้จ่าย แต่ก็มีข้อจำกัดของแพ็คเก็ต (ศึกษาเพิ่มเติม https://www.netlify.com/pricing/)
นอกจาก Netlify แล้วยังมีเว็บโฮสติ้งอื่นที่สามารถ Deploy React แอพ ได้แก่
- https://vercel.com
- https://firebase.google.com
- GitHub Page with GitHub Action
- https://www.heroku.com
- https://surge.sh
- https://render.com
- https://www.roast.io
- GitLab Page
