Wrikka Learn

Dark mode

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

Dev Server คืออะไร? ​

เวลาพัฒนาเว็บด้วย Vite จะมี "Dev Server" ทำหน้าที่เสมือนเว็บเซิร์ฟเวอร์เล็ก ๆ ให้เรา preview เว็บ, hot reload, ทดลอง API ฯลฯ โดยไม่ต้อง build ใหม่ทุกครั้ง

สรุป: dev server = เว็บเซิร์ฟเวอร์ชั่วคราวสำหรับนักพัฒนา

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

1. เปลี่ยนพอร์ต dev server ​

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

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

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

3. ให้เครื่องอื่นในวง LAN เข้าถึงเว็บได้ ​

ts
export default defineConfig({
  server: {
    host: true, // รับทุก IP (0.0.0.0)
  },
});

4. ตั้ง proxy ให้ request ไป backend ​

ts
export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ""),
      },
    },
  },
});

5. เปิด https ใน dev ​

ts
export default defineConfig({
  server: {
    https: true,
  },
});

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

  • port: เลขพอร์ต dev server (default 5173)
  • host: ให้ dev server รับทุก IP (เช่น ให้เครื่องอื่นในวง LAN เข้าถึงเว็บได้)
  • open: เปิด browser อัตโนมัติเมื่อรัน
  • proxy: ส่ง request ไป backend อื่น (เช่น /api ไป express)
  • https: เปิด https (ปลอดภัยขึ้น)
  • cors: เปิด CORS ใน dev server (default true)
  • headers: เพิ่ม HTTP headers ใน dev server

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

Q: ถ้าไม่ตั้ง server เลยจะเกิดอะไรขึ้น? A: Vite จะใช้ค่ามาตรฐาน (localhost:5173, เปิด CORS, ไม่เปิด browser อัตโนมัติ ฯลฯ)

Q: เปลี่ยน config server แล้วต้อง restart ไหม? A: ใช่ ต้อง stop แล้ว start ใหม่

Q: proxy ใช้ยังไง? A: ใช้เมื่อ frontend กับ backend คนละพอร์ต/โดเมน จะได้ไม่ติด CORS และเขียน path ง่ายขึ้น

ใน Vite สามารถปรับค่า Development Server ผ่านอ็อปชัน server ใน vite.config.ts หรือ vite.config.js ได้ดังนี้:

host ​

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

port ​

  • ประเภท: number
  • ค่าเริ่มต้น: 5173
  • คำอธิบาย: กำหนดพอร์ตที่ Dev Server จะรัน

strictPort ​

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

open ​

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

https ​

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

proxy ​

  • ประเภท: Record<string, string | ProxyOptions>
  • คำอธิบาย: สร้าง proxy สำหรับ API request ไปยัง backend
ts
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}

cors ​

  • ประเภท: boolean | CorsOptions
  • ค่าเริ่มต้น: true
  • คำอธิบาย: เปิดใช้งาน CORS ใน Dev Server ถ้าเป็น object สามารถปรับ header เพิ่มเติมได้

headers ​

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

hmr ​

  • ประเภท: boolean | HmrOptions
  • ค่าเริ่มต้น: true
  • คำอธิบาย: ปรับแต่ง HMR (Hot Module Replacement) เช่น overlay, clientPort, protocol

watch ​

  • ประเภท: WatchOptions
  • คำอธิบาย: ปรับการตรวจจับไฟล์เปลี่ยนแปลง (เช่น สำหรับ Monorepo หรือ custom chokidar)

fs.strict ​

  • ประเภท: boolean
  • ค่าเริ่มต้น: true
  • คำอธิบาย: ป้องกันการเข้าถึงไฟล์นอก root project

fs.allow ​

  • ประเภท: string[]
  • คำอธิบาย: ระบุ path ที่อนุญาตให้เข้าถึงไฟล์นอก root

fs.deny ​

  • ประเภท: string[]
  • คำอธิบาย: ระบุ path ที่ห้ามเข้าถึง

origin ​

  • ประเภท: string
  • คำอธิบาย: กำหนด origin header สำหรับ HMR socket

middlewareMode ​

  • ประเภท: boolean | 'html'
  • ค่าเริ่มต้น: false
  • คำอธิบาย: ใช้ Vite เป็น middleware (เช่น ใน Connect/Express)

sourcemapIgnoreList ​

  • ประเภท: string[]
  • คำอธิบาย: กำหนด regex ของไฟล์ที่ไม่ต้องการสร้าง sourcemap