Deploy คืออะไร ?

Deploy คือ ง่ายๆเลยคือการเอาเว็บของเราไปวางใว้บน server ให้คนอื่นเข้ามาใช้งานได้

เเล้วทำไม่ต้อง Deploy ล่ะ?

ก็เพราะถ้าไม่ deploy คนอื่นเข้ามาใช้เว็บเราไม่ได้ไงล่ะ hahaha
อ่าวกวนตีนนี้วาาา
โอเครๆ เดียวอธิบายดีๆ ตอนเรา dev เว็บอยู่เนี่ย เว็บมันรันอยู่บน local หรือก็คือในเครื่องเราเอง เราเปิด localhost ได้ แต่เพื่อนเราเปิดไม่ได้ เพราะมันอยู่ในเครื่องเรา ไม่ได้อยู่บนอินเทอร์เน็ต

อยากให้คนอื่นดูเว็บเดี๋ยวนี้ ทำไงดี?

มีทางลัดอยู่ทางนึง เรียกว่า Tunneling ก็คือเปิดอุโมงค์จากเครื่องเราออกไปอินเทอร์เน็ต แล้วมันจะสร้าง URL สาธารณะชั่วคราวให้ ส่งลิงก์ให้เพื่อนเปิดได้เลย เครื่องมือที่นิยมก็ ngrok หรือ Cloudflare Tunnel วิธีนี้เหมาะกับตอนทำ prototype ให้ลูกค้าดูระบบคร่าว ๆ

แต่!

ครื่องเราต้องเปิดไว้ตลอดนะจ๊ะ ปิดฝาโน้ตบุ๊กไปกินข้าวเมื่อไหร่ เว็บดับเมื่อนั้น
ถ้าอยากให้คนใช้ได้ยาว ๆ ทั้งวันทั้งคืน ยังไงก็ต้อง deploy

Deploy ยากไหม?

บอกเลย ง่ายกว่าที่คิด
 ปกติบน local เราทำยังไง บน server ก็ทำแบบนั้นแหละ
เอ้ย จริงดิ?

จริง…สัก 90% อีก 10% ต้องแก้นิดหน่อย เพราะเครื่องเราอาจเป็น Windows หรือ Mac แต่ server ส่วนใหญ่เป็น Linux

แล้วทำไมไม่ใช้ Docker ล่ะ มันแก้ปัญหา OS ไม่ตรงกันได้นี่?

ใช่ ใช้ได้ แต่ก่อนจะไป Docker ต้องเข้าใจ deploy แบบพื้นฐานก่อน ว่าเบื้องหลังมันทำอะไรบ้าง ไม่งั้นวันไหน Docker พัง จะงงว่าพังตรงไหน

Deploy มีกี่แบบ?

หลัก ๆ มี 3 แบบ

แบบที่ 1 VPS

แบบที่ 1 VPS คือเช่าคอมพิวเตอร์ 1 เครื่องบน cloud แล้วเข้าไปผ่าน SSH ใช้ terminal เป็นหลัก ก็เหมือนทำบน local แค่เปลี่ยนจาก Windows เป็น Linux

• ข้อดีคือคุมได้ทุกอย่าง ข้อเสียคือต้องทำเองทุกอย่าง ตั้งแต่ติดตั้ง Node เปิด firewall ไปจนถึงตั้ง Nginx
 เจ้าดัง ๆ ก็ AWS EC2, Google Cloud, Oracle Cloud

แบบที่ 2 PaaS (Platform as a Service)

แบบที่ 2 PaaS (Platform as a Service) สำหรับสายขี้เกียจ…เอ้ย สายที่ไม่อยากดูแล server เอง
 แค่เชื่อม GitHub พอ push ขึ้น main ปุ๊บ มัน deploy ให้อัตโนมัติปั๊บ เช่น Vercel, Render
 ง่ายใช่ไหมล่ะ

แบบที่ 3 Docker

แบบที่ 3 Docker แพ็กโปรเจกต์เราเป็น image แล้วเอาไปรันที่ไหนก็ได้ จะเป็น Google Cloud Run หรือเอาไปรันบน VPS ก็ได้

ปัญหาคือ API ผมดันเก็บไฟล์รูปไว้ใน folder ของ API เองน่ะสิ แถมยังใช้ WebSocket อีก

แล้วมันผิดตรงไหน?

