การตั้งค่า Preview ใน Vite (สำหรับมือใหม่)

Preview คืออะไร?

หลังจาก build เว็บแล้ว เราอยาก "ลองเปิดเว็บจริง" ว่าทำงานเหมือน production หรือไม่ Vite จึงมีคำสั่ง vite preview (หรือ pnpm preview) เพื่อรันเซิร์ฟเวอร์จำลองและดูผลลัพธ์หลัง build (ต่างจาก dev server ตรงที่ใช้ไฟล์ที่ build แล้ว)

สรุป: preview = ทดสอบเว็บหลัง build ก่อนนำขึ้นจริง

---

ตัวอย่าง config preview ที่ใช้บ่อย

1. เปลี่ยนพอร์ตของ preview server

export default defineConfig({
  preview: {
    port: 5000, // รันที่พอร์ต 5000
  },
});

2. เปิดเบราว์เซอร์อัตโนมัติเมื่อ preview

export default defineConfig({
  preview: {
    open: true, // เปิด browser ให้อัตโนมัติ
  },
});

3. ใช้ HTTPS สำหรับ preview

export default defineConfig({
  preview: {
    https: true, // preview ผ่าน https
  },
});

4. รัน preview ให้เข้าถึงได้จากเครื่องอื่นในวง LAN

export default defineConfig({
  preview: {
    host: true, // ให้เครื่องอื่นในวง LAN เข้าถึงได้
  },
});

---

อธิบายตัวเลือกสำคัญ (แบบมือใหม่)

• port: เปลี่ยนเลขพอร์ต preview server (default 4173)
• host: ให้ preview server รับทุก IP (เช่น ให้เครื่องอื่นในวง LAN เข้าถึงเว็บได้)
• https: เปิดใช้งาน https (ปลอดภัยขึ้น)
• open: ให้เปิด browser อัตโนมัติเมื่อ preview
• headers: กำหนด HTTP headers เพิ่มเติม (กรณีต้องการ)

---

Q&A สำหรับมือใหม่

Q: preview ต่างจาก dev ยังไง? A: dev ใช้ไฟล์สด ๆ (hot reload) preview ใช้ไฟล์ที่ build แล้ว (เหมือน production จริง)

Q: ต้อง build ก่อนถึงจะ preview ได้ไหม? A: ใช่ ต้องสั่ง build (vite build หรือ pnpm build) ก่อน preview

Q: ถ้า preview แล้วเว็บไม่ขึ้น ต้องทำยังไง? A: เช็กว่า build สำเร็จไหม และดู error log ที่ terminal

---

ใน Vite สามารถรันเซิร์ฟเวอร์สำหรับดูไฟล์หลัง build ผ่านอ็อปชัน preview ใน vite.config.ts หรือ vite.config.js ได้ดังนี้:

host

• ประเภท: string | boolean
• ค่าเริ่มต้น: undefined (ผูกกับ localhost)
• คำอธิบาย: ระบุ hostname หรือใช้ true เพื่อรับทุก IP

port

• ประเภท: number
• ค่าเริ่มต้น: 4173
• คำอธิบาย: กำหนดพอร์ตที่ preview เซิร์ฟเวอร์จะรัน

strictPort

• ประเภท: boolean
• ค่าเริ่มต้น: false
• คำอธิบาย: เมื่อ true จะไม่หาพอร์ตสำรองเมื่อพอร์ตที่กำหนดใช้งานอยู่

https

• ประเภท: boolean | HttpsOptions
• ค่าเริ่มต้น: false
• คำอธิบาย: รัน preview ผ่าน HTTPS ถ้าเป็น object สามารถกำหนด key และ cert

open

• ประเภท: boolean | string
• ค่าเริ่มต้น: false
• คำอธิบาย: เปิดเบราเซอร์อัตโนมัติเมื่อเริ่ม preview ถ้าเป็น string จะเปิด path นั้น

cors

• ประเภท: boolean | CorsOptions
• ค่าเริ่มต้น: false
• คำอธิบาย: เปิดใช้งาน CORS สำหรับไฟล์ static ที่ preview

headers

• ประเภท: Record<string, string>
• คำอธิบาย: กำหนด HTTP headers เพิ่มเติมสำหรับ preview