สร้างและรันโปรเจกต์ Vue.js ด้วย ServBay

Vue.js เป็นเฟรมเวิร์ค JavaScript แบบก้าวหน้าสำหรับสร้าง UI ที่ได้รับความนิยมอย่างสูง ใช้งานง่าย ยืดหยุ่นและมีประสิทธิภาพสูง เหมาะสำหรับการสร้างแอปพลิเคชันหน้าเดียว (SPA) เป็นอย่างยิ่ง ServBay เป็นสภาพแวดล้อมการพัฒนาเว็บแบบ local ที่ทรงพลัง รองรับ Node.js โดยตรง ใช้งานได้ทั้ง macOS และ Windows จึงเหมาะสมมากสำหรับการพัฒนา Vue.js

คู่มือนี้จะอธิบายวิธีใช้งาน ServBay เพื่อสร้างโปรเจกต์ Vue.js ตั้งแต่เริ่มต้น พร้อมสอนการรันในโหมดพัฒนาและโหมด production ผ่าน ServBay

Vue.js คืออะไร?

Vue.js คือเฟรมเวิร์ค JavaScript แบบก้าวหน้าสำหรับสร้าง UI โดยเน้นการพัฒนาแบบ incremental จากล่างขึ้นบน แกนหลักของ Vue โฟกัสที่ส่วน view ใช้งานง่าย สามารถบูรณาการกับไลบรารีภายนอกหรือโปรเจกต์เดิมได้ดี Vue 3 ซึ่งเป็นเวอร์ชันล่าสุดมีฟีเจอร์และการปรับปรุงใหม่มากมาย เช่น ประสิทธิภาพดีขึ้น ขนาดเล็กลง รองรับ TypeScript ดีขึ้น

จุดเด่นและข้อดีหลักของ Vue 3

• Composition API: จัดการโค้ด logic ด้วยการผสมฟังก์ชัน ทำให้โปรเจกต์และ component ขนาดใหญ่ดูแลรักษาง่ายขึ้นและนำกลับมาใช้ซ้ำได้ดี
• Performance ดีขึ้น: Vue 3 ใช้ Proxy ในระบบ responsive และปรับปรุง อัลกอริทึม virtual DOM ทำให้เร็วกว่าเดิมมาก
• ขนาดไฟล์เล็กลง: ด้วยเทคนิค tree-shaking ขนาดไลบรารีหลักลดลง โปรเจกต์โหลดเร็วขึ้น
• รองรับ TypeScript ดีกว่าเดิม: มี type definition ที่สมบูรณ์กว่า สะดวกในการพัฒนา Vue ด้วย TypeScript
• Lifecycle ของ component ปรับปรุงใหม่: Lifecycle hooks และ Setup function ใหม่ๆ ช่วยจัดการ logic component ได้อย่างเป็นระเบียบและชัดเจนขึ้น

การใช้ Vue 3 จะช่วยให้คุณสร้างแอปเว็บที่ทันสมัยและ responsive ได้อย่างมีประสิทธิภาพ

สร้างและรันโปรเจกต์ Vue.js ด้วย ServBay

บทความนี้จะแนะนำการใช้ Node.js environment ของ ServBay เพื่อสร้างและรันโปรเจกต์ Vue.js โดยจะใช้ฟีเจอร์เว็บไซต์ของ ServBay ในการปรับแต่ง web server ด้วย reverse proxy และ static file เพื่อให้เข้าถึงโปรเจกต์ได้แบบ local

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น กรุณาตรวจสอบดังนี้:

1. ติดตั้ง ServBay: ติดตั้ง ServBay บนเครื่องสำหรับสภาพแวดล้อมการพัฒนา local เรียบร้อยแล้ว
2. ติดตั้งแพ็คเกจ Node.js: ติดตั้ง Node.js ผ่านฟีเจอร์แพ็คเกจของ ServBay อ่านรายละเอียดเพิ่มเติมได้ที่ วิธีติดตั้งและใช้งาน Node.js ด้วย ServBay

สร้างโปรเจกต์ Vue.js

