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

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

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

Vue.js คืออะไร?

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

คุณสมบัติและข้อดีหลักของ Vue 3

• Composition API: องค์ประกอบ API แบบใหม่ที่ช่วยให้จัดโค้ดลอจิกได้ด้วย function แบ่งเบาและนำกลับมาใช้ซ้ำได้ง่ายขึ้น โดยเฉพาะกับ component ขนาดใหญ่
• ประสิทธิภาพเร็วขึ้น: Vue 3 ใช้ Proxy สำหรับระบบ reactive และเพิ่มประสิทธิภาพอัลกอริทึม virtual DOM ให้เร็วขึ้นกว่าเดิมมาก
• ไฟล์แพ็กเกจเล็กลง: ด้วยเทคนิค Tree-shaking ไลบรารีหลักของ Vue 3 มีขนาดเล็ก โหลดได้เร็ว
• รองรับ TypeScript อย่างสมบูรณ์: Vue 3 ให้ type definition ที่สมบูรณ์ ทำให้เขียนด้วย TypeScript ได้อย่างมั่นใจและมีประสิทธิภาพ
• Improved Lifecycle: Hook และฟังก์ชัน setup ใหม่ ทำให้ลอจิก component ชัดเจนและจัดการง่าย

การใช้ Vue 3 จะช่วยให้คุณสร้างเว็บแอปโมเดิร์นที่ตอบสนองเร็ว และดูแลรักษาได้ง่าย

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

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

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

ก่อนเริ่ม ขอยืนยันว่าคุณได้ดำเนินการดังนี้แล้ว:

1. ติดตั้ง ServBay: ติดตั้ง ServBay บน macOS เรียบร้อยแล้ว
2. ติดตั้งแพ็กเกจ Node.js: ติดตั้ง Node.js ผ่านตัวจัดการแพ็กเกจของ ServBay (ดูวิธีที่ การติดตั้งและใช้งาน Node.js บน ServBay)

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

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

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

   cd /Applications/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. ติดตั้ง dependencies

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

   cd servbay-vue-app
   npm install

การแก้ไขตัวอย่างโปรเจกต์ (ไม่บังคับ)

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

เปิดไฟล์ src/App.vue จากโฟลเดอร์โปรเจกต์ และแทนที่เนื้อหาด้วย:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>This is a Vue.js app running via 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 ระบบจะรันเซิร์ฟเวอร์ dev (ใช้ Vite หรือ Webpack) มีฟีเจอร์ hot module reload (HMR) สำหรับ dev ServBay สามารถตั้งค่า reverse proxy เพื่อ map โฮสต์เนมในเครื่องมายังพอร์ตของ dev server นั้น

1. รัน dev server

   ณ โฟลเดอร์โปรเจกต์หลัก ใช้คำสั่งนี้เพื่อสตาร์ท dev server พร้อมระบุพอร์ต (เช่น 8585 และแน่ใจว่าไม่มีโปรแกรมอื่นใช้พอร์ตนี้อยู่):

   npm run dev -- --port 8585

   Terminal จะแจ้งว่า dev server รันบน http://localhost:8585

2. ตั้งค่า Reverse Proxy บน ServBay

   เปิดแอป ServBay ไปที่เมนู เว็บไซต์ แล้วเพิ่ม configuration เว็บไซต์ใหม่โดยเลือกประเภทเป็น Reverse Proxy:

   • ชื่อ: My first Vue dev site (หรือตั้งชื่ออื่นตามสะดวก)
   • โดเมน: servbay-vue-dev.servbay.demo (หรือโดเมน .servbay.demo ตามต้องการ)
   • ประเภทเว็บไซต์: Reverse Proxy
   • Reverse Proxy IP: 127.0.0.1
   • Reverse Proxy Port: 8585 (ต้องตรงกับที่ระบุไว้ตอนรัน dev server)

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

   สามารถดูรายละเอียดการสร้างเว็บไซต์ Node.js เพิ่มเติมได้ที่ วิธีเพิ่ม Node.js Development Website ใน ServBay

3. เข้าถึง dev mode

   ตรวจสอบให้ web server ของ ServBay รันอยู่ แล้วเปิดเบราว์เซอร์ไปที่ https://servbay-vue-dev.servbay.demo

   ด้วยความสามารถของ ServBay ในการสร้าง SSL certificate อัตโนมัติสำหรับโดเมนในเครื่อง (ผ่าน ServBay User CA หรือ Public CA) คุณจึงเข้าถึงเว็บ dev ของคุณผ่าน HTTPS ได้ทันที คล้ายกับ production environment ดูรายละเอียด SSL เพิ่มเติมที่ การตั้งค่า SSL Certificate สำหรับเว็บไซต์บน ServBay

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

การ Build สู่ Production และ Deploy (ด้วย Static Site Service)

เมื่อเขียนโปรเจกต์ Vue เสร็จพร้อม deploy คุณต้องสร้าง build สำหรับใช้งานจริง ซึ่งมักจะเป็นไฟล์ static (HTML, CSS, JS) เพียว ๆ สามารถ deploy ด้วยฟังก์ชัน static site ของ ServBay ได้ง่าย

1. Build โปรเจกต์ไปยัง production

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

   npm run build

   จากนั้นจะได้ไฟล์ Static ที่ถูก bundle และ optimize ไว้ในโฟลเดอร์ dist/ ของโปรเจกต์

2. ตั้งค่า Static File Service

   เปิด ServBay ไปยัง เว็บไซต์ แล้วเพิ่มเว็บไซต์ใหม่ เลือกประเภทเป็น Static:

   • ชื่อ: My first Vue production site (หรือตั้งชื่ออื่นเพื่อความจำง่าย)
   • โดเมน: servbay-vue-prod.servbay.demo (หรือโดเมน .servbay.demo ตามต้องการ)
   • ประเภทเว็บไซต์: Static
   • Document root: /Applications/ServBay/www/servbay-vue-app/dist (ชี้ไปที่โฟลเดอร์ dist ของโปรเจกต์ที่ build แล้ว)

   หลังบันทึก ServBay จะตั้งค่า web server เพื่อให้บริการไฟล์ static ใน dist/ โดยตรง

3. เข้าถึง production mode

   ตรวจสอบให้ web server ของ ServBay รันอยู่ แล้วเปิดเบราว์เซอร์ไปที่ https://servbay-vue-prod.servbay.demo

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

ข้อพึงระวัง

• Port ซ้ำซ้อน: หากพอร์ต 8585 (ที่ใช้กับ npm run dev) มีโปรแกรมอื่นใช้งานอยู่ จะสตาร์ทไม่ได้ ให้เปลี่ยนพอร์ตใหม่ และอย่าลืมแก้พอร์ตใน Reverse Proxy ของ ServBay ให้ตรงด้วย
• สถานะ Web Server ของ ServBay: ต้องตรวจสอบว่า Web Server (Caddy หรือ Nginx) ของ ServBay รันอยู่เสมอ ไม่เช่นนั้นจะเข้าถึงเว็บผ่านโดเมนที่ตั้งค่าไม่ได้
• Domain Resolution: ServBay ตั้งค่า .servbay.demo ในเว็บที่เพิ่มให้อัตโนมัติ ชี้มาที่ 127.0.0.1 หากใช้โดเมนอื่น อาจต้องไปแก้ไข hosts file ของระบบเอง หรือใช้ฟีเจอร์ Hosts Manager ของ ServBay ให้ช่วยตั้งค่าการชี้โดเมนในเครื่อง

สรุป

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