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

Express.js คืออะไร?

Express.js คือเฟรมเวิร์กสำหรับการพัฒนาเว็บแอปพลิเคชันที่รวดเร็ว, เปิดกว้าง และเรียบง่ายบน Node.js มันมีฟีเจอร์ทรงพลังสำหรับสร้างเว็บแอปทั้งแบบหน้าเดียว, หลายหน้า และแบบผสม เป็นหนึ่งในเฟรมเวิร์กที่นิยมที่สุดใน Node.js ด้วยการออกแบบที่เรียบง่ายและยืดหยุ่นซึ่งนักพัฒนาชื่นชอบ

คุณสมบัติเด่นและข้อดีของ Express.js

• เรียบง่ายและยืดหยุ่น: Express.js นำเสนอ API ที่ใช้งานง่าย พร้อมกลไก middleware ที่ยืดหยุ่น ทำให้พัฒนาเว็บแอปอย่างมีประสิทธิภาพ
• Middleware: สนับสนุน middleware หลากหลายรูปแบบ เพื่อจัดการ request/response ได้ง่าย เช่นแปลงข้อมูล, จัดการ session, ให้บริการไฟล์สาธารณะ และอื่น ๆ
• Routing: ระบบ routing ที่ทรงพลัง สามารถจัดการ request ตาม HTTP method (GET, POST, PUT, DELETE ฯลฯ) และเส้นทาง URL ต่าง ๆ
• รองรับการผนวกรวมที่หลากหลาย: สามารถเชื่อมต่อกับ template engine (เช่น Pug, EJS, Handlebars), ฐานข้อมูล (MongoDB, MySQL, PostgreSQL) และโมดูล Node.js อื่น ๆ ได้อย่างไร้รอยต่อ
• ชุมชนและ ecosystem ขนาดใหญ่: มีชุมชนนักพัฒนาใหญ่และปลั๊กอิน third-party มากมาย หาทรัพยากร แก้ไขปัญหาได้ง่าย

ด้วย Express.js นักพัฒนาจะสามารถสร้างเว็บแอปและ API ที่มีประสิทธิภาพได้อย่างรวดเร็ว สำหรับ ServBay, ซึ่งเป็นโลคัล Web development environment อันทรงพลัง ก็ได้มอบ Node.js environment ที่พร้อมใช้งาน พร้อมความสามารถในการจัดการเว็บไซต์ (reverse proxy) และฐานข้อมูลอย่างครบครันสำหรับโปรเจกต์ Express.js

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

บทความนี้จะนำคุณตั้งแต่เริ่มสร้าง, ตั้งค่า, ไปยันรัน Express.js โดยใช้ Node.js environment ที่ ServBay จัดเตรียมไว้ เราจะใช้ฟีเจอร์ เว็บไซต์ ของ ServBay ในการตั้งค่า web server และเข้าถึงโปรเจกต์ผ่าน reverse proxy ซึ่งเหมาะอย่างยิ่งสำหรับบริการ Node.js, Python, Go, Java ที่ต้องรันบนพอร์ตเฉพาะ

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

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

• ติดตั้ง ServBay บน macOS เรียบร้อยแล้ว
• ติดตั้งและเปิดใช้งาน แพ็กเกจ Node.js ใน ServBay แล้ว (สามารถตั้งค่าผ่านแท็บ “แพ็กเกจ” ในแผงควบคุม ServBay)
• (เสริม) หากต้องการเชื่อมต่อฐานข้อมูล ให้ติดตั้งและเปิดใช้งานแพ็กเกจฐานข้อมูลที่ต้องการ (MariaDB, PostgreSQL, MongoDB, Redis, MySQL) ใน ServBay
• มีทักษะพื้นฐานในการใช้ Terminal หรือ command line

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

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

   ก่อนอื่น เปิด Terminal แล้วไปที่ directory หลักเว็บไซต์ของ ServBay คือ /Applications/ServBay/www จากนั้นใช้คำสั่ง npx express-generator เพื่อสร้างโครงสร้างโปรเจกต์ Express.js อย่างรวดเร็ว npx เป็นเครื่องมือที่ติดมากับ npm เวอร์ชัน 5.2 ขึ้นไป สำหรับรัน executable package ของ Node.js

   cd /Applications/ServBay/www
   npx express-generator servbay-express-app

   คำสั่งนี้จะสร้างโฟลเดอร์ใหม่ชื่อ servbay-express-app ใน /Applications/ServBay/www ซึ่งภายในจะมีโครงสร้างโปรเจกต์ Express.js ขั้นพื้นฐาน