1. เริ่มต้นโปรเจกต์

   เปิดโปรแกรม terminal ของคุณ ServBay แนะนำให้เก็บไฟล์โปรเจกต์เว็บไว้ในโฟลเดอร์ค่าเริ่มต้น เข้าไปที่โฟลเดอร์นั้นแล้วใช้คำสั่ง npm create vue@latest เพื่อสร้างโปรเจกต์ Vue.js ใหม่ @latest จะช่วยให้คุณได้เครื่องมือเวอร์ชันล่าสุด (create-vue หรือ Vue CLI) ซึ่งโดยปกติจะเป็น Vue 3

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   ทำตามคำแนะนำใน terminal ตั้งชื่อโปรเจกต์ เช่น servbay-vue-app จากนั้นเลือกว่าจะเปิดใช้ TypeScript, Vue Router, Pinia หรือฟีเจอร์ต่าง ๆ ตามต้องการ ตัวอย่างการตั้งค่ามีดังนี้

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # เลือก Yes หรือ No ตามความต้องการ
   ✔ Add JSX Support? … No # เลือก Yes หรือ No
   ✔ Add Vue Router for Single Page Application development? … Yes # แนะนำเลือก Yes
   ✔ Add Pinia for state management? … No # เลือก Yes หรือ No
   ✔ Add Vitest for Unit testing? … No # เลือก Yes หรือ No
   ✔ Add an End-to-End Testing Solution? … No # เลือก Yes หรือ No
   ✔ Add ESLint for code quality? … Yes # แนะนำเลือก Yes
   ✔ Add Prettier for code formatting? … Yes # แนะนำเลือก Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # เลือก Yes หรือ No ตามความต้องการ

2. ติดตั้ง dependency

   เมื่อสร้างโปรเจกต์เสร็จแล้ว เข้าไปในโฟลเดอร์โปรเจกต์ใหม่ servbay-vue-app แล้วรันคำสั่ง npm install เพื่อติดตั้ง dependency สำหรับโปรเจกต์ทั้งหมด

   cd servbay-vue-app
   npm install

ปรับแต่งตัวอย่างโปรเจกต์ (ทางเลือก)

เพื่อทดสอบว่าโปรเจกต์ทำงานได้จริง คุณสามารถแก้ไฟล์ src/App.vue และเปลี่ยนเนื้อหา default ให้แสดงข้อความ "Hello ServBay!"

เปิดไฟล์ src/App.vue แล้วเปลี่ยนเนื้อหาเป็นแบบนี้:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>นี่คือแอป Vue.js ที่รันด้วย ServBay</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ตั้งค่าการพัฒนา (Reverse Proxy)

โดยปกติเมื่อพัฒนาโปรเจกต์ Vue จะมีการรัน local dev server (เช่น ใช้ Vite หรือ Webpack dev server) ที่รองรับ hot module reload (HMR) ServBay สามารถตั้ง reverse proxy ให้ domain ในเครื่องชี้ไปที่ port ของ dev server นั้น

1. รัน dev server

   ในโฟลเดอร์รากของโปรเจกต์ รันคำสั่งนี้เพื่อเริ่ม dev server โดยกำหนด port เช่น 8585 (ตรวจสอบว่า port ยังไม่ถูกใช้งาน)

   npm run dev -- --port 8585

   terminal จะแจ้งว่า dev server ทำงานแล้วที่ http://localhost:8585

2. ตั้งค่า reverse proxy ใน ServBay

   เปิดหน้าแอป ServBay แล้วไปที่เมนูเว็บไซต์ ตั้งค่าสร้างเว็บใหม่ เลือกประเภทเป็นreverse proxy:

   • ชื่อ: My first Vue dev site (หรือชื่อที่จดจำง่าย)
   • โดเมน: servbay-vue-dev.servbay.demo (หรือชื่อที่คุณชอบลงท้ายด้วย .servbay.demo)
   • ประเภทเว็บไซต์: reverse proxy
   • IP ปลายทาง: 127.0.0.1
   • port ปลายทาง: 8585 (ต้องตรงกับ port ที่ใช้รัน dev server)

   หลังบันทึก ServBay จะอัปเดต config web server (Caddy หรือ Nginx) ให้อัตโนมัติ คำขอที่ส่งไปที่ servbay-vue-dev.servbay.demo จะถูก proxy ไปยัง http://127.0.0.1:8585

   ดูรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่าเว็บไซต์ Node.js ใน ServBay ได้ที่ เพิ่มเว็บไซต์ Node.js สำหรับพัฒนาใน ServBay

