<div class="key-takeaways"><ul><li>แชร์วิธีตั้งค่า CI/CD pipeline สำหรับ Flutter web บน Firebase Hosting ฟรี 100%</li><li>ใช้ GitHub Actions ช่วยบิวด์โค้ด แคชข้อมูล และอัปเดตอัตโนมัติทุกครั้งที่มีการ merge</li><li>สร้าง URL พรีวิวเฉพาะสำหรับแต่ละ Pull Request เพื่อตรวจสอบงานก่อนขึ้น production</li><li>เลิกพึ่งพาวิธี deploy แบบแมนนวลที่เสี่ยงต่อความผิดพลาดจากคน</li></ul></div><p>ก่อนหน้านี้กระบวนการอัปเดตเว็บไซต์พอร์ตโฟลิโอของผู้พัฒนาใช้เพียงสามขั้นตอนง่ายๆ คือ รันคำสั่ง flutter build web แล้วภาวนาให้อะไรๆ ราบรื่น ก่อนจะปิดท้ายด้วย firebase deploy แต่วิธีนี้กลับสร้างบทเรียนราคาแพงเมื่อเกิดเหตุการณ์อัปโหลดล้มเหลวระหว่างต่อไวไฟโรงแรมที่อาบูดาบี จนทำให้เว็บไซต์แสดงผลเป็นหน้าจอสีขาวว่างเปล่า นานถึงสี่ชั่วโมงเต็มในช่วงเวลาที่รีครูเตอร์กำลังเข้ามาเปิดชมพอดี</p><p>เหตุการณ์ดังกล่าวกลายเป็นจุดเปลี่ยนสำคัญที่ทำให้ตัดสินใจย้ายกระบวนการทั้งหมดไปไว้บน GitHub Actions ในสัปดาห์ถัดมา โดยระบบที่ใช้งานจริงในปัจจุบันมีจุดเด่นหลักคือการบิวด์โค้ดเพียงครั้งเดียว แคชข้อมูลให้แน่นหนา และสร้าง URL พรีวิวสำหรับทุก Pull Request พร้อมกับส่งขึ้น production อัตโนมัติทันทีที่ทำการ merge โค้ด</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/flutter_web_firebase_hosting_ci_cd_pipeline_mtozo6ep_inline_1_efcda0da00.jpg" alt="software developer coding workspace office" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>ข้อดีที่สำคัญที่สุดไม่ใช่เรื่องค่าใช้จ่ายที่ประหยัดได้เพราะอยู่ภายใต้โควตาฟรีของทั้ง GitHub Actions และ Firebase Hosting แต่เป็นการตัดปัญหาที่ตัวบุคคลซึ่งมักจะเผลอเรอทำพลาดเมื่อเหนื่อยล้า รีบร้อน หรือใช้งานอินเทอร์เน็ตความเร็วต่ำ จนเผลอข้ามขั้นตอนการรันคำสั่งตรวจสอบโค้ดหรือหลงลืมบิวด์ไฟล์ชุดล่าสุด</p><div class="stat-row"><div class="stat-item"><span class="stat-number">$0</span><span class="stat-label">ค่าใช้จ่ายต่อเดือน</span></div><div class="stat-item"><span class="stat-number">100%</span><span class="stat-label">ทำงานอัตโนมัติผ่าน CI</span></div></div><p>อีกหนึ่งข้อดีที่ส่งผลอย่างมากต่อกระบวนการทำงานคือการมีพรีวิว URL สำหรับแต่ละ Pull Request ซึ่งช่วยเปลี่ยนจากคำพูดลอยๆ ว่าโค้ดใช้งานได้จริง ให้กลายเป็นลิงก์ที่กดเข้าไปทดสอบได้ทันที ทำให้ทีมงานหรือเพื่อนร่วมงานช่วยกันตรวจสอบข้อผิดพลาดเรื่องการจัดหน้าจอหรือปัญหาตัวอักษรไม่แสดงผลก่อนนำขึ้นจริงได้ง่ายยิ่งขึ้น</p><blockquote class="pull-quote"><p>&quot;CI doesn't get tired. It runs the same steps in the same order every single time, on a clean machine, or it refuses to deploy at all.&quot;</p><cite>Dev.to Author</cite></blockquote><p>ในส่วนของการจัดการความปลอดภัย บทความเตือนให้หลีกเลี่ยงการใช้โทเค็นอายุยาวแบบเดิมที่ผูกติดกับบัญชี Google ทั้งหมด แต่ควรเปลี่ยนมาใช้ service account ที่จำกัดสิทธิ์เฉพาะโปรเจกต์เดียวตามหลักการความปลอดภัยขั้นต่ำสุด (Principle of Least Privilege) เพื่อป้องกันความเสี่ยงหากเกิดกรณีข้อมูลรั่วไหลในระบบล็อกของ CI</p><div class="ai-insight"><p>การนำระบบ CI/CD มาใช้กับโปรเจกต์ขนาดเล็กอย่างเว็บไซต์พอร์ตโฟลิโอหรือบล็อกส่วนตัว ช่วยฝึกฝนระเบียบวินัยในการพัฒนาซอฟต์แวร์แบบมืออาชีพ ลดขนาดของชุดโค้ดในการส่งมอบแต่ละครั้งให้เล็กลง และทำให้การตรวจสอบข้อผิดพลาดทำได้อย่างรวดเร็วเมื่อเกิดปัญหาขึ้น</p></div><p>ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/devshakib/a-free-practical-cicd-pipeline-for-flutter-web-on-firebase-hosting-4k1e" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

