การทำ Frontend Deployment скачать в хорошем качестве

การทำ Frontend Deployment

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