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

Nuxt.js คืออะไร?

Nuxt.js คือเฟรมเวิร์กโอเพนซอร์สที่สร้างขึ้นบนพื้นฐานของ Vue.js เพื่อช่วยพัฒนาเว็บแอปพลิเคชันสมัยใหม่ที่มีประสิทธิภาพสูง ช่วยอำนวยความสะดวกให้นักพัฒนาโดยลดความซับซ้อนในการตั้งค่าต่างๆ เพื่อให้โฟกัสกับฟังก์ชันหลักของธุรกิจได้มากขึ้น Nuxt.js เหมาะอย่างยิ่งสำหรับสร้างแอปที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) พร้อมทั้งรองรับการสร้างเว็บไซต์แบบสถิต (SSG) ที่ทรงพลัง จึงเป็นตัวเลือกสำหรับเว็บไซต์หรือแอปที่เน้นเนื้อหาและความได้เปรียบด้าน SEO

จุดเด่นและข้อดีของ Nuxt.js

• Server-side Rendering (SSR): เรนเดอร์หน้า Vue ที่ฝั่งเซิร์ฟเวอร์ก่อนเพื่อโหลดหน้ารวดเร็ว เสริมประสบการณ์ผู้ใช้ และให้ระบบค้นหาอินเด็กซ์เนื้อหาได้ดีขึ้น เหมาะสำหรับ SEO
• Static Site Generation (SSG): สร้างไฟล์ HTML แบบสถิตทั้งหมดขณะ build ทำงานได้เร็วมาก ติดตั้งง่าย ไม่ต้องใช้เซิร์ฟเวอร์สำหรับรัน เหมาะกับเว็บที่เนื้อหาไม่เปลี่ยนบ่อย เช่น Blog หรือเว็บเอกสาร
• Automatic Code Splitting: แบ่งไฟล์ JS ตาม routing อัตโนมัติ โหลดเฉพาะไฟล์ที่จำเป็นต่อแต่ละหน้า ช่วยเพิ่มประสิทธิภาพแอปได้อย่างชัดเจน
• File-system Routing: จัดการเส้นทาง (routes) ง่ายๆ ด้วยการสร้างไฟล์ .vue ในโฟลเดอร์ pages Nuxt จะทำ routing ให้อัตโนมัติ
• Modular: มีระบบโมดูลทรงพลัง สามารถผนวกบริการหรือฟีเจอร์เสริม (เช่น Axios, PWA, CMS integration) ได้อย่างสะดวก
• Convention over Configuration: ยึดโครงสร้างและมาตรฐานการตั้งชื่อที่ชัดเจน ลดขั้นตอนการคอนฟิกยุ่งยาก
• Dev Experience ดีเยี่ยม: รองรับ HMR (Hot Module Reload), ระบบรายงานข้อผิดพลาด ฯลฯ เพิ่มความเร็วในการพัฒนา

คุณสมบัติเหล่านี้ช่วยให้ Nuxt.js เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเว็บแอปที่ซับซ้อน มีประสิทธิภาพ และเป็นมิตรต่อ SEO ได้อย่างมีประสิทธิผล

ขั้นตอนสร้างและรันโปรเจกต์ Nuxt.js บน ServBay

คู่มือฉบับนี้จะสาธิตวิธีตั้งค่าโครงการ Nuxt.js เพื่อใช้กับสภาพแวดล้อมสำหรับนักพัฒนาแบบ local ที่ ServBay มอบให้ โดยเน้นไปที่ Node.js package และฟีเจอร์ Web Site Management ของโปรแกรม ServBay ประกอบด้วยการตั้งค่าโหมดพัฒนา (Reverse Proxy) และโหมดสำหรับใช้งานจริง (Static File Serving)

สิ่งที่ต้องเตรียมก่อนเริ่ม

โปรดตรวจสอบว่าคุณพร้อมตามนี้:

1. ติดตั้งโปรแกรม ServBay สำเร็จแล้ว
2. ติดตั้งและเปิดใช้งานแพ็กเกจ Node.js ใน ServBay ผ่านแถบ "แพ็กเกจ" ในแผงควบคุม
3. มีพื้นฐาน Node.js, npm (หรือ Yarn/pnpm) และคำสั่งในเทอร์มินัล
4. (แนะนำ) มีโปรแกรมแก้ไขโค้ด เช่น VS Code

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

เราจะใช้ scaffolding create-nuxt-app ในการเริ่มต้นโปรเจกต์ Nuxt.js อย่างรวดเร็ว

