นำเว็บ Next.js, React หรือ Vue ขึ้นออนไลน์ด้วย AI: static หรือแอป Node

เว็บที่ AI สร้างให้ทุกวันนี้ส่วนใหญ่เป็น JavaScript: React, Vue, Next.js หรือ Vite ในเครื่องรัน npm run dev แล้วสวยทุกอย่าง แต่พอจะนำขึ้นเว็บจริงกลับเจอคำถาม เช่น ต้องอัปโหลดอะไร ทำไมกดรีเฟรชหน้าอื่นแล้วขึ้น 404 หรือทำไมค่าใน .env หายหลัง deploy

บทความนี้อธิบายว่าเว็บ JavaScript แต่ละแบบควรขึ้น BrewInTH แบบไหน ระหว่าง เว็บ static กับ แอป Node.js ระบบ build ให้อย่างไร มีเช็กลิสต์ก่อนส่ง และ prompt ให้ AI นำขึ้นจนใช้งานได้ในรอบเดียว

สรุปสั้นก่อนอ่าน
✅ React / Vue ที่สร้างด้วย Vite และไม่มีส่วน server = เว็บ static (build ในเครื่อง แล้วอัปโหลดไฟล์ใน dist/)
✅ Next.js ที่มี API route หรือ render ฝั่ง server = แอป Node.js (ส่งโค้ดเป็น ZIP ระบบ build และรันให้)
✅ แอป Node ต้องมี package.json + lockfile, script start และฟังพอร์ตจากตัวแปร PORT
✅ ค่าที่ต้องฝังตอน build (VITE_*, NEXT_PUBLIC_*) กับค่าลับที่อ่านตอนรัน ต้องแยกกันให้ถูก
✅ ตั้งเทคโนโลยีเป็น "ให้ระบบเลือกให้" ได้ ระบบดูจากไฟล์ที่ส่งมาครั้งแรก

เว็บ static กับแอป Node.js ต่างกันยังไง

เว็บ static คือไฟล์ HTML, CSS, JavaScript และรูป ที่ส่งถึงผู้เข้าชมตรง ๆ ไม่มีโปรแกรมรันอยู่เบื้องหลัง เร็ว ประหยัด และบนแพ็กเกจฟรีก็ ไม่พักเครื่อง เพราะไม่มีแอปให้พัก

แอป Node.js คือโปรแกรมที่รันอยู่ตลอด รับคำขอแล้วตอบ เช่น Next.js ที่ดึงข้อมูลจากฐานข้อมูลก่อนส่งหน้า หรือ API ที่บันทึกข้อมูล ระบบของ BrewInTH รับโค้ดเป็น ZIP แล้ว build และรันให้

ดูยังไงว่าเว็บเราเป็นแบบไหน

• โปรเจกต์ Vite + React/Vue ที่ทุกอย่างทำงานในเบราว์เซอร์ คุยกับ API ภายนอก หรือไม่มีข้อมูลต้องบันทึก → static
• Next.js ที่มีโฟลเดอร์ app/api/ หรือ pages/api/ ใช้ server action หรือต่อฐานข้อมูล → แอป Node.js
• Express, Fastify, NestJS หรือ backend ที่เขียนเอง → แอป Node.js
• ไม่แน่ใจ ถาม AI ที่สร้างเว็บว่า "เว็บนี้ต้องมี server รันอยู่ไหม หรือ build เป็นไฟล์ static ได้" แล้วให้ AI เลือก

ทางที่ 1: React / Vue (Vite) เป็นเว็บ static

1. ให้ AI รัน npm run build ในเครื่อง จะได้โฟลเดอร์ dist/ ที่มี index.html กับโฟลเดอร์ assets/
2. อัปโหลด ไฟล์ในโฟลเดอร์ dist/ ขึ้นโปรเจกต์ โดยให้ index.html อยู่ที่ราก ไม่ใช่อยู่ใต้ dist/
3. กดเผยแพร่ หรือให้ AI สั่งเผยแพร่

