deploy ฟรีๆด้วย vercel..???

#พื้นฐานการเขียนเว็ปไซต์ #ติดเทรนด์ #Lemon8ฮาวทู #vercelคืออะไร #ป้ายยากับlemon8

Vercel คือ แพลตฟอร์ม Cloud สำหรับวางระบบหน้าบ้าน (Frontend) ที่ได้รับความนิยมสูงสุดในปัจจุบันครับ โดยเฉพาะถ้าคุณใช้ React หรือ Next.js เพราะ Vercel เป็นผู้สร้าง Next.js ขึ้นมาเอง ทำให้การทำงานร่วมกันนั้น "ไร้รอยต่อ" สุดๆ

พูดง่ายๆ คือ Vercel ทำหน้าที่นำ Code จาก GitHub ของคุณ ไปทำให้กลายเป็น เว็บไซต์จริงๆ (URL) ที่คนทั่วโลกเข้าชมได้ โดยที่คุณไม่ต้องไปตั้งค่า Server หรือเช่า Hosting ให้ยุ่งยากครับ

จุดเด่นของ Vercel

Deploy อัตโนมัติ: เมื่อคุณ git push งานขึ้น GitHub ตัว Vercel จะรู้ทันทีและทำการอัปเดตหน้าเว็บให้ใหม่ภายในไม่กี่วินาที

Fast & Global: เว็บจะถูกเก็บไว้บน Edge Network ทั่วโลก ทำให้เปิดจากที่ไหนก็เร็ว

Free Tier: สำหรับโปรเจกต์ส่วนตัวหรือการเรียนรู้ สามารถใช้งานได้ ฟรี ตลอดชีพครับ

HTTPS: มี SSL (กุญแจล็อก) ให้ฟรีโดยอัตโนมัติ

ขั้นตอนการใช้งาน (เชื่อมต่อกับ Vite + React ของคุณ)

1. สมัครใช้งาน

ไปที่ Vercel.com

เลือก "Continue with GitHub" (แนะนำวิธีนี้ที่สุด เพราะจะเชื่อมต่อโปรเจกต์ได้ง่ายมาก)

2. นำเข้าโปรเจกต์ (Import)

เมื่อ Log in แล้ว กดปุ่ม "Add New..." และเลือก "Project"

Vercel จะแสดงรายชื่อ Repository ใน GitHub ของคุณ ให้เลือกโปรเจกต์ที่คุณเพิ่ง Push ขึ้นไป (เช่น article-for-lift) แล้วกด "Import"

3. ตั้งค่าการ Build (Configuration)

Vercel ฉลาดพอที่จะรู้ว่านี่คือโปรเจกต์ Vite:

Framework Preset: จะขึ้นว่าเป็น Vite โดยอัตโนมัติ

Root Directory: ไม่ต้องแก้ไข

Build Command: จะเป็น npm run build

Output Directory: สำหรับ Vite จะต้องเป็น dist (Vercel มักจะเลือกให้เอง)

4. กด Deploy

กดปุ่ม "Deploy" แล้วรอประมาณ 1 นาที เมื่อเสร็จแล้วคุณจะได้ URL เช่น my-app.vercel.app มาใช้งานทันทีครับ!

เทคนิคการอัปเดตงาน (The Magic of Vercel)

หลังจากนี้ เมื่อคุณแก้ไข Code ในเครื่องคอมพิวเตอร์ของคุณเสร็จ คุณแค่พิมพ์คำสั่งเดิม:

git add .

git commit -m "Update new feature"

git push origin main

ทันทีที่กด Enter ในข้อ 3 Vercel จะเริ่มดึง Code ใหม่ไป Build และอัปเดตหน้าเว็บให้คุณโดยอัตโนมัติ (CI/CD) ครับ

ข้อควรระวังสำหรับโปรเจกต์ของคุณ ⚠️

เนื่องจากโปรเจกต์ของคุณมีการดึงข้อมูลจาก Google Apps Script:

หากใน Code ของคุณยังเป็น const API_URL = "..." แบบ Hard-code ไว้ในไฟล์ App.jsx เว็บจะทำงานได้ปกติ

แต่ถ้าในอนาคตคุณเก็บ URL ไว้ในไฟล์ .env อย่าลืมเอาค่านั้นไปใส่ในเมนู "Environment Variables" บนหน้า Setting ของ Vercel ด้วยนะครับ