แนะนำ Netlify: Frontend Hosting ที่มีทุกอย่างที่คุณต้องการ

Nati Namvong
Stories of Sellsuki
3 min readMar 16, 2018

--

ใครกำลังมองหา Static หรือ Frontend Hosting เพื่อ Deploy Code Frontend ที่ทำด้วย Vue.js, React หรือว่า Angular อยู่ วันนี้ผมมีของมาขายให้ รับรองถ้าได้ลองใช้แล้วจะต้องติดใจ

ก่อนจะเริ่มขายของ มาดูกันก่อนว่าเรามีทางเลือกอะไรในการ Deploy Frontend ของเรากันบ้าง

  1. AWS S3 + CloudFront: คือใช้ S3 มาเก็บ Static Files แล้วใช้ CloudFront มาทำ CDN และ SSL วิธีนี้ค่าใช้จ่ายถือว่าถูกมาก แต่อาจแลกมาด้วยขั้นตอนในการ Deploy ที่ยุ่งยากเล็กน้อย แต่ถ้าทำ CI/CD ไว้ดีๆ ก็ไม่มีปัญหา
  2. Firebase Hosting: เชื่อว่าหลายๆคนน่าจะได้เคยใช้งานกันมาบ้างแล้ว ข้อดีคือ ถูก และ ง่าย แต่อาจจะซับซ้อนเล็กน้อยตอนที่จะตั้งค่า Custom Domain เอง
  3. อื่นๆ เช่น เอาไปไว้กับ Backend เดิมที่มีอยู่ อันนี้ก็แล้วแต่ว่าระบบที่ใช้เป็นแบบไหน ไม่ขอพูดถึงละกัน

ได้เวลาขายของ

Netlify

ราคา

เอาขึ้นมาเป็นเรื่องแรกเลย เพราะเป็นปัจจัยสำคัญที่ใช้ในการเลือกเลยก็ว่าได้

การตั้งราคาของ Netlify ค่อนข้างจะประหลาด คือ คิดตาม จำนวน Admin คือถ้าเราทำงานคนเดียว ก็ฟรีไปเลย ไม่จำกัด แต่ถ้าเมื่อไหร่ต้องการคนมาช่วย Setup ก็ต้องขยับไปใช้ Package เสียเงิน

Public or private repositories

Free หมด ไม่ว่าจะเป็น public หรือ private repositories และยังสามารถใช้งานได้กับทั้ง GitHub, Bitbucket หรือแม้กระทั้ง GitLab ที่ Host เอาไว้เอง

Custom domains

สามารถสร้าง Custom domain ได้ฟรี แค่ชี้ CNAME มาให้ถูกก็พอ

SSL และ HTTPS

เปิดใช้ HTTPS ได้แบบง่ายโครตๆ แค่ 2 คลิก ก็ได้ HTTPS ไม่ว่าจะเป็น Custom domain หรือ Sup Domain ใต้ .netlify.com

Prerendering

ทำ SPA แต่อยากได้ SEO ไม่ใช้เรื่องยาก เพียงแค่เข้าไปเปิด Prerendering แค่นั้นเอง

PR Review

อันนี้ชอบมาก คือถ้าทีมมีการ Review PR(Pull Request) กัน อันนี้จะทำให้เรา Review ง่ายขึ้นเยอะ จากเดิม เราจะ Review ได้แค่ Code ถ้าเราใช้ Netlify ทุกครั้งที่มี PR ตัว Netlify จะดึง Code นั้นไป Deploy ให้ แต่ไม่ต้องกลัวว่าจะไปทับกับ Production เพราะ Netlify จะ Deploy ไปยัง Host ใหม่ให้ และได้ URL ใหม่มาให้เราเปิดเข้าไป Review ผลลัพท์ได้เลย

Deploy all Branches

อันนี้ Netlify จะ Deploy ให้เราทุกๆ Branches ที่เรา Push ขึ้น Origin ทำให้เราสามารถเห็นผลลัพท์ของงานบนสภาพแวดล้อมเดียวกับ Production เลย

Split Testing หรือ A/B Testing

อันนี้ส่วนตัวชอบมากๆ มันทำให้เราทำ A/B Testing ได้ง่ายมากๆ เช่น เราต้องการเทส Feature ใหม่ แต่อยากลองกับ User แค่บางส่วนก่อน ก็ทำได้โดยการทำ Feature ใหม่บน Branch ใหม่ แล้ว push ขึ้น origin จากนั้นก็เข้าไปตั้งค่าที่ Netlify ว่าจะให้ Traffic มันวิ่งไปที่ Branch ไหนเป็นกี่ % แค่นี้ก็สามารถทำ A/B Testing ได้แล้ว ส่วนการวัดผลว่า Feature ใหม่ที่ทำไปนั้น OK หรือไม่ ก็ทำได้ง่ายๆ ด้วยการติดพวก Analytic เข้าไปเพื่อวัดผลแค่นั้นเอง

สรุป

จากที่ได้ใช้มาสักพักแล้ว ผมค่อนข้างชอบนะ เพราะ Feature หลายๆอย่างถ้าต้องไป Set เองคงใช้เวลาพอสมควรเลย อย่าง HTTPS เนี่ย ปรกติผม Deploy ขึ้น S3 ถ้าผมจะใช้ Custom Domain ก็จะต้องไปใช้ CloudFront เพื่อให้ CloudFront มันจัดการเรื่อง HTTPS ให้ ซึ่งก็หลายขั้นตอนเลยกว่าจะ Set ได้เสร็จ แต่พอมาใช้ Netlify ผมแค่ไปที่ Domain Setup แล้วชี้ CNAME มาที่ Netlify จากนั้นก็ไปตั้งค่า HTTPS ด้วยการกดปุ่มแค่ 2 ปุ่ม แค่นั้น ก็ได้ HTTPS แล้ว ส่วนเรื่อง Deploy Review นี้ก็ช่วยได้มาก เวลามีคน PR มา ก็เปิดไปดูได้เลย ลองเล่นได้เลย สะดวกมากๆ การตั้งค่าก็ไม่ยาก UI ดูเข้าใจง่ายดี แต่จะมีปัญหาบ้างก็คือ เว็บเข้าไม่ค่อยได้(ในช่วงนี้) อันนี้ไม่ได้เจอเอง แต่น้องๆในทีมบอกมา

--

--