เว็บ static ต้องอัปโหลดเป็น ไฟล์ทีละไฟล์ (AI ทำให้ได้) ระบบไม่แตก ZIP ให้เว็บ static และ ไม่ build ให้ จึงต้อง build ในเครื่องก่อนเสมอ

เรื่องที่ต้องรู้: ลิงก์หน้าย่อยกับ 404

เว็บ static บน BrewInTH ส่งไฟล์ตามชื่อจริงเท่านั้น เปิด / ได้ index.html แต่ถ้าเว็บใช้ React Router หรือ Vue Router แบบที่อยู่สวย ๆ อย่าง /menu การกดลิงก์ในเว็บจะไปได้ แต่ กดรีเฟรชหรือเปิดลิงก์นั้นตรง ๆ จะได้ 404 เพราะไม่มีไฟล์ชื่อ menu

ทางแก้ที่ง่ายที่สุดมี 2 แบบ

• ใช้ hash routing: React Router ใช้ HashRouter (หรือ createHashRouter) Vue Router ใช้ createWebHashHistory() ที่อยู่จะเป็น /#/menu เปิดตรงได้ทุกหน้า
• ขึ้นเป็นแอป Node.js แทน แล้วให้ server เล็ก ๆ ส่ง index.html กลับทุกเส้นทางที่ไม่ใช่ไฟล์ (ดูทางที่ 2)

เว็บหน้าเดียว หรือหลายหน้าที่ลิงก์ไปไฟล์ .html ตรง ๆ ไม่ต้องทำอะไรเพิ่ม

ทางที่ 2: Next.js และเว็บที่มี server เป็นแอป Node.js

ระบบ build ของ BrewInTH ทำงานแบบนี้กับโปรเจกต์ที่มี package.json

1. ติดตั้ง dependency ด้วย npm ci (ถ้ามี package-lock.json) ไม่งั้นใช้ npm install
2. รัน npm run build ถ้ามี script ชื่อ build
3. ตอนรัน ใช้ npm start ถ้ามี script ชื่อ start ไม่งั้นมองหา server.js, index.js หรือ main.js

Next.js ที่สร้างด้วยคำสั่งมาตรฐานมี "build": "next build" และ "start": "next start" อยู่แล้ว ระบบตั้งตัวแปร PORT ให้แอป (ค่าเริ่มต้น 8080) และ next start อ่าน PORT เอง จึงมักไม่ต้องแก้อะไร

เช็กลิสต์ก่อนส่ง

• ZIP เดียว มี package.json + lockfile ที่ราก ไม่ห่อด้วยโฟลเดอร์ชื่อโปรเจกต์อีกชั้น
• ไม่ใส่ node_modules, .next, dist และ .env จริง ระบบติดตั้งและ build ใหม่เอง
• มี script start หรือไฟล์ server.js / index.js
• แอปฟังพอร์ตจาก PORT บน 0.0.0.0 ไม่ใช่ localhost และไม่ฝังเลข 3000 ไว้ในโค้ด
• หน้าแรกต้องตอบได้ไม่ error ระบบเช็กว่าแอปพร้อมด้วยการเปิด / ต้องได้ 200 หรือ redirect (เช่น พาไปหน้าล็อกอิน) ภายใน 5 นาที ถ้าแอปเป็น API ล้วน ให้ AI ตั้ง health path เช่น /health

ค่า .env: ฝังตอน build หรืออ่านตอนรัน

เรื่องนี้ทำให้หลายคนงงที่สุด