• Vercel เป็น serverless คือตื่นมาทำงานก็ต่อเมื่อมี request เข้ามา ทำเสร็จก็ทิ้ง เหมือนห้องที่โดนรีเซ็ตทุกครั้ง รูปที่อัปโหลดไว้ก็หายเกลี้ยง แล้วก็ไม่รองรับ WebSocket ด้วย เพราะมันไม่ได้เปิดค้างไว้ให้เชื่อมต่อตลอด

• ส่วน Render กับ Cloud Run ถึงจะรัน server ค้างไว้ได้ แต่พื้นที่เก็บไฟล์เป็นแบบชั่วคราว restart หรือ deploy ใหม่เมื่อไหร่ รูปก็หายเหมือนกัน

ทางแก้มี 2 ทาง

• ทางที่ 1 แก้โค้ด ย้ายรูปไปเก็บข้างนอก เช่น Supabase Storage หรือ AWS S3 ฐานข้อมูลก็ใช้ของภายนอก ให้ API เป็นแค่ทางผ่านของข้อมูลเฉย ๆ ไม่เก็บอะไรไว้กับตัว แบบนี้ใช้ PaaS ได้สบาย

• ทางที่ 2 ไม่อยากแก้โค้ด ก็ใช้ VPS ไปเลย เพราะมันคือคอมพิวเตอร์จริง ๆ 1 เครื่อง ไฟล์ไม่หาย WebSocket ก็เปิดค้างได้

เเต่ในครั้งนี้จะ deploy เริ่มต้นใช้เเบบ VPS เพราะจะได้เข้าใจ การ deploy พื้นฐานก่อน

Stack ผมคือ หน้าเว็บใช้ React, API ใช้ Express
Web → Vercel ง่ายสุด จบ
API → VPS

ก่อน deploy ต้องเข้าใจกระบวนการหลักก่อน

นึกถึงตอนเริ่มพัฒนาโปรเจกต์ เราทำอะไรก่อน?

git clone <url>

git clone โค้ดลงมา

npm install

ติดตั้ง dependency

อ้าว ทำไมต้อง install อีก โค้ดก็โหลดมาแล้วนี่?

เพราะของที่เราติดตั้งใน Node.js มันไปกองอยู่ใน folder node_modules ซึ่งหนักมาก ไม่มีใครบ้าโยนขึ้น GitHub หรอก ปกติจะใส่ไว้ใน .gitignore

สิ่งที่เราดึงโค้ดจาก Github มีเเต่โค้ด ไม่มี dependency ซึ่งเราต้องติดตั้ง

แล้วเครื่องใหม่จะรู้ได้ไงว่าต้องติดตั้งอะไรบ้าง?

ดูจาก package.json ไง มันคือรายการที่ติดตั้งใว้ จดไว้ว่าโปรเจกต์ใช้อะไร เวอร์ชันไหน สั่ง npm install ทีเดียว คือจบ

สวนใครที่ใช้ ฝั่ง Python ก็คล้ายกัน ใช้ไฟล์ requirements.txt ในการจด

รันโปรเจกต์

ตอน dev เราใช้ npm run dev แต่ตอน deploy จะใช้ npm start หรือคำสั่งสำหรับรันจริง

แต่ ๆ ๆ ๆ ช้าก่อน!

ใครเขียน JavaScript, HTML, CSS ล้วน ๆ รันได้เลย
 แต่ถ้าใช้ TypeScript หรือ framework อย่าง React…พวกนายต้อง build ก่อนเว้ย!

Build คืออะไร?

Build ก็คือการแปลงโค้ดที่เราเขียน ให้กลายเป็นไฟล์ที่พร้อมใช้งานจริง

ทำไมต้องแปลง?

เพราะตัวที่รันโค้ดมันไม่รู้จัก TypeScript หรือ JSX
ฝั่งเว็บ บราวเซอร์อ่านได้แค่ HTML, CSS, JavaScript
ฝั่ง API ตัว Node.js ก็อ่านได้แค่ JavaScript

พอสั่ง

npm run build

มันจะสร้าง folder dist ขึ้นมา ข้างในคือโค้ดที่แปลงเป็น JavaScript หมดแล้ว
 จากนั้นก็รัน API ด้วย node dist/server.js (ชื่อไฟล์แล้วแต่คนตั้ง อาจเป็น index.js หรือ main.js)
 แค่นี้ API ก็ทำงานแล้ว

แต่ ๆ ๆ ใครใช้ ORM อย่าง Prisma ต้องรันคำสั่งเพิ่มอีกนิด ไม่งั้น API จะคุยกับ database ไม่รู้เรื่อง

พูดมาเยอะ บางคนอาจยังไม่เห็นภาพ
 งั้นมาลงมือทำจริงกันเลยดีกว่า!