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

Nuxt.js คืออะไร?

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

คุณสมบัติหลักและจุดเด่นของ Nuxt.js

• การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR): เรนเดอร์หน้า Vue ล่วงหน้าบนเซิร์ฟเวอร์ เพิ่มความเร็วในการโหลดหน้าแรก มอบประสบการณ์ผู้ใช้ที่ดีขึ้น และทำให้ Search Engine รวบรวมข้อมูลได้ง่ายขึ้น เหมาะกับ SEO
• การสร้างเว็บไซต์แบบสแตติก (SSG): สร้างไฟล์ HTML สแตติกทั้งหมดช่วง build ทำงานเร็วมาก ติดตั้งง่าย ไม่มีค่าใช้จ่าย runtime เหมาะกับเว็บที่เนื้อหาไม่ได้เปลี่ยนแปลงบ่อย เช่น บล็อกหรือเว็บไซต์เอกสาร
• แยกโค้ดอัตโนมัติ (Automatic Code Splitting): แยกไฟล์ JavaScript ตาม routing โหลดเฉพาะโค้ดที่จำเป็นอย่างมีประสิทธิภาพเมื่อผู้ใช้เข้าแต่ละหน้า
• Routing ด้วยไฟล์ซิสเต็ม (File-system Routing): สร้าง .vue ไฟล์ในโฟลเดอร์ pages แล้ว Nuxt.js จะกำหนด routing ให้โดยอัตโนมัติ ลดภาระจัดการ routing เอง
• โมดูล Ecosystem ที่แข็งแกร่ง (Modular): รองรับการติดตั้งโมดูลหรือ third-party packages ได้ง่าย ทั้ง Axio, PWA, ระบบจัดการเนื้อหา ฯลฯ
• ยึดหลัก Convention over Configuration: ยึดโครงสร้างและการตั้งชื่อที่เป็นมาตรฐาน ลดจำนวนคอนฟิกที่ยุ่งยาก
• ประสบการณ์การพัฒนาเยี่ยมยอด: มีฟีเจอร์ Hot Module Reload (HMR), การแจ้งเตือน error ต่าง ๆ เพิ่มความรวดเร็วให้กับ workflow

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

การเซ็ตอัพและรันโปรเจกต์ Nuxt.js ใน ServBay

คู่มือนี้จะสาธิตวิธีใช้สภาพแวดล้อมการพัฒนาเครื่องในเครื่องของ ServBay โดยเฉพาะ Node.js package และฟีเจอร์จัดการเว็บไซต์ เพื่อสร้าง เซ็ตอัพ และรันโปรเจกต์ Nuxt.js ทั้งในโหมดพัฒนา (ใช้ reverse proxy) และโปรดักชัน (ให้บริการไฟล์สแตติก)

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

ก่อนเริ่ม ให้ตรวจสอบว่าคุณมีสิ่งเหล่านี้ครบ:

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

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

เราจะใช้ create-nuxt-app สำหรับตั้งค่าโปรเจกต์ Nuxt.js อย่างรวดเร็ว

1. เปิดเทอร์มินัลแล้ว cd ไปยังโฟลเดอร์ root ของเว็บไซต์ใน ServBay

   โฟลเดอร์ root ปกติคือ /Applications/ServBay/www เหมาะสำหรับเก็บโปรเจกต์ที่พัฒนาในเครื่อง เปิด Terminal แล้วรัน

   cd /Applications/ServBay/www

2. สร้างโปรเจกต์ Nuxt.js ใหม่

   ใช้คำสั่ง npx create-nuxt-app เพื่อสร้างโปรเจกต์ชื่อ servbay-nuxt-app (npx มากับ npm 5.2 ขึ้นไป ใช้งานแพ็กเกจชั่วคราว โดยไม่ต้องติดตั้ง global)

   npx create-nuxt-app servbay-nuxt-app

   ทำตามขั้นตอนที่แสดงในเทอร์มินัล สามารถเลือกได้ตามต้องการ ตัวอย่างเช่น

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

3. ติดตั้ง dependencies ที่จำเป็น

   CD เข้าโฟลเดอร์โปรเจกต์ จากนั้นรันคำสั่งติดตั้ง dependencies (เลือก manager ตามที่ตั้งค่าไว้)

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

   รอจนติดตั้ง dependencies เสร็จ

แก้ไขเนื้อหาที่แสดงของโปรเจกต์

เพื่อความสะดวกในการตรวจสอบผลลัพธ์ เราจะปรับไฟล์หน้าแรกให้แสดงข้อความง่าย ๆ

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

   ใช้ code editor เปิดไฟล์ 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>

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