• ค่าลับ เช่น DATABASE_URL, API key, JWT_SECRET ใส่ในแท็บ ตั้งค่าแอป ของโปรเจกต์ (หรือให้ AI ตั้งให้) แอปอ่านค่าเหล่านี้ ตอนรัน ห้ามอยู่ใน ZIP
• ค่าที่ต้องฝังลงโค้ดฝั่งเบราว์เซอร์ เช่น VITE_API_URL หรือ NEXT_PUBLIC_SITE_NAME ถูกอ่าน ตอน build ขั้น build ไม่ได้อ่านค่าจากตั้งค่าแอป จึงต้องอยู่ในไฟล์ .env.production ที่ส่งไปกับโค้ด ใส่ได้เฉพาะค่าที่เปิดเผยได้ เพราะทุกคนที่เปิดเว็บจะเห็นอยู่แล้ว

ถ้ามีฐานข้อมูล PostgreSQL ระบบใส่ DATABASE_URL ให้แอปเอง ใช้ Prisma ได้ทันที ส่วนคำสั่งสร้างตารางอย่าง npx prisma migrate deploy ให้ AI ตั้งเป็น คำสั่งก่อนเผยแพร่ (release command) ระบบจะรันก่อนสลับไปเวอร์ชันใหม่ ถ้าล้มเหลว เว็บเวอร์ชันเดิมยังเปิดอยู่

prompt ให้ AI นำขึ้นในรอบเดียว

สร้างโปรเจกต์บน BrewInTH เลือกเทคโนโลยี ให้ระบบเลือกให้ (แนะนำ) เลือกฐานข้อมูลถ้าเว็บต้องเก็บข้อมูล แล้ววางข้อความสำเร็จรูปที่มีลิงก์ + token ให้ AI ที่ทำงานบนคอมพิวเตอร์ (Claude Code, Codex, Cursor หรือ Windsurf) ตามด้วย prompt นี้

(วางข้อความสำเร็จรูปจาก BrewInTH ตรงนี้)

นำเว็บ JavaScript ในโฟลเดอร์นี้ขึ้น BrewInTH ให้ใช้งานได้จริง
1. ดูก่อนว่าเว็บนี้ต้องมี server ไหม
   - ไม่ต้อง (Vite + React/Vue): build ในเครื่อง แล้วอัปโหลดไฟล์ใน dist/ เป็นเว็บ static
     ถ้าใช้ router แบบที่อยู่สวย ให้เปลี่ยนเป็น hash routing ก่อน
   - ต้อง (Next.js ที่มี API/SSR, Express): ส่งเป็น ZIP พร้อม lockfile ไม่มี node_modules/.next/.env
     ตรวจว่ามี script start และแอปฟัง PORT บน 0.0.0.0
2. ค่าลับตั้งในตั้งค่าแอปของโปรเจกต์ ค่าสาธารณะที่ต้องฝังตอน build ใส่ .env.production
3. ถ้าใช้ Prisma ตั้ง release command เป็น npx prisma migrate deploy
4. deploy แล้วเปิดเว็บจริงตรวจทุกหน้า รวมถึงกดรีเฟรชหน้าย่อย แล้วสรุปลิงก์ให้ฉัน

ประโยค "กดรีเฟรชหน้าย่อย" ช่วยจับปัญหา 404 ได้ก่อนลูกค้าเจอ ส่วน "ดูก่อนว่าต้องมี server ไหม" ทำให้ AI ไม่ส่งเว็บ Vite ไปรันเป็นแอปโดยไม่จำเป็น

ข้อควรรู้เพิ่มเติม

