Checklist ก่อน Deploy React App ขึ้น Production

ภาพรวม

ก่อนกด deploy React app ขึ้น production อย่าคิดว่าแค่ npm run build ผ่านแล้วจบ 🙂 production คือสนามจริง ที่ user ไม่รู้ว่าเราตั้ง env ผิด ไม่รู้ว่า route refresh แล้ว 404 ไม่รู้ว่า bundle หนักเพราะ import ทั้งโลก เขารู้แค่ว่า “เว็บช้า” หรือ “เข้าไม่ได้”

อย่างแรกที่ต้องเช็กคือ env แยกให้ชัดว่า dev, staging, production ใช้ค่าไม่เหมือนกัน API URL ต้องชี้ถูกที่ feature flag ต้องอยู่ถูกสถานะ secret ห้ามฝังใน React โดยตรง เพราะอะไรก็ตามที่ขึ้นต้นด้วย VITE_ หรือ REACT_APP_ มักถูก bundle ไปฝั่ง browser แปลว่า user เปิด DevTools ก็เห็นได้ ถ้าเป็น token สำคัญ ต้องอยู่ server เท่านั้น

ต่อมาคือ build ลอง build ในเครื่องก่อนเสมอ npm run build หรือ pnpm build ต้องผ่านแบบไม่มี error warning บางอย่างไม่ควรมองข้าม เช่น dependency ใหญ่ผิดปกติ ใช้ variable ที่ไม่มีจริง หรือ source map โผล่ใน production โดยไม่ตั้งใจ หลัง build แล้วควรลอง serve ไฟล์จริง ไม่ใช่แค่รัน dev server เพราะ dev server ใจดีเกินไป production server ไม่ได้ช่วยเราเท่าเดิม

เรื่อง routing สำคัญมากกับ React SPA ถ้าใช้ React Router แล้วมี path เช่น /dashboard/settings การ refresh หน้านี้บน production อาจ 404 ได้ เพราะ server มองหาไฟล์จริงตาม path นั้น วิธีแก้คือทำ fallback ไปที่ index.html บน Netlify ใช้ _redirects บน Vercel มักจัดการง่ายกว่า บน Nginx ต้องตั้ง try_files บน S3/CloudFront ต้องตั้ง error document หรือ rewrite ให้ถูก เช็กด้วยการเปิด route ลึก ๆ แล้วกด refresh ถ้ารอด ค่อยหายใจได้ 😄

performance อย่ารอดูตอน user บ่น เช็ก bundle size ก่อน deploy แยก code ด้วย lazy loading ในหน้าที่ไม่จำเป็นต้องโหลดทันที รูปภาพควรบีบอัดและใช้ขนาดพอดี อย่าโยนรูป 4MB ไปแสดงเป็น thumbnail font ก็มีผล โหลดเท่าที่ใช้ ตั้ง cache header ให้ static assets ที่มี hash อยู่ได้นาน แต่ index.html ควร cache สั้นกว่า ไม่งั้น user อาจติด version เก่า

อีกจุดที่มักพลาดคือ environment behavior local เรียก API ได้ production เรียกไม่ได้เพราะ CORS local login ผ่าน production cookie ไม่ติดเพราะ SameSite, Secure, domain ไม่ตรง local path ใช้ตัวพิมพ์เล็กใหญ่มั่วได้บางระบบ production บน Linux ไม่ให้อภัย ไฟล์ Logo.png กับ logo.png คือคนละไฟล์

ก่อนปล่อยจริงให้มี checklist สั้น ๆ เปิดหน้าแรก เปิด route ลึก กด refresh login/logout เรียก API สำคัญ ดู console ว่ามี error ไหม ดู network ว่ามี request fail ไหม ลองบน mobile ลอง slow network เช็ก meta title, favicon, og image เช็ก analytics ว่ายิงถูก environment

deploy ที่ดีไม่ใช่ deploy ที่เร็วที่สุด แต่คือ deploy ที่รู้ว่าตัวเองกำลังปล่อยอะไร React app ที่ production-ready ต้องผ่านทั้ง env, build, routing และ performance ถ้าสี่อย่างนี้นิ่ง โอกาสเจอไฟไหม้หลังปล่อยจะลดลงเยอะมาก 🚀

แนวทางนำไปใช้

• นำแนวคิดจากโพสต์นี้ไปทดลองกับงานจริงของคุณ
• แยกเป็นขั้นตอนเล็ก ๆ แล้วทำทีละส่วน
• บันทึกผลลัพธ์และสิ่งที่เรียนรู้เพื่อต่อยอด

สรุป

ตรวจ environment variables, routing, asset paths, caching, error handling และ monitoring ก่อนปล่อย React app เพื่อป้องกันปัญหาที่มักไม่ปรากฏในเครื่อง development