Deploy ขึ้นอินเทอร์เน็ตจริง

ทำไมต้อง Deploy?

ตอนนี้แอปของคุณรันได้แค่ในเครื่อง (localhost:3000) — มีแค่คุณที่เข้าได้ "Deploy" คือเอาแอปไปไว้บน เซิร์ฟเวอร์สาธารณะ เพื่อให้ใครก็เข้าได้จากที่ไหนก็ได้

กำลังวาดไดอะแกรม…

🎯 Deploy ปิดลูป "เป็น Fullstack" — คนอื่นเห็นสิ่งที่คุณสร้างได้จริง!

ภาพรวม: แอปคุณมี 3 ส่วน ต้อง deploy คนละที่

กำลังวาดไดอะแกรม…

💡 สำหรับโปรเจกต์ฝึก ใช้แผนฟรีของแต่ละที่พอ ไม่ต้องจ่าย

ขั้นที่ 1: เตรียมโค้ดให้พร้อม

ก่อน deploy ให้ลืมตา:

1. โค้ดอยู่บน GitHub แล้ว (ถ้ายัง กลับไปดูบท Git)
2. Frontend ชี้ API ไปที่ URL ของ Backend จริง (ไม่ใช่ localhost)
3. Backend เปิด CORS ให้โดเมน Frontend เรียกได้

// ใน Backend (Express) ตอน deploy ให้รองรับทุ่งโดเมน
const cors = require("cors");
app.use(cors({ origin: true }));   // หรือระบุโดเมน Frontend เพื่อปลอดภัยขึ้น

⚠️ ใช้ ตัวแปร environment (env) เก็บค่าที่เปลี่ยนระหว่างเครื่องกับเซิร์ฟเวอร์ เช่น URL ฐานข้อมูล — ห้ามเขียนติดไว้ในโค้ดตรง ๆ

ขั้นที่ 2: Deploy Backend ก่อน

เริ่มจาก Backend เพราะ Frontend ต้องการ URL ของมัน

ตัวอย่าง: ใช้ Render (ฟรี, ใช้ง่าย)

1. สมัคร https://render.com (ด้วย GitHub)
2. New + → Web Service → เลือก repo ของคุณ
3. ตั้งค่า:
   • Build Command: npm install
   • Start Command: node index.js
4. เพิ่ม environment variables (ถ้ามี เช่น URL database)
5. กด Create Web Service → รอ build
6. ได้ URL เช่น https://shop-api-xxx.onrender.com

Railway (https://railway.app) ทำคล้ายกัน ลองเลือกที่ถูกใจ

ทดสอบว่าใช้ได้

เปิด https://<url-backend>/products ในเบราว์เซอร์ → ควรเห็น JSON

ขั้นที่ 3: ตั้งค่า Database (ถ้าใช้)

SQLite เก็บเป็นไฟล์ ใช้บนเซิร์ฟเวอร์ได้ไม่ดีนัก (ข้อมูลหายตอน rebuild) ตอน deploy จริงแนะนำย้ายไป PostgreSQL ฟรี เช่น:

• Neon (https://neon.tech) — PostgreSQL serverless ฟรี
• Supabase (https://supabase.com) — PostgreSQL + ฟีเจอร์เสริม

1. สมัคร → สร้าง project → ได้ connection string
2. ใส่ connection string ใน env ของ Backend
3. ปรับโค้ดจาก sqlite3 เป็น pg (PostgreSQL) — ใช้ SQL คล้ายกัน

💡 สำหรับโปรเจกต์ฝึกอย่างแรก อาจข้ามขั้นนี้ไปก่อน ใช้ SQLite ไปเลยก็ได้ ค่อยยกระดับทีหลัง

ขั้นที่ 4: Deploy Frontend

ตัวอย่าง: ใช้ Vercel (ง่ายสุดสำหรับ React)

1. สมัคร https://vercel.com (ด้วย GitHub)
2. Add New → Project → เลือก repo
3. Vercel detect React/Vite ให้อัตโนมัติ
4. ตั้งค่าสำคัญ: เปลี่ยน URL API ในโค้ด Frontend จาก localhost:3000 เป็น URL Backend จริง
5. กด Deploy → ได้ URL เช่น https://my-shop.vercel.app

ใช้ตัวแปร environment แทน URL

ดีกว่าเขียนติดโค้ด:

// ใช้ env ถ้ามี, ไม่งั้นใช้ localhost (ตอน dev)
const API = process.env.REACT_APP_API_URL || "http://localhost:3000";

แล้วตั้ง REACT_APP_API_URL ในหน้าตั้งค่าของ Vercel

ขั้นที่ 5: ทดสอบจบงาน

1. เปิด URL Frontend ของคุณ
2. ลองเพิ่ม/ลบข้อมูล
3. รีเฟรช → ข้อมูลยังอยู่ (เพราะเก็บใน database จริง)
4. ส่ง URL ให้เพื่อนเข้าดู 🎉

โดเมนกับ HTTPS

URL ที่ได้ (เช่น my-shop.vercel.app) มี HTTPS ให้ฟรีอัตโนมัติ ปลอดภัยแล้ว

ถ้าอยากใช้ชื่อโดเมนของตัวเอง (เช่น myshop.com):

1. ซื้อโดเมน (Namecheap, Cloudflare, ฯลฯ)
2. ในหน้าตั้งค่า Vercel/Netlify → เพิ่ม custom domain
3. ตั้ง DNS ตามที่บอก → รอ แล้ว HTTPS มาเอง

ทิปส์สำคัญ

• ✅ ไม่ต้อง deploy บ่อย — deploy ตอนฟีเจอร์พร้อมใช้จริง
• ✅ อ่าน log ตอน deploy ไม่สำเร็จ — มันบอกสาเหตุ
• ✅ ทดสอบในเครื่องก่อน ให้แน่ใจว่าทำงาน แล้วค่อย deploy
• ⚠️ ห้ามอัป secret (รหัสผ่าน, key) ขึ้น GitHub — ใช้ env

สรุป

🎉 ยินดีด้วย! ตอนนี้แอปของคุณ ออนไลน์จริง ใครก็เข้าได้ นี่คือจุดสูงสุดของการเป็น Fullstack Developer มือใหม่ — และเป็นจุดเริ่มต้นของการเติบโตต่อไป! 🚀