• แพ็กเกจฟรี มี RAM 256 MB ต่อแอปและพื้นที่ไฟล์ 20 MB แอป Next.js เล็ก ๆ รันได้ แต่ถ้าแอปใหญ่ขึ้นหรือช้า แพ็กเกจแบบชำระเงินมี RAM มากกว่า (ดูตัวเลขที่ หน้าแพ็กเกจ)
• แอปบนแพ็กเกจฟรีพักเครื่อง เมื่อไม่มีคนเข้าสักพัก คนแรกที่เข้าจะรอเปิดสักครู่ เว็บ static ไม่มีเรื่องนี้
• ไฟล์ที่ผู้ใช้อัปโหลด อย่าเก็บไว้ในโฟลเดอร์ของแอป เพราะจะหายเมื่อ deploy ใหม่ ให้ AI เปิดพื้นที่ถาวร /data หรือเก็บในฐานข้อมูล
• ไม่มี coding agent? หน้า อัปโหลดแล้วขึ้นเว็บ (BETA) รับ ZIP ทั้งโฟลเดอร์ได้ แต่สำหรับเว็บ JavaScript ที่ต้อง build และตั้งค่า แนะนำให้ใช้ AI ที่ทำงานบนคอมพิวเตอร์ จะปรับแก้ได้ยืดหยุ่นกว่า

ดูวิดีโอประกอบ

▶ ตัวอย่างตั้งแต่สร้างโปรเจกต์จนเปิดเว็บ (1:30 นาที)
ดูบน YouTube

คำถามที่พบบ่อย

ต้องเลือกเทคโนโลยีเองไหม

ไม่ต้อง เลือก ให้ระบบเลือกให้ (แนะนำ) ตอนสร้างโปรเจกต์ ระบบดูจากไฟล์ที่ส่งมาครั้งแรก มี package.json = Node.js มีแค่ index.html = เว็บ static แล้วล็อกเทคโนโลยีไว้ตั้งแต่เวอร์ชันแรก

กดรีเฟรชหน้าอื่นแล้วขึ้น 404 แก้ยังไง

เว็บ static ส่งไฟล์ตามชื่อจริง ให้ AI เปลี่ยนเป็น hash routing หรือขึ้นเป็นแอป Node.js ที่ส่ง index.html กลับทุกเส้นทาง

deploy ผ่านแต่ค่าจาก .env ไม่มีผล

ถ้าเป็นค่าที่อ่านตอนรัน ให้ตั้งในแท็บ ตั้งค่าแอป แล้ว deploy ใหม่ ถ้าเป็นค่า VITE_* หรือ NEXT_PUBLIC_* ต้องอยู่ใน .env.production ที่ส่งไปกับโค้ด เพราะถูกฝังตอน build

ใช้ pnpm หรือ yarn ได้ไหม

ระบบติดตั้งด้วย npm ตาม package-lock.json ถ้าโปรเจกต์ใช้ตัวอื่น ให้ AI สร้าง package-lock.json ด้วย npm install แล้วทดสอบในเครื่องก่อนส่ง โปรเจกต์ที่ใช้ Bun ระบบใช้ runtime Bun ให้เมื่อมีไฟล์ bun.lock

Nuxt หรือ SvelteKit ได้ไหม

ได้ ถ้าเป็นแบบมี server ขึ้นเป็นแอป Node.js ให้ AI ตั้ง script start ให้รันไฟล์ server ที่ได้จากการ build และฟังพอร์ตจาก PORT ถ้า export เป็นไฟล์ static ก็ขึ้นแบบเว็บ static ได้

สรุป

ก่อนนำเว็บ JavaScript ขึ้น ให้ตอบคำถามเดียวว่า "ต้องมี server ไหม" ไม่ต้อง = build ในเครื่องแล้วขึ้นเป็นเว็บ static (ระวังเรื่อง router) ต้อง = ส่ง ZIP พร้อม lockfile ให้ระบบ build และรันเป็นแอป Node.js แยกค่าลับกับค่าที่ฝังตอน build ให้ถูก แล้วให้ AI ตรวจเว็บจริงทุกหน้าก่อนส่งลิงก์

เริ่มโปรเจกต์แรกฟรี →

บทความที่เกี่ยวข้อง

• เลือกฐานข้อมูลแบบไหนดี: PostgreSQL, MySQL, MongoDB หรือ Redis
• นำเว็บ Laravel / PHP ขึ้นออนไลน์ด้วย AI ให้ผ่านในรอบเดียว