จำได้ไหมครับสมัยที่เรายังต้องเปิดโปรแกรม FileZilla หรือ WinSCP แล้วลากไฟล์ขึ้น Server ทีละรูป ทีละหน้า HTML... ผมขอสารภาพเลยว่าเคยกดลากผิดโฟลเดอร์จนหน้าเว็บ Production พังยับมานักต่อนัก พอมาถึงยุค Modern Web Development การ Deploy เว็บด้วย FTP คู่โบราณแบบนั้นกลายเป็นเรื่องล้าสมัยและเสี่ยงชะมัดยาด (Human Error ล้วนๆ)
ลองจินตนาการว่าคุณมีทีม Dev หลายคน ทุกคนโหลดไฟล์ขึ้น FTP พร้อมกัน ไฟล์ทับกันมั่วซั่ว กว่าจะหาต้นตอเจอก็ร้องกันระงม ทุกวันนี้ผมเลยเปลี่ยนมาใช้ Automated CI/CD Pipeline (Continuous Integration / Continuous Deployment) ร่วมกับ Static Hosting Platform อย่าง Netlify ชีวิตทุกคนเปลี่ยนไปเลยครับ วันนี้ผมเลยอยากมาแชร์ Workflow ตั้งแต่ต้นน้ำยันปลายน้ำ ที่ทีมเราใช้งานกันจริงๆ เผื่อใครยังงมหอยกับหน้าต่าง FTP จะได้ก้าวข้ามมาสู่โลกของ Jamstack กันสักที
ทำไมผมถึงยอมทิ้งหน้าต่าง FTP แล้วมาซบ Automation?
ก่อนจะไปถึงวิธีทำ ขอเล่าความประทับใจส่วนตัวก่อน ลองนึกภาพว่าคุณแก้บั๊กหน้าเว็บเสร็จปุ๊บ แค่พิมพ์
git push ลง Command Line เบาๆ แล้วเดินไปชงกาแฟ พอกลับมาเว็บอัปเดตเสร็จสรรพเรียบร้อย
ทั่วโลกเห็นของใหม่พร้อมกัน... นี่แหละครับเวทมนตร์ของมัน
- ไม่ต้องกลัวลืมว่า "เมื่อวานเราแก้ไฟล์ไหนไปวะ?": ทุกการเปลี่ยนแปลงถูกผูกไว้กับ Git Commit ย้อนดูประวัติการแก้โค้ดได้หมด (ใครทำเว็บพังก็รู้เลยว่ามาจากบรรทัดไหน ฮ่าๆ) มันเปรียบเสมือน Time Machine ประจำทีม
- เว็บไม่มีอาการ "ร่วง หรือ กระตุก" ตอนกำลังอัปโหลด: การอัปเดตบนแพลตฟอร์มยุคใหม่จะเกิดแบบ Atomic Deploys คือระบบมันประกอบร่างไฟล์ใหม่ทั้งหมดไว้ในเซิร์ฟเวอร์จนเสร็จ 100% ก่อน แล้วค่อยสลับสวิตช์ชี้ไปยังก้อนใหม่ทีเดียว จะไม่มีจังหวะที่ไฟล์ CSS โหลดไม่ขึ้นกระตุกให้ระคายเคืองสายตาคนดูแลแน่นอน
- Instant Rollbacks (ย้อนเวลากลับได้ใน 1 วินาที): วันไหนซวยหรือเมาโค้ด ปล่อยบั๊กหนักๆ ขึ้นหน้าเว็บหลัก แทนที่จะต้องมานั่งหาบั๊กในโค้ดแล้วอัปโหลดแก้ แค่เข้า Dashboard ของ Netlify กดปุ่ม Publish ของเวอร์ชันเมื่อวาน วินาทีเดียวเว็บกลับมาปกติเหมือนสับรางรถไฟ! ลูบปากชิลๆ
- Branch Deploy (โคลนนิ่งเว็บไว้ทดสอบก่อนขึ้นของจริง): เวลาทำฟีเจอร์ใหญ่ๆ เราสามารถแตก Branch ใน Git แล้วระบบจะช่วยสร้างลิงก์เว็บสำรอง (Preview URL) ให้เราส่งให้ลูกค้าตรวจงานได้ก่อน ถ้าลูกค้าเซย์เยส ค่อยกด Merge เข้าเส้นหลัก สบายใจหายห่วง
เตรียมอุปกรณ์เครื่องมือให้พร้อม (Prerequisites)
ในบทความนี้เราจะใช้ Stack พื้นฐานที่ทุกคนน่าจะมีติดตัวอยู่แล้ว:
- Git Repository: ผมใช้ GitHub อยู่เป็นประจำ เพราะฟรีและยอดเยี่ยม แต่ใครถนัด GitLab หรือ Bitbucket ก็ไม่ว่ากัน หลักการทำงานเหมือนกันเป๊ะ
- Static Site Generator / Source Code: โปรเจกต์ที่ผมทำอยู่เป็น HTML/CSS เปล่าๆ ปน JS นิดหน่อยให้เห็นภาพที่ง่ายที่สุด (แต่ถ้าโปรเจกต์คุณซิ่งสาย Framework ตัวเก่งอย่าง Next.js, Astro หรือ Vue.js ก็ทำงานได้เหมือนกัน แค่เปลี่ยนคำสั่ง Build ด้านใน)
- บัญชี Netlify: สมัครฟรีไปเลยครับกดยิงผ่านอีเมล สายอินดี้อย่างเรา Free Tier ก็ใช้แทบไม่หมดแล้ว เค้าใจกว้างให้แบนด์วิธกว้างขวางเหลือเฟือเกินพอสำหรับเว็บทั่วไป
Step 1: ตั้งกฏเหล็กกำกับบอทด้วย Code (netlify.toml)
หลายคนชอบไปจิ้มๆ ตั้งค่าผ่านหน้าเว็บ UI ซึ่งก็ไม่ได้ผิดอะไรครับ แต่ผมแนะนำว่าในฐานะ Developer พันธุ์แท้
เราควรสร้างไฟล์ netlify.toml แปะไว้ในโฟลเดอร์ Root นอกสุดของโปรเจกต์เลยดีกว่า
สิ่งนี้วงการเราเรียกว่าแนวทาง "Configuration as Code"
มันเหมือนการสั่งสอนบอทของคลาวด์ให้รู้ว่าต้องทำงานยังไง แถมทุกการตั้งค่าจะเก็บเข้า Git รูดทีเดียวจบ
ย้ายไปรันที่คอมพ์เครื่องไหนก็ไม่ต้องเสียเวลาตั้งค่าใหม่
Step 2: ผูกวิญญาณโปรเจกต์กับ Git (มันง่ายกว่าที่จินตนาการไว้เยอะ)
1. เข้าเว็บไซต์ Netlify ลงทะเบียนและล็อกอินให้เรียบร้อย (กดปุ่มเข้าสู่ระบบด้วยบัญชี GitHub ไปเลยก็เป็นทางลัดที่สะดวกที่สุดครับ) จากนั้นมองหาแล้วกดปุ่ม "Add new site" ตามด้วย "Import an existing project"
2. หน้าต่างถัดไป ระบบจะถามหา Source Provider ให้เราเลือก GitHub (หรือค่ายที่คุณใช้) แล้วจิ้มเลือก Repository ชื่อโปรเจกต์ของเรา (อาจจะต้องกดยอมรับสิทธิ์ครั้งแรกให้มันเข้าถึงไฟล์)
3. ความฉลาดของแพลตฟอร์มแบบนี้คือ พอมันกวาดสายตาเห็นไฟล์ netlify.toml ปุ๊บ
หรือเห็นโครงสร้างก้อนโตๆ ว่าเป็น React/Vue ปุ๊บ มันจะรู้หน้าที่และตั้งค่า Build Command และ Publish
directory ให้เองสรรพเสร็จ เรามีหน้าที่แค่ตรวจทานความถูกต้องนิดหน่อย แล้วกรีดกรายกดปุ่ม Deploy
site จากนั้นก็นั่งรอหน้าจอมันเสกเวทมนตร์ขึ้นฟ้า
Step 3: ผูก Domain สวยๆ กับรับใบเซอร์ SSL (HTTPS) ฟรีๆ ตลอดชีพ
สิ่งหนึ่งที่ผมเกลียดที่สุดในสมัยก่อนคือการไปนั่งกดปุ่มต่ออายุ SSL Certificate ทุกๆ 3 เดือน หรือต้องไปนั่งโหลดไฟล์ .cert กับ .key มาติดตั้งไว้ใน Server ด้วยตัวเอง ใครทำไฟล์หายก็เตรียมหัวหมุนได้เลย แถมบางโฮสต์ก็คิดเงินค่าใบรับรองซะแพงหูฉี่
แต่ Netlify เค้าใจป้ำแจก SSL Certificate (จากองค์กร Let's Encrypt) ให้โปรเจกต์เราแบบ 100%
ฟรีอัตโนมัติเลยครับ ต่ออายุให้อัตโนมัติด้วยคุณไม่ต้องแตะอะไรเลย ส่วนเรื่องตั้งค่าโดเมนเนมหลัก (เช่น
www.miwnixtech.com) ก็แค่ไปเพิ่ม DNS Record ในผู้ให้บริการโดเมน (ขอแนะนำว่าถ้าใช้ร่วมกับ
Cloudflare ยิ่งแจ่มเลยครับ):
- สร้างข้อมูล CNAME Record: ตั้งค่า
www(หรือ subdomain ย่อยอื่นๆ ที่ต้องการ) ให้ชี้->โยงไปหาตัวชื่อซับโดเมนยาวๆ ของเราที่ Netlify มอบให้ตอนแรก (เช่นyoursite-alpha-beta.netlify.app) - สร้างรูปแบบ A Record: (กรณีที่อยากให้ผู้ใช้พิมพ์แค่
yourdomain.comเฉยๆ ก็เข้าเว็บได้เลย หรือที่เรียกว่า Apex Domain) ให้ตั้งชี้ไปที่เลข IP ของตัว Netlify Load Balancer คือเลข104.198.14.52(คำแนะนำ: เล็กนี้อาจมีการเปลี่ยนแปลง สามารถเลื่อนดูได้ในคำแนะนำตั้งค่า Domain บน Netlify)
รอ DNS ทั่วโลกอัปเดตแพร๊บเดียว (เดี๋ยวนี้เร็วระดับไม่ติดจรวด บางที 5 นาทีก็ใช้งานได้แล้ว) ตัวเว็บไซต์ก็จะผงาดขึ้นโลกออนไลน์ พร้อมแจกพาสปอตกุญแจเขียว HTTPS สวยงามสง่า
ก้าวถัดไป: ลองทำ A/B Testing มั๊ย? (Split Testing สำหรับสายการตลาด)
ฟีเจอร์ทีเด็ดของคนใช้ระบบจัดการ CI/CD แบบเก่งๆ บน Netlify คือความสามารถในการทำ Split Testing (มักเรียกในการตลาดออนไลน์ว่า A/B Testing) สมมติคุณทำแบนเนอร์ปุ่มสีแดง (ใน Branch A) และแบนเนอร์ปุ่มสีเขียว (ใน Branch B) แล้วอยากรู้ว่าชาวเน็ตชอบแบบไหนคลิกเยอะกว้ากัน คุณสามารถสั่งแบ่ง Traffic คนกระโดดเข้าเว็บ 50/50 ไปยังแต่ละหน้า เพื่อดูได้เลยจากตัวเลขสถิติว่าปุ่มสีไหนเวิร์คกว่ากัน โดยที่ไม่ต้องปวดหัวหรือเสียบงบจ้างบริษัทเขียนสคริปต์ทำ A/B Test ซึ่งมีความซับซ้อนยุ่งยาก... นี่แหละครับความล้ำวิวัฒนาการของเทคโนโลยีที่ทำมาเสิร์ฟบนคลาวด์
บทสรุป: ความสบายที่ไม่อยากตีตั๋วกลับไปลำบาก
เอาตรงๆ จากใจเลยนะครับ หลังจากที่ผมจับ Workflow แนวๆ Git-Ops บนคลาวด์ตัวนี้ ผมก็ตัดสินใจลบโปรแกรม FTP Client คู่บุญออกจากเครื่องเดสก์ท็อปไปเลยโดยไม่ลังเลแม้แต่นาทีเดียว!
การทำ CI/CD ด้วยแพลตฟอร์มเหล่านี้ มันไม่ใช่แค่ประหยัดเวลาอย่างเดียว แต่มันคือ "การสร้างกำแพงอุดรอยรั่วเรื่องความมักง่ายของนักพัฒนาด้วยระบบลอตเตอรี่อัตโนมัติ" ส่งผลให้ตัวเว็บที่ออกสู่สายตาชาวบ้านมันเสถียรสุดๆ (High Reliability)
ถ้าใครที่ทนอ่านมาถึงตรงนี้แล้ว ยังเป็นหนึ่งคนในสายการทำงานที่เปิดโฟลเดอร์คลิกลากไฟล์โยนขึ้นเซิฟเวอร์เว็บอยู่... จงลุกขึ้นเดี๋ยวนี้เถอะครับ ลองเปิดโหมด Automation ให้เข้าใกล้มาตรฐานโลกดูซักตั้ง แล้วจะรู้จริงๆ ว่าสวรรค์มีอยู่จริง เวลานอนที่เคยหายไปจากการที่ต้องลุกมาแก้โค้ดล่มตอนเที่ยงคืน จะกลับมาอีกเป็นกองพะเนินเลยละครับ!
