☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ลองไมค์ สัปดาห์นี้เราจะมาพูดถึงการทำ Deployment ฝั่ง Frontend กันว่า โดยปกติ หากเราจะทำการขึ้นงานหน้า web ฝั่ง Frontend 1 ตัวนั้น มี process อะไรต้องทำบ้าง เพื่อให้สามารถขึ้นงาน Frontend ออกมาได้อย่างถูกต้อง
โดยในหัวข้อนี้ เราจะพูดถึงไอเดียหลักที่ทำให้เราสามารถ host งาน web ออกมาได้ผ่านทั้งหมด 4 วิธีคือ
1. ผ่านตัวช่วยแบบสุดตัวอย่าง Vercel (CI/CD ครบ)
2. ผ่าน Firebase hosting (มี CD แต่ไม่มี CI)
3. ผ่าน Github Pages (กับการจัดการ Config Single page application)
4. ผ่าน Cloud Server (Google Compute Engine) ด้วย Nginx แบบง่ายๆ เพื่อปูภาพว่า หากไม่มี CI/CD เลยเราจะขึ้นงานยังไงได้บ้าง
** โดย เราจะเน้นที่ปูพื้นฐาน เพื่อให้เข้าใจภาพของการ Deploy Frontend กันก่อน ซึ่งเรายังไม่ได้พูดถึง practice frontend code สำหรับเรื่อง Security กันนะครับ เราจะกลับมาขยี้กัน ตอนที่เราจบ Deployment ทั้ง Frontend และ Backend กันครับ
หัวข้อ
00:00 แนะนำหัวข้อ
02:47 ทบทวนการทำงานฝั่ง Frontend และ Backend
08:38 โจทย์สำคัญของการ deploy Frontend
13:04 การ build กับ project ตัวอย่าง React ที่เราหยิบมา (มี router)
22:19 แนะนำหัวข้อที่เราจะสาธิตการ deploy ในหัวข้อนี้
23:28 1. deploy วิธี Vercel
32:42 การแยก Environment ระหว่าง Development และ Production
43:42 2. deploy วิธี Firebase hosting
50:42 Single Page Application (SPA) กับ Hosting config (rewrite)
57:07 3. deploy วิธี Github Pages
1:02:45 การแก้ config path เพื่อ support SPA ใน Github Pages (แบบไม่ใช้ rewrite)
1:12:25 4. deploy วิธี Cloud (ด้วย Google Compute Engine + Nginx)
1:27:02 สรุปทั้งหมดและคำแนะนำ
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev
Website: mikelopster.dev
แปะพิกัดของที่ผมใช้
shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
shope.ee/6fI75UuLEM osmo pocket 3
shope.ee/4VDcVixCW9 ไมค์ shure
shope.ee/6pbXI6d5xG กล้องวงจรปิด
Enjoy ครับ 😘