รัน Nuxt.js ในโหมดพัฒนาผ่าน ServBay

Nuxt.js dev server จะทำงานบน port เฉพาะ เราจะใช้ฟีเจอร์เว็บไซต์ของ ServBay ตั้งค่า reverse proxy เพื่อเข้าถึงผ่านโดเมนและ SSL ที่กำหนดเอง (port 80/443)

1. รัน Nuxt.js development server

   cd เข้าไปที่โฟลเดอร์โปรเจกต์ แล้วสั่งรันด้วย port ที่ต้องการ (ตัวอย่างใช้ 8585)

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

   ปกติ dev server จะเปิดที่ http://localhost:8585 อย่าปิดหน้าต่าง Terminal นี้ ขณะที่พัฒนายังดำเนินอยู่

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

   เปิดแผงควบคุม ServBay ไปที่แท็บ “เว็บไซต์” กดปุ่ม + ซ้ายล่าง แล้วตั้งค่าตามนี้:

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

   ตั้งค่าเสร็จให้คลิก “เพิ่ม” หรือ “บันทึก” ระบบจะรีโหลด config ให้ใช้งานได้ทันที

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

3. เปิดเว็บแบบ dev mode นี้

   ไปที่เบราว์เซอร์ เปิดโดเมนที่กำหนดไว้ เช่น https://nuxt-dev.servbay.demo

   ServBay จะ forward การเข้าถึงผ่านโดเมนนี้ไปยัง Nuxt.js dev server แบบโปร่งใส พร้อมดูแล SSL certificate ให้อัตโนมัติ (ออกโดย ServBay User CA - คุณควรเพิ่มความน่าเชื่อถือของ CA นี้ใน macOS) คุณจึงทดสอบ Web App ด้วย HTTPS ได้ตั้งแต่ในเครื่อง เหมาะสำหรับกรณีต้องทดสอบ service worker หรือฟีเจอร์ที่ต้องการ context แบบปลอดภัย

Build เวอร์ชันโปรดักชันและให้บริการด้วยไฟล์สแตติก

เมื่อพัฒนาเสร็จและต้องการจำลองสภาพแวดล้อม production (หรือเตรียม deploy) ให้ build โปรเจกต์เป็นไฟล์สแตติก (สำหรับโหมด Universal + SSG: ใช้คำสั่ง nuxt generate หรือ npm run export)

1. Build แล้ว generate ไฟล์สแตติก

   เข้าโฟลเดอร์โปรเจกต์แล้วรัน

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

   ผลลัพธ์คือจะได้โฟลเดอร์ dist พร้อมไฟล์สแตติกครบ

2. สร้างเว็บไซต์ ServBay แบบ Static File Service

   เปิดแผงควบคุม ServBay ไปที่แท็บ “เว็บไซต์” กด + และตั้งค่าดังนี้

   • ชื่อ (Name): เช่น Nuxt.js Prod Site (Static)
   • โดเมน (Domain): เช่น nuxt-prod.servbay.demo
   • Website Type: เลือก Static
   • Website Root: ชี้ไปที่โฟลเดอร์ไฟล์สแตติกของ Nuxt.js ซึ่งคือ /Applications/ServBay/www/servbay-nuxt-app/dist

   บันทึกแล้ว ServBay จะรีโหลด config ให้อัตโนมัติ

3. เข้าเว็บแบบ Production Mode

   เปิดโดเมนนี้ในเบราว์เซอร์ เช่น https://nuxt-prod.servbay.demo

   เว็บเซิร์ฟเวอร์ของ ServBay (Caddy หรือ Nginx ตามการตั้งค่าของคุณ) จะให้บริการไฟล์สแตติกในโฟลเดอร์ dist อย่างรวดเร็ว โดยที่คุณได้ SSL certificate และ custom domain มาใช้ฟรีทันที

สรุป

ด้วย ServBay คุณสามารถจัดการทุกขั้นตอนของการพัฒนา Nuxt.js ในเครื่องได้อย่างง่ายดาย ทั้งสภาพแวดล้อม Node.js, dev server, reverse proxy สำหรับ custom domain + HTTPS และการ deploy static preview ด้วยโครงสร้างที่ชัดเจน ครบวงจร เหมาะมากสำหรับการทดสอบและพัฒนาโปรเจกต์ frontend หวังว่าคู่มือนี้จะช่วยให้คุณใช้งาน ServBay เพื่อการพัฒนา Nuxt.js ได้อย่างมีประสิทธิภาพมากขึ้น!