2. ติดตั้ง dependencies ของโปรเจกต์

   เข้าไปที่โฟลเดอร์ servbay-express-app ที่สร้างขึ้น แล้วใช้คำสั่ง npm install เพื่อดาวน์โหลด dependencies ที่จำเป็นสำหรับ Express.js รวมถึง template engine และบริการไฟล์สาธารณะอื่น ๆ ที่ตั้งค่าไว้เป็นค่าเริ่มต้น

   cd servbay-express-app
   npm install

   รอจนติดตั้ง dependencies เสร็จสมบูรณ์

แก้ไขเนื้อหาที่ Express.js แสดงผล

เพื่อตรวจสอบว่าโปรเจกต์ใช้งานได้จริง เราจะปรับเปลี่ยนหน้าแรก (homepage) ของแอป

1. แก้ไขไฟล์ routes/index.js

   โปรเจกต์ Express.js จะมีไฟล์ routing สำหรับรับจัดการ request URL ที่ต่างกัน ให้เปิดไฟล์ routes/index.js ซึ่งจัดการ path / (home) ของ GET request แก้ไขโค้ดเพื่อไม่ให้ render template Pug แบบเดิม แต่เปลี่ยนเป็นแสดงข้อความธรรมดาแทน

   var express = require('express');
   var router = express.Router();
   
   /* GET home page. */
   router.get('/', function(req, res, next) {
     // เปลี่ยนเป็นส่งข้อความใน response
     res.send('Hello ServBay!');
   });
   
   module.exports = router;

   จากนั้นบันทึกไฟล์

เข้าสู่โหมดพัฒนา (Develop Mode)

ในระหว่างพัฒนา เราจะรัน development server ท้องถิ่นเพื่อทดสอบงานแบบเรียลไทม์ สามารถใช้คำสั่ง npm start เพื่อรัน HTTP server ของ Express.js

1. รัน development server

   ที่ root directory (servbay-express-app) ใช้คำสั่งด้านล่างเพื่อสตาร์ท develop server โดยตั้งค่าตัวแปร PORT สำหรับระบุพอร์ต (ที่นี่คือ 8585) และ DEBUG เพื่อแสดง log ข้อมูลระหว่างดักบั๊ก

   cd /Applications/ServBay/www/servbay-express-app
   PORT=8585 DEBUG=servbay-express-app:* npm start

   Terminal จะแสดงข้อมูลว่า server กำลังรันและรอรับ request ที่ port 8585

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

   เพราะ Express.js ฟังค์ชันบนพอร์ตที่กำหนดเอง (8585) ไม่ใช่พอร์ตเว็บมาตรฐาน (80/443) เราจะใช้ฟีเจอร์ เว็บไซต์ ใน ServBay ตั้งค่า reverse proxy เพื่อ map domain ที่เราตั้งไว้ ไปยังแอป Express.js ที่รันบน 127.0.0.1:8585 (localhost)

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

   • ชื่อ: My first Express.js dev site (เพื่อให้ง่ายต่อการจดจำ)
   • โดเมน: servbay-express-test.servbay.demo (ใช้ .servbay.demo เพื่อให้รองรับ HTTPS อัตโนมัติด้วย User CA ของ ServBay)
   • ชนิดของเว็บไซต์: เลือก Reverse Proxy
   • IP: 127.0.0.1 (หรือ localhost)
   • พอร์ต: 8585 (พอร์ตที่ Express.js ฟังค์ชัน)

   ตั้งค่าเรียบร้อยแล้วให้บันทึกและ apply การเปลี่ยนแปลง ServBay จะตั้งค่า web server และ generating SSL certificate (สำหรับโดเมน .servbay.demo) ให้อัตโนมัติ

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

3. เข้าเว็บที่โหมดพัฒนา

   เปิด browser แล้วพิมพ์โดเมนที่ตั้งไว้ เช่น https://servbay-express-test.servbay.demo Web server ของ ServBay จะรับ request แล้วส่งต่อ (reverse proxy) ไปยัง Express.js app ที่รันบนพอร์ต 8585 คุณจะเห็นข้อความหน้าเว็บว่า "Hello ServBay!"

   ทั้งนี้ ServBay รองรับ ตั้งค่าโดเมนและ SSL certificate ฟรี (รวม HTTPS อัตโนมัติสำหรับโดเมน .servbay.demo) ช่วยให้คุณใช้งาน HTTPS ในเครื่องพัฒนาได้สะดวก เหมือน production environment จริง

การ Deploy สำหรับ Production

เมื่อพัฒนาเสร็จ สามารถทดสอบและจำลอง production environment ในเครื่องได้ ก่อน deploy จริง