1. เปิดเทอร์มินัลและเข้าถึงโฟลเดอร์เว็บไซต์รากของ ServBay

   โฟลเดอร์เว็บไซต์รากของ ServBay เป็นตำแหน่งที่แนะนำสำหรับเก็บโปรเจกต์ local development เปิดเทอร์มินัล แล้วรันคำสั่งนี้:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. เริ่มต้นโปรเจกต์ Nuxt.js ใหม่

   ใช้คำสั่ง npx create-nuxt-app เพื่อสร้างโปรเจกต์ชื่อ servbay-nuxt-app โดย npx จะนำรันแพ็กเกจที่อยู่ใน npm ให้แบบไม่ต้องติดตั้งทั่วระบบ

   npx create-nuxt-app servbay-nuxt-app

   ทำตามขั้นตอนในเทอร์มินัลเพื่อเลือกตัวเลือกตามต้องการ ตัวอย่างการตั้งค่ามีดังนี้:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # เลือกตัวจัดการแพ็กเกจ แนะนำ Npm หรือ Yarn
   ? UI framework: None          # เลือก UI framework ตามความต้องการ
   ? Nuxt.js modules: Axios      # เลือก Nuxt.js module ที่จะใช้
   ? Linting tools: ESLint       # เลือกเครื่องมือ linting ตามต้องการ
   ? Testing framework: None     # กำหนดเครื่องมือสำหรับเทสตามชอบ
   ? Rendering mode: Universal (SSR / SSG) # เลือกรูปแบบการเรนเดอร์ Universal รองรับ SSR & SSG
   ? Deployment target: Server (Node.js hosting) # เลือกเป้าหมาย deploy เหมาะกับ local หรือ Node.js server
   ? Development tools: jsconfig.json (Recommended for VS Code) # เลือกเครื่องมือ dev เพิ่มเติม

3. ติดตั้ง dependency ให้โปรเจกต์

   จากตำแหน่งโปรเจกต์ที่สร้างใหม่ ให้ติดตั้ง dependency ด้วยคำสั่งที่เหมาะกับแพ็กเกจที่เลือกไว้

   cd servbay-nuxt-app
   npm install
   # หรือ Yarn: yarn install
   # หรือ pnpm: pnpm install

   รอจนทุก dependency ติดตั้งครบ

แก้ไขเนื้อหาโปรเจกต์เพื่อตรวจสอบผลลัพธ์

จะทดสอบผลการรันโดยปรับหน้าแรกให้แสดงข้อความง่ายๆ

1. เปิดไฟล์ pages/index.vue

   เปิดไฟล์ pages/index.vue ในโปรเจกต์ด้วยโปรแกรมแก้ไขโค้ดของคุณ

2. แก้ไขเนื้อหาไฟล์

   เปลี่ยนเนื้อหาดังนี้เพื่อให้หน้าเว็บแสดง "Hello ServBay!"

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   ในตัวอย่างนี้เราใช้ scoped กับแท็ก style เพื่อจำกัดการใช้ style เฉพาะคอมโพเนนท์นั้น และตกแต่งหน้าให้น่าดูมากขึ้น

การรันโหมดพัฒนา (Development Mode) ใน ServBay

โดยทั่วไป Nuxt.js Development Server จะฟังพอร์ต local เฉพาะชุดหนึ่ง เพื่อเข้าถึงผ่านโดเมนกำหนดเอง SSL และพอร์ต 80/443 ที่บริหารโดย ServBay จำเป็นต้องตั้งค่า Reverse Proxy ผ่านฟีเจอร์ web site ของ ServBay

1. สตาร์ท Nuxt.js Development Server

   รันคำสั่งนี้จากโฟลเดอร์โปรเจกต์ โดยตั้งพอร์ตเป็น 8585 (หรือพอร์ตที่ว่างอื่น)

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # หรือ Yarn: yarn dev --port 8585
   # หรือ pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # หรือ Yarn: yarn dev --port 8585
   # หรือ pnpm: pnpm run dev --port 8585

   Server จะทำงานที่ http://localhost:8585 ควรเปิดหน้าต่างเทอร์มินัลนี้ไว้ระหว่างใช้งาน

2. ตั้งค่าเว็บไซต์แบบ Reverse Proxy ใน ServBay

   เปิดแผงควบคุม ServBay ไปที่แท็บ 'เว็บไซต์' กดปุ่ม + ล่างซ้ายเพื่อเพิ่มเว็บไซต์ใหม่:

   • ชื่อ (Name): ใส่ชื่อให้ง่ายต่อจดจำ เช่น Nuxt.js Dev Site (Proxy)
   • โดเมน (Domain): ระบุโดเมนสำหรับทดสอบ เช่น nuxt-dev.servbay.demo โดย .servbay.demo เป็น suffix ที่แนะนำตามแบรนด์ ServBay
   • ประเภทเว็บไซต์ (Website Type): เลือก Reverse Proxy
   • IP Address: ใส่ 127.0.0.1 (loopback address)
   • Port: ใส่พอร์ตที่ใช้กับ Nuxt.js server ในที่นี้คือ 8585

   เสร็จแล้วกด "เพิ่ม" หรือ "บันทึก" ServBay จะอัปเดต config ให้อัตโนมัติ

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

3. ทดสอบเว็บไซต์โหมดพัฒนา

   เปิดเบราว์เซอร์แล้วไปที่โดเมนที่ตั้งไว้ เช่น https://nuxt-dev.servbay.demo

   ด้วย Reverse Proxy ของ ServBay คุณเข้าถึง Nuxt.js development server ผ่านโดเมนและพอร์ต HTTPS ที่บริหารโดย ServBay ได้เลย ServBay จะออกและตั้งค่าใบรับรอง SSL (ออกโดย ServBay User CA – ต้องแน่ใจว่าระบบเชื่อถือ CA นี้) ช่วยให้พัฒนาในสภาพแวดล้อมปลอดภัย รองรับการทดสอบฟีเจอร์ เช่น Service Workers หรือฟีเจอร์ที่ต้องใช้ context แบบปลอดภัยได้อย่างสมจริง

การสร้างและใช้งานเวอร์ชันโปรดักชั่น (Production Mode)

เมื่อพัฒนาเสร็จและต้องการ preview หรือ deploy โปรเจกต์ Nuxt.js เวอร์ชันจริง (หรือ static site preview) สามารถรัน build สำหรับ production ได้ สำหรับโหมด Universal สามารถสร้างเว็บไซต์แบบ static ด้วย nuxt generate (หรือ npm run export script)

1. สร้าง production build และไฟล์ static

   รันคำสั่งนี้ในโฟลเดอร์โปรเจกต์ของคุณ npm run build จะ compile code และ npm run export จะสร้าง HTML static files ที่ในโฟลเดอร์ output (dist เป็นค่าเริ่มต้น)

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # หรือ Yarn: yarn build && yarn export
   # หรือ pnpm: pnpm build && pnpm run export

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # หรือ Yarn: yarn build && yarn export
   # หรือ pnpm: pnpm build && pnpm run export

   เสร็จแล้วจะพบโฟลเดอร์ dist พร้อม static files ที่สร้างเสร็จ

2. ตั้งค่าบริการเว็บแบบ static ที่ ServBay

   กลับมาที่แผงควบคุม ServBay ไปแท็บ 'เว็บไซต์' กด + เพิ่มเว็บใหม่:

   • ชื่อ (Name): ชื่อ เช่น Nuxt.js Prod Site (Static)
   • โดเมน (Domain): ระบุโดเมนที่ใช้กับ production เช่น nuxt-prod.servbay.demo
   • Website Type: เลือก Static
   • เว็บไซต์ราก (Website Root): ใส่ path โฟลเดอร์ static ที่สร้าง:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   กด "เพิ่ม" หรือ "บันทึก" เพื่อใช้ config ได้เลย

3. ทดสอบเว็บไซต์แบบ production

   เปิดเบราว์เซอร์แล้วเข้าโดเมนที่ตั้งไว้ เช่น https://nuxt-prod.servbay.demo

   Web server ประสิทธิภาพสูงของ ServBay (Caddy หรือ Nginx ตามที่ config) จะให้บริการไฟล์ static ในโฟลเดอร์ dist แบบรวดเร็วสุดๆ พร้อมรองรับ SSL certificate และโดเมน custom อีกด้วย

สรุป

ServBay ช่วยให้คุณบริหารจัดการสภาพแวดล้อมพัฒนาและทดสอบ Nuxt.js ได้ง่าย: รัน development server ผ่าน Node.js ของ ServBay เซ็ตเดเมน custom และ HTTPS ด้วย reverse proxy ของ ServBay และเมื่อเสร็จงาน สามารถ build ไฟล์ static แล้ว preview ผ่านเว็บ server ของ ServBay ได้อย่างรวดเร็ว ฟีเจอร์เหล่านี้ช่วยเสริมกระบวนการพัฒนา front-end ให้สะดวกและทรงพลัง คู่มือนี้หวังว่าจะช่วยให้คุณนำ ServBay มาบริหารจัดการและพัฒนา Nuxt.js ได้อย่างเต็มที่!