<div class="key-takeaways"><ul><li>Implement a completely free CI/CD pipeline for Flutter web applications on Firebase Hosting</li><li>Utilize GitHub Actions for caching, building, and automated production deployments on merge</li><li>Generate isolated preview URLs for every individual pull request to test changes safely</li><li>Eliminate human error prone manual deployment rituals during poor network conditions</li></ul></div><p>For about a year, the deployment routine for a portfolio site relied on a simple three-step ritual: running a web build command, crossing fingers, and pushing to Firebase Hosting. This fragile workflow proved dangerous when a hotel Wi-Fi connection in Abu Dhabi dropped mid-upload during an evening deployment, leaving the personal site showing a blank white screen for roughly four hours while a recruiter happened to visit.</p><p>That incident sparked the migration to GitHub Actions the following weekend. The resulting pipeline achieves a monthly cost of zero dollars by staying well within GitHub Actions and Firebase Hosting free tiers, while completely removing the developer as the single point of failure during manual deployment steps.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/flutter_web_firebase_hosting_ci_cd_pipeline_mtozo6ep_inline_1_efcda0da00.jpg" alt="software developer coding workspace office" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>The automation addresses common human errors that happen when deploying under stress, fatigue, or poor connectivity—such as forgetting to run code analysis or deploying an incomplete build bundle. Automated continuous integration executes identical steps in the exact same sequence on a clean machine every single time.</p><div class="stat-row"><div class="stat-item"><span class="stat-number">$0</span><span class="stat-label">Monthly Pipeline Cost</span></div><div class="stat-item"><span class="stat-number">100%</span><span class="stat-label">Automated via GitHub Actions</span></div></div><p>Furthermore, per-PR preview channels transform code reviews from theoretical claims into functional, shareable links. Reviewers can spot layout glitches at smaller screen sizes or missing font assets before any changes ever hit the live production environment.</p><blockquote class="pull-quote"><p>&quot;CI doesn't get tired. It runs the same steps in the same order every single time, on a clean machine, or it refuses to deploy at all.&quot;</p><cite>Dev.to Author</cite></div><p>Security practices also receive a major upgrade by abandoning long-lived legacy tokens tied to entire Google accounts. Instead, developers should configure scoped service accounts with minimal permissions dedicated solely to Firebase Hosting deployments following the principle of least privilege.</p><div class="ai-insight"><p>Adopting enterprise-grade deployment practices for personal or small-scale projects reduces deployment batch sizes, makes troubleshooting significantly faster, and establishes solid DevOps habits applicable to larger software products.</p></div><p>Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/devshakib/a-free-practical-cicd-pipeline-for-flutter-web-on-firebase-hosting-4k1e" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_flutter-web-บน-firebase-hosting-ci-cd-pipeline-ฟรีแบบปฏิบัติจริง-mtozo6ep.jpg

small_flutter-web-บน-firebase-hosting-ci-cd-pipeline-ฟรีแบบปฏิบัติจริง-mtozo6ep.jpg

thumbnail_flutter-web-บน-firebase-hosting-ci-cd-pipeline-ฟรีแบบปฏิบัติจริง-mtozo6ep.jpg

Inewgen

Inewgen

#Firebase Hosting

Free CI/CD Pipeline for Flutter Web on Firebase Hosting

Inewgen