1. เตรียม environment สำหรับโปรดักชั่น

   โดยทั่วไป Express.js บน production จะกำหนดตัวแปร NODE_ENV เป็น production ซึ่งอาจมีผลให้ library บางตัวปิด debug mode, ปรับแต่งการทำงานให้เสถียรขึ้น ตรวจสอบให้โค้ดของคุณ handle NODE_ENV=production ได้ปกติ

2. รัน server โหมดโปรดักชั่น

   ที่ root directory (servbay-express-app) รัน server ด้วยพอร์ตที่ต่างจาก develop (เช่น 8586) และกำหนด NODE_ENV เป็น production

   cd /Applications/ServBay/www/servbay-express-app
   PORT=8586 NODE_ENV=production npm start

   Terminal จะแจ้งให้ทราบว่า server listen ที่ port 8586

3. ตั้งค่า reverse proxy สำหรับ production

   เช่นเดียวกับโหมดพัฒนา ให้เพิ่มเว็บไซต์ใหม่ใน ServBay ให้เป็น reverse proxy สำหรับ production instance

   • ชื่อ: My first Express.js production site
   • โดเมน: servbay-express-test-prod.servbay.demo (หรือโดเมนอื่นสำหรับโปรดักชั่น)
   • ชนิดของเว็บไซต์: Reverse Proxy
   • IP: 127.0.0.1
   • พอร์ต: 8586 (port สำหรับ production)

   กดบันทึกแล้ว apply เปลี่ยนแปลงตามปกติ

4. ทดสอบเว็บบราวเซอร์ที่ production

   เปิด browser และเข้า visit ที่โดเมน https://servbay-express-test-prod.servbay.demo ตามที่ตั้งไว้ คุณจะเข้าถึง instance ของ Express.js ที่รันแบบ production ซึ่งช่วยให้ทดสอบได้เหมือนจริงก่อนขึ้น production จริง

การเชื่อมต่อฐานข้อมูล

ServBay รองรับฐานข้อมูลยอดนิยมสำหรับพัฒนาในเครื่อง ได้แก่ MariaDB, PostgreSQL, MongoDB และ Redis หากเปิดใช้งานฐานข้อมูลเหล่านี้ใน ServBay, Express.js ของคุณเชื่อมต่อกับฐานข้อมูลเหล่านั้นได้ง่าย โดยปกติ ServBay จะตั้งค่าผู้ใช้และรหัสผ่านเริ่มต้น (เช่น MariaDB/MySQL – user: root, password: password; PostgreSQL – user: user, password: password, database: servbay_default) หรือดูข้อมูลที่หน้า database interface ของ ServBay

ต่อไปนี้คือตัวอย่างการเชื่อมต่อฐานข้อมูลหลักต่าง ๆ (กรุณาติดตั้งไลบรารี Node.js ที่เกี่ยวข้องผ่าน npm install <package-name> ก่อนใช้งาน)

1. เชื่อมต่อกับ MongoDB

   ติดตั้งไลบรารี mongoose (ORM ที่นิยมมาก):

   npm install mongoose

   นำเข้าและเชื่อมต่อจากโค้ด (เช่น app.js หรือไฟล์ config):

   var mongoose = require('mongoose');
   
   // เชื่อมต่อ MongoDB ที่รันบนเครื่อง, ใช้ชื่อฐานข้อมูล servbay-express-app
   // MongoDB ของ ServBay เชื่อมต่อได้เลยไม่ต้องใช้ authentication
   mongoose.connect('mongodb://localhost/servbay-express-app', {
     useNewUrlParser: true,
     useUnifiedTopology: true
   })
   .then(() => console.log('Connected to MongoDB'))
   .catch(err => console.error('MongoDB connection error:', err));

   อย่าลืมสตาร์ท MongoDB ผ่าน ServBay ด้วย

2. เชื่อมต่อกับ Redis

   ติดตั้งไลบรารี redis:

   npm install redis

   จากนั้นเชื่อมต่อ:

   var redis = require('redis');
   // Redis ของ ServBay รันที่ localhost:6379 และไม่มีรหัสผ่าน
   var client = redis.createClient({
       host: 'localhost',
       port: 6379
   });
   
   client.on('connect', function() {
       console.log('Connected to Redis');
   });
   
   client.on('error', function (err) {
     console.log('Redis Error: ' + err);
   });
   
   // ตัวอย่าง: set/get ค่า key
   // client.set('mykey', 'Hello from Express!', redis.print);
   // client.get('mykey', function(err, reply) {
   //     if (err) throw err;
   //     console.log(reply); // จะแสดง "Hello from Express!"
   // });
   
   // ใช้ client ทำงานกับ Redis ตามที่ต้องการ

   ตรวจสอบให้แน่ใจว่าได้สตาร์ท Redis ผ่าน ServBay แล้ว

3. เชื่อมต่อกับ MariaDB / MySQL

   ServBay รองรับทั้ง MariaDB และ MySQL วิธีเชื่อมต่อก็เหมือนกัน นิยมใช้ไลบรารี mariadb หรือ mysql2 ในตัวอย่างนี้ใช้ mariadb ซึ่งเชื่อมต่อ MySQL ได้เช่นกัน

   ติดตั้งไลบรารี:

   npm install mariadb # หรือ npm install mysql2

   จากนั้นเชื่อมต่อโดยใช้ credentials ที่ ServBay ตั้งไว้ (user: root, password: password):

   var mariadb = require('mariadb');
   // MariaDB/MySQL ของ ServBay รันที่ localhost:3306
   var pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // พอร์ตมาตรฐาน
     user: 'root', // ผู้ใช้เริ่มต้น
     password: 'password', // รหัสผ่านเริ่มต้น
     database: 'servbay_express_app', // สร้างฐานข้อมูลนี้ใน ServBay ตามต้องการ
     connectionLimit: 5 // จำกัด connection pool
   });
   
   pool.getConnection()
     .then(conn => {
       console.log("Connected to MariaDB/MySQL");
       // ใช้ conn ทำ query
       // conn.query("SELECT 1").then(...).catch(...).finally(() => conn.release());
       conn.release(); // ปล่อย connection กลับ pool เมื่อเสร็จ
     })
     .catch(err => {
       console.log("Not connected due to error: " + err);
     });

   ก่อนเชื่อมต่อควรสร้างฐานข้อมูล servbay_express_app ใน ServBay ผ่านเครื่องมือ database management (เช่น phpMyAdmin, Adminer ฯลฯ) และตรวจสอบให้ MariaDB/MySQL ทำงานแล้ว

4. เชื่อมต่อกับ PostgreSQL

   ติดตั้ง client library pg:

   npm install pg

   ใช้ credentials ของ ServBay (user: user, password: password, database: servbay_default):

   var { Pool } = require('pg');
   // PostgreSQL ของ ServBay รันบน localhost:5432
   var pool = new Pool({
     user: 'user', // ผู้ใช้เริ่มต้น
     host: 'localhost',
     database: 'servbay_default', // หรือชื่อฐานข้อมูลที่คุณสร้างเพิ่มเติม
     password: 'password', // รหัสผ่านเริ่มต้น
     port: 5432, // พอร์ตมาตรฐาน
   });
   
   pool.connect((err, client, done) => {
     if (err) {
       console.error('PostgreSQL connection error:', err);
       return;
     }
     console.log('Connected to PostgreSQL');
     // ใช้ client query ข้อมูล
     // client.query('SELECT NOW()', (err, res) => { ... done(); });
     done(); // ปล่อย client กลับ pool
   });
   
   // หรือจะใช้ async/await
   // try {
   //   const client = await pool.connect();
   //   console.log('Connected to PostgreSQL');
   //   // const res = await client.query('SELECT NOW()');
   //   // console.log(res.rows[0]);
   //   client.release(); // ปล่อย connection กลับ pool
   // } catch (err) {
   //   console.error('PostgreSQL connection error:', err);
   // }

   อย่าลืมให้ PostgreSQL รันอยู่ใน ServBay

สรุป

ทำตามขั้นตอนตามคู่มือนี้ คุณก็พร้อมสร้าง ตั้งค่า และรันโปรเจกต์ Express.js ด้วย ServBay เรียนรู้ทั้ง

• การเริ่มโปรเจกต์ด้วย express-generator
• รัน Express.js บนพอร์ตที่กำหนดเอง
• กำหนด reverse proxy ผ่านฟีเจอร์ “เว็บไซต์” ของ ServBay เพื่อให้เข้าถึงแอป Node.js ผ่าน HTTP/S ปกติ
• เชื่อมต่อฐานข้อมูลยอดนิยมต่าง ๆ บนสภาพแวดล้อมเดียวกันที่ ServBay จัดให้

ServBay ช่วยลดความยุ่งยากในการติดตั้งและบริหารจัดการ Node.js (Express.js) development environment ในเครื่องอย่างมาก ช่วยให้คุณโฟกัสกับโค้ด พร้อมฟีเจอร์เสริมเช่นออกใบรับรอง SSL อัตโนมัติ, backup เว็บไซต์, ตรวจสอบ log ฯลฯ เพื่อให้งาน dev ในเครื่องมีประสิทธิภาพและปลอดภัยสูงสุด