การทำ Frontend Deployment

Published: 02 May 2024
on channel: mikelopster
10,461
502

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @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: https://mikelopster.dev

แปะพิกัดของที่ผมใช้
https://shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
https://shope.ee/6fI75UuLEM osmo pocket 3
https://shope.ee/4VDcVixCW9 ไมค์ shure
https://shope.ee/6pbXI6d5xG กล้องวงจรปิด

Enjoy ครับ 😘


Watch video การทำ Frontend Deployment online without registration, duration hours minute second in high quality. This video was added by user mikelopster 02 May 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10,46 once and liked it 50 people.