Vercel Deploy Playbook สำหรับ Non-Coder | Vibe Coding สำหรับคนไม่ใช่โปรแกรมเมอร์ | Vibe Coding Thailand
$ cat appendix-d-vercel-deploy-playbook.md
Vercel Deploy Playbook สำหรับ Non-Coder ใช้ appendix นี้เมื่อไหร่
ใช้เมื่อคุณมีเว็บหรือ app ที่รันในเครื่องได้แล้ว และอยากเอาขึ้นออนไลน์ด้วย Vercel
เป้าหมายของ appendix นี้คือจับมือทำแบบ practical:
local works → GitHub ready → import to Vercel → set env vars → deploy → test → fix logs → preview → rollback if needed คัดลอก ไม่ใช่สอน Vercel ทุก feature
เราจะใช้เฉพาะสิ่งที่ non-coder ต้องรู้เพื่อ deploy project เล็ก ๆ อย่างปลอดภัย
ภาพรวมแบบภาษาคน
Vercel คือ platform สำหรับเอาเว็บขึ้นออนไลน์
ถ้าเชื่อมกับ GitHub แล้ว workflow จะประมาณนี้:
push code ไป GitHub → Vercel เห็น code ใหม่ → Vercel build project → ถ้าผ่าน จะได้ URL → ถ้า push เข้า main จะเป็น production → ถ้า push เข้า branch/PR จะเป็น preview คัดลอก คำสำคัญ:
Preview เว็บทดสอบก่อนของจริง
Production เว็บจริงที่ user ใช้
Build ขั้นตอนแปลง project ให้พร้อม deploy
Environment variable ค่า config เช่น URL/key ที่ไม่ควร hardcode
Deployment version หนึ่งของเว็บที่ Vercel build แล้ว
Rollback ย้อน production กลับ version ก่อนหน้า
ก่อน deploy: เช็กว่า project พร้อมไหม อย่าเริ่มจากหน้า Vercel ทันที
1. Project รันในเครื่องได้ ควรเปิดเว็บ local ได้ เช่น:
http://localhost:3000 คัดลอก ถ้ายังรันในเครื่องไม่ได้ อย่าเพิ่ง deploy
ให้แก้ local ก่อน เพราะ deploy จะ debug ยากกว่า
2. มี Git repository แล้ว ควรมี repo ที่ commit แล้ว
ช่วยตรวจว่า project นี้พร้อม push ไป GitHub และ deploy ไป Vercel ไหม ตรวจ: - package.json มี scripts อะไร - build command คืออะไร - มีไฟล์ .env หรือ secret ถูก track ไหม - มี .gitignore ครบไหม - มี README หรือ deployment notes ไหม อย่าเพิ่งแก้ไฟล์ ให้รายงานก่อน คัดลอก
3. ไม่มี secret อยู่ใน code ก่อน push ไป GitHub ให้เช็ก:
.env .env.local API key จริง service role key database password secret token คัดลอก ถ้าเจอ secret ใน Git history หรือ GitHub แล้ว ไม่ใช่แค่ลบออกจากไฟล์
Step 1 — Push project ไป GitHub ถ้าคุณยังไม่ใช้ GitHub ให้คิดง่าย ๆ ว่า GitHub คือที่เก็บ code บน cloud
Vercel จะดึง code จาก GitHub ไป deploy
สิ่งที่ต้องมี
GitHub account
repository สำหรับ project นี้
project ถูก commit แล้ว
ถาม Claude ให้ช่วยตรวจ ช่วยเตรียม project นี้ก่อน push ไป GitHub กติกา: - อย่า push เอง - ตรวจ .gitignore - ตรวจว่าไม่มี .env หรือ secret ถูก track - สรุปไฟล์ที่ควร commit - เสนอ commit message - บอกคำสั่งที่ฉันต้องรันทีละบรรทัด คัดลอก ถ้าคุณไม่ชำนาญ command line ให้ Claude อธิบาย command ทีละบรรทัดก่อนรัน
Step 2 — Import repository เข้า Vercel หลัง code อยู่ใน GitHub แล้ว ไปที่ Vercel Dashboard
Vercel Dashboard → Add New / New Project → Import Git Repository → เลือก repo → Configure Project → Deploy คัดลอก สิ่งที่ต้องดูในหน้า Configure Project:
ช่อง ควรทำอะไร Project Name ตั้งชื่ออ่านง่าย Framework Preset ให้ Vercel detect ก่อน ถ้าเป็น Next.js มัก detect ได้ Root Directory ถ้า project อยู่ root ใช้ default; ถ้าอยู่ subfolder ต้องเลือกให้ถูก Build Command ใช้ตาม package.json เช่น npm run build Output Directory ปกติปล่อย default ถ้า framework detect ถูก Environment Variables ใส่ค่าที่ app ต้องใช้
สำหรับ Next.js บน Vercel มัก zero-config ถ้า project structure ปกติ
แต่ถ้า deploy fail อย่าเดา ให้ดู build log
Step 3 — ตรวจ build settings จาก package.json ก่อนแก้ build settings ใน Vercel ให้ดู package.json
{ " scripts " : { " dev " : "next dev" , " build " : "next build" , " start " : "next start" } } คัดลอก Script ใช้ทำอะไร devรันในเครื่อง buildให้ Vercel build startรัน production server บางกรณี
ช่วยอ่าน package.json แล้วอธิบายว่า Vercel ควรใช้ build command อะไร ถ้า framework preset ควรเป็นอะไรให้บอกด้วย อย่าแก้ไฟล์ คัดลอก ถ้า Claude บอกให้เปลี่ยน build command ให้ถามต่อ:
มีหลักฐานจาก package.json หรือ error log ตรงไหนว่าต้องเปลี่ยน build command คัดลอก
Step 4 — ใส่ Environment Variables ใน Vercel Environment variables คือค่าที่ app ต้องใช้ แต่ไม่ควรเขียน hardcode ใน code
NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY SUPABASE_SECRET_KEY STRIPE_SECRET_KEY คัดลอก ใน Vercel ให้ใส่ที่ project settings ของ project นั้น
local ใช้ .env.local Vercel ใช้ Environment Variables ใน dashboard คัดลอก
Public vs Secret ประเภท ตัวอย่าง อยู่ frontend ได้ไหม Public NEXT_PUBLIC_SUPABASE_URLได้ Public NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEYได้ แต่ต้องมี RLS/policy Secret SUPABASE_SECRET_KEYไม่ได้ Secret SUPABASE_SERVICE_ROLE_KEYไม่ได้ Secret STRIPE_SECRET_KEYไม่ได้
คำว่า NEXT_PUBLIC_ ใน Next.js แปลว่าค่านี้อาจถูกใช้ฝั่ง browser ได้
อย่าใส่ secret จริงในตัวแปรที่ขึ้นต้นด้วย NEXT_PUBLIC_
เลือก environment ให้ถูก Vercel มี environment หลัก:
Development Preview Production คัดลอก สำหรับมือใหม่ ให้เริ่มแบบนี้:
ถ้า app ต้องใช้ค่าบน production URL ให้ใส่ Production
ถ้าอยาก test บน branch/PR ก่อน ให้ใส่ Preview ด้วย
ถ้าใช้ Vercel CLI local ค่อยสนใจ Development
ข้อสำคัญจาก Vercel docs: การเปลี่ยน environment variable จะมีผลกับ deployment ใหม่ ไม่ใช่ deployment เก่าทันที
ดังนั้นถ้าเพิ่มหรือแก้ env var แล้วเว็บยังพัง ให้ redeploy ใหม่
ช่วยทำ env var checklist สำหรับ deploy ไป Vercel ตอบเป็นตาราง: - variable name - public หรือ secret - ใช้ทำอะไร - ต้องใส่ใน Preview ไหม - ต้องใส่ใน Production ไหม - ห้ามอยู่ frontend ไหม กติกา: - อย่า print ค่า secret จริง - ถ้าไม่แน่ใจ ให้บอกว่าไม่แน่ใจ คัดลอก
Step 5 — Deploy ครั้งแรก หลัง import repo และตั้งค่า env var แล้ว กด deploy
ระหว่าง deploy ให้ดูสถานะ:
Queued / Building / Ready / Error คัดลอก
เปิด URL ที่ Vercel ให้มา
test flow หลัก
test mobile
ถ้ามี form ให้ submit test
อย่ากดแก้มั่ว
เปิด build log
copy error ส่วนสำคัญให้ Claude วิเคราะห์
Vercel deploy fail ช่วยวิเคราะห์ build log นี้แบบ non-coder Expected: - build ผ่าน - ได้ deployment URL Build log: [paste log] กติกา: - อย่าเพิ่งแก้ไฟล์ - ชี้บรรทัดสำคัญใน log - แยกสาเหตุที่เป็นไปได้ 2–3 แบบ - บอกวิธีตรวจแต่ละแบบ - เสนอ fix ที่เปลี่ยนน้อยที่สุด คัดลอก
Step 6 — Test Production URL Deploy ผ่านไม่ได้แปลว่า app ใช้ได้จริง
[ ] หน้าเปิดได้ [ ] ไม่มี blank screen [ ] mobile อ่านได้ [ ] CTA/link สำคัญกดได้ [ ] form submit ได้ [ ] success message แสดงถูก [ ] invalid input แสดง error ที่เข้าใจได้ [ ] ไม่มีข้อมูล test แปลก ๆ โผล่ [ ] ไม่มี secret/key โผล่ในหน้าเว็บหรือ error คัดลอก ถ้ามี database เช่น Supabase ให้เพิ่ม:
[ ] row เข้า table ถูกต้อง [ ] public user อ่านข้อมูลคนอื่นไม่ได้ [ ] test data ถูกลบหรือ mark ไว้ [ ] RLS ยังเปิดอยู่ คัดลอก ช่วยสรุป production test result นี้ แยกเป็น Pass / Needs Fix / Blocker Test result: [วาง checklist พร้อม note] ถ้ามี blocker ให้บอกว่าควร rollback, fix แล้ว redeploy, หรือปิด feature ชั่วคราว คัดลอก
Step 7 — Preview Deployment คืออะไร หลัง deploy ครั้งแรกแล้ว อย่าแก้ production ตรง ๆ ถ้าเลี่ยงได้
Vercel จะสร้าง Preview Deployment เมื่อคุณ push ไป branch ที่ไม่ใช่ production branch หรือทำ PR
Preview = URL ทดสอบของ change ใหม่ Production = URL จริงของ user คัดลอก สร้าง branch → แก้ feature/bug → push branch → Vercel สร้าง preview URL → test preview → merge เข้า main → Vercel deploy production คัดลอก สำหรับ non-coder ให้จำประโยคนี้:
ของใหม่ควรผ่าน preview ก่อน production คัดลอก ช่วยทำ preview test plan สำหรับ change นี้ Context: [อธิบาย change] ให้แยกเป็น: 1. smoke test 5 นาที 2. manual test สำคัญ 3. mobile check 4. data/security check 5. สิ่งที่ไม่ต้อง test รอบนี้ คัดลอก
Step 8 — ถ้า deploy fail ให้ดู log แบบไหน อาการ อาจเกิดจาก build command fail command ผิด, dependency ไม่ครบ, TypeScript/lint error module not found import ผิด, package ยังไม่ได้ติดตั้ง env var missing ลืมใส่ env ใน Vercel works local but not Vercel local/production env ต่างกัน page loads but form fail API/database/RLS/env/runtime issue
เวลา copy log ให้ Claude:
copy ตั้งแต่ command ที่ fail copy error แรกที่ชัด copy file path/line number ถ้ามี copy ว่าเกิดบน Preview หรือ Production คัดลอก อย่า copy แค่บรรทัดสุดท้ายถ้าคุณยังไม่รู้ว่าอะไรสำคัญ
Step 9 — Redeploy เมื่อไหร่
แก้ code แล้ว push ใหม่
เพิ่ม/แก้ environment variable แล้วอยากให้ deployment ใหม่ใช้ค่าใหม่
แก้ build setting
restore จาก failure แล้วอยากลองใหม่
env var ที่เปลี่ยนใน settings ไม่ได้เปลี่ยน deployment เก่าทันที ต้องมี deployment ใหม่ คัดลอก ถ้าเพิ่งแก้ env var แล้วเว็บยังใช้ค่าเก่า ให้ถาม Claude:
ฉันเพิ่งแก้ env var ใน Vercel แต่ production ยังพัง ช่วยเช็กว่าต้อง redeploy ใหม่ไหม และควร test อะไรหลัง redeploy คัดลอก
Step 10 — Rollback เมื่อ production พัง Rollback คือการย้อน production กลับไป deployment ก่อนหน้า
production พังหลัง deploy ใหม่
user จริงใช้งานไม่ได้
bug กระทบ flow สำคัญ
ยังไม่รู้ root cause และต้องหยุดผลกระทบก่อน
Vercel มี Instant Rollback สำหรับ production deployment
แต่ rollback ไม่ใช่เวทมนตร์
rollback กลับไป deployment เก่า
config ที่ rollback ไปอาจเก่า
env var ที่เพิ่งแก้ใน settings จะไม่ทำให้ deployment เก่าถูก rebuild ใหม่
ถ้ามี database migration หรือ external API ต้องระวังผลกระทบ
plan บางแบบ rollback ได้จำกัดกว่า plan อื่น
production มีปัญหาหลัง deploy ล่าสุด ช่วยตัดสินใจว่าควร rollback ไหม ข้อมูล: - production URL: - เวลา deploy: - change ล่าสุด: - user กระทบอย่างไร: - error/log: - มี database/env/API change ไหม: กติกา: - ถ้าควร rollback ให้บอกเหตุผล - ถ้า rollback มี risk อะไรต้องเช็ก - ถ้าไม่ rollback ให้เสนอ hotfix plan ที่เปลี่ยนน้อยที่สุด คัดลอก [ ] production กลับมาเปิดได้ [ ] form/flow หลักใช้ได้ [ ] note เวลา rollback [ ] เก็บ deployment ที่พังไว้ตรวจ [ ] ทำ root cause analysis ก่อน deploy ใหม่ คัดลอก
Step 11 — Custom domain ควรทำเมื่อไหร่ อย่ารีบต่อ domain ตั้งแต่ app ยังไม่นิ่ง
production URL test ผ่านแล้ว
app ไม่มี blocker
security checklist ผ่าน
owner รู้วิธี rollback/pause
launch จริงต้องใช้ domain แบรนด์
ก่อนต่อ domain ให้เขียน note:
Domain: [domain] Vercel project: [project] Production branch: [main] Rollback plan: [ทำอย่างไร] คัดลอก ถ้าคุณยังไม่แน่ใจ ให้ใช้ Vercel URL ไปก่อนสำหรับ beta วงเล็ก
Common problems สำหรับ non-coder
Problem 1: Local ใช้ได้ แต่ Vercel build fail local ใช้ได้ แต่ Vercel build fail ช่วยเปรียบเทียบความต่างที่เป็นไปได้ระหว่าง local กับ Vercel เช่น node version, env var, build command, dependency, case-sensitive file path อย่าเพิ่งแก้ไฟล์ คัดลอก
Problem 2: Deploy ผ่าน แต่หน้า blank Vercel deploy ผ่าน แต่ production URL เป็น blank page ช่วยบอก evidence ที่ต้องเก็บก่อน debug เช่น browser console, network error, Vercel runtime log, build log อธิบายแบบ non-coder คัดลอก
production form submit ไม่เข้า Supabase แต่ local ใช้ได้ ช่วยทำ checklist แยกสาเหตุ: - Vercel env var - Supabase URL/key - RLS policy - table/column name - validation - network/API error อย่าเพิ่งแก้ code คัดลอก
Problem 4: เพิ่งแก้ env var แต่ยังพัง ฉันแก้ environment variable ใน Vercel แล้ว แต่ app ยังพังเหมือนเดิม ช่วยเช็กว่าต้อง redeploy ไหม และบอกวิธีตรวจว่า deployment ล่าสุดใช้ค่าใหม่แล้วหรือยัง โดยไม่ print ค่า secret คัดลอก
Problem 5: ไม่รู้ว่า URL ไหนคือ preview หรือ production ช่วยอธิบายความต่างระหว่าง preview URL กับ production URL ของ Vercel และช่วยทำ checklist ว่าฉันควร test อะไรบนแต่ละ URL คัดลอก
Final Vercel deploy checklist ใช้ checklist นี้ก่อนบอกว่า “deploy เสร็จแล้ว”
Git/GitHub [ ] code ล่าสุด commit แล้ว [ ] push ขึ้น GitHub แล้ว [ ] ไม่มี .env หรือ secret ถูก commit Vercel config [ ] import repo ถูกตัว [ ] framework preset ถูก [ ] root directory ถูก [ ] build command ถูก [ ] env var ตั้งครบใน Preview/Production ตามที่ต้องใช้ Build/deploy [ ] deployment ผ่าน [ ] ไม่มี build error [ ] production URL เปิดได้ [ ] preview URL ใช้ test change ใหม่ได้ App test [ ] main flow ผ่าน [ ] mobile ผ่าน [ ] form validation ผ่าน [ ] error/success state ผ่าน [ ] ถ้ามี database: production data เข้า table ถูกต้อง Security/data [ ] ไม่มี secret ในหน้าเว็บ/error/log [ ] RLS/permission ผ่าน review [ ] test data ถูกจัดการแล้ว Recovery [ ] รู้ว่า deployment ล่าสุดคืออันไหน [ ] รู้ว่าจะ rollback จากตรงไหน [ ] มี launch note หรือ deploy note คัดลอก
Deploy note template # Deploy Note ## Date/time [ date/time ] ## Project [project name] ## Environment [preview / production] ## URL [deployment URL] ## Git commit / branch [commit hash / branch] ## What changed - [change 1] - [change 2] ## Env vars changed? - [no / yes: list variable names only, no values] ## Tests performed - [ ] page loads - [ ] mobile - [ ] form submit - [ ] validation - [ ] security check ## Result [pass / needs fix / rolled back] ## Notes [anything important] คัดลอก
Prompt รวมท้าย appendix ใช้ prompt นี้เมื่อคุณพร้อม deploy
ช่วยเป็น deploy assistant สำหรับ Vercel รอบนี้ ฉันเป็น non-coder Project context: [อธิบาย project] ก่อน deploy ให้ตรวจ: 1. Git status และไฟล์ที่ต้อง commit 2. .gitignore และ secret risk 3. package.json scripts 4. build command 5. environment variables ที่ต้องตั้งใน Vercel 6. Preview vs Production config 7. manual test checklist 8. rollback plan กติกา: - อย่า push/deploy เองถ้าฉันยังไม่ approve - อย่า print ค่า secret จริง - ถ้าเจอ blocker ให้หยุด - ให้คำสั่งทีละบรรทัดพร้อมคำอธิบาย - หลัง deploy ให้ช่วยสรุป deploy note คัดลอก อัปเดตล่าสุด: 25 พ.ค. 2569
ความคิดเห็น
ยังไม่มีความคิดเห็น
เป็นคนแรกได้เลย