3. เข้าถึง dev site

   ตรวจสอบว่า web server ของ ServBay ทำงานอยู่ เปิด browser แล้วเข้าโดเมนที่เพิ่งตั้งค่า เช่น https://servbay-vue-dev.servbay.demo

   ServBay รองรับ SSL certificate แบบอัตโนมัติสำหรับ domain local ผ่าน ServBay User CA หรือ ServBay Public CA แปลว่าคุณสามารถเข้าผ่าน HTTPS ได้ทันทีแบบปลอดภัย ซึ่งใกล้เคียงกับการ deploy จริง อ่านข้อมูล SSL เพิ่มเติมที่ การตั้งค่า SSL certificate บนเว็บไซต์ใน ServBay

   ตอนนี้คุณควรจะเห็นแอป Vue ของคุณรันอยู่ในโหมดพัฒนา สามารถแก้ไขโค้ดแล้วดูผลแบบ hot reload ได้ทันที

Build และ deploy production (ใช้ Static Website)

เมื่อพัฒนาเสร็จและต้องการ deploy โปรเจกต์ Vue.js ในโหมด production ต้อง build เป็นไฟล์ static (HTML, CSS, JS) แล้วใช้ฟีเจอร์เว็บไซต์ static ของ ServBay เพื่อ deploy

1. Build production

   ในโฟลเดอร์รากของโปรเจกต์ รันคำสั่งนี้เพื่อ build สำหรับ production

   npm run build

   จะได้ไฟล์ static ที่ถูก optimize แล้วอยู่ในโฟลเดอร์ dist

2. ตั้งค่า static file service

   เปิด ServBay แล้วไปที่เมนูเว็บไซต์ สร้างเว็บใหม่ เลือกประเภทรวม static:

   • ชื่อ: My first Vue production site (หรือชื่อที่จำง่าย)
   • โดเมน: servbay-vue-prod.servbay.demo (หรือชื่อที่ชอบลงท้ายด้วย .servbay.demo)
   • ประเภทเว็บไซต์: static
   • root directory: ให้ชี้ไปที่โฟลเดอร์ dist ที่เพิ่ง build เสร็จ:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   เมื่อบันทึกแล้ว ServBay จะตั้งค่า web server (Caddy หรือ Nginx) ให้ชี้ไปที่ไฟล์ static ในโฟลเดอร์ dist โดยตรง

3. เข้าถึง production site

   ตรวจสอบว่า web server ของ ServBay ทำงานอยู่ เปิด browser แล้วเข้าโดเมนที่ตั้งค่าสำหรับ production เช่น https://servbay-vue-prod.servbay.demo

   ตอนนี้คุณจะเห็นแอป Vue ที่ถูก build และ optimize แล้ว โหลดเร็วสุด ๆ โดยใช้ domain local และ SSL อัตโนมัติของ ServBay คุณสามารถเทสเว็บไซต์ production ได้แบบปลอดภัยในเครื่อง

ข้อควรระวัง

• port ซ้ำ: หาก port ที่ใช้ (8585 หรือ port อื่นที่กำหนดกับ npm run dev) ถูกโปรแกรมอื่นใช้งานอยู่ คำสั่งจะ error ให้เปลี่ยนเป็น port ที่ยังว่าง และอย่าลืมอัปเดต config reverse proxy ให้ตรงกัน
• สถานะ web server ของ ServBay: ต้องแน่ใจว่า web server (Caddy หรือ Nginx ตามที่ตั้งค่า) ทำงานอยู่ด้วย ไม่เช่นนั้นจะเข้าเว็บผ่าน domain ที่สร้างไม่ได้
• การ resolve domain: ServBay จะตั้งค่า resolve domain .servbay.demo ใน local (127.0.0.1) ให้อัตโนมัติ ถ้าใช้ domain อื่น คุณต้องตั้งค่าที่ hosts file หรือใช้ฟีเจอร์ Hosts Manager ของ ServBay ให้ domain ชี้มาที่เครื่องคุณ

สรุป

ด้วย ServBay คุณสามารถสร้างสภาพแวดล้อมพัฒนา local ที่มี Node.js ทั้งบน macOS และ Windows และจัดการโปรเจกต์ Vue.js ได้ง่ายทั้งโหมดพัฒนาและ production ใช้ฟีเจอร์เว็บไซต์ ตั้งค่า reverse proxy เพื่อ dev server หรือ deploy static file ได้รวดเร็ว พร้อม domain ชื่อปรับแต่งเองและ SSL certificate อัตโนมัติที่ทั้งสะดวกและปลอดภัย ช่วยให้การตั้งค่าพัฒนาโปรเจกต์ Vue.js ในเครื่องง่ายและสะดวกยิ่งขึ้น