สร้าง Web Service ด้วย Express.js

Node & API by Keptcode.com

Last Updated: 2024-08-16 06:29

Repo: Github.com (รบกวนกด Start ให้ด้วยนะคับ)

https://github.com/coachmaxz/node-api

โครงสร้างโปรเจก (ทั้งหมด)

Path: [skeleton]\node-api

Language: Project Structure

├── src/
│  ├── app/
│  │  ├── config.js
│  │  ├── errorHandler.js
│  │  └── express.js
│  └── index.js
├── .env
└── package.json

เริ่มต้น: สร้าง Project ด้วย NPM

# เริ่มต้นสร้าง "โฟล์เดอร์" ใหม่ 
$ mkdir -p node-api

# เข้าไปยังโฟล์เดอร์ "node-api"
$ cd node-api

# เริ่มต้น "สร้างโปรเจก" ด้วย Node.js
$ npm init

## Output ##
# package name: (api) node-api
# version: (1.0.0) 0.0.1
# description: Node API
# ntry point: (index.js)
# test command:
# git repository: 
# keywords: 
# author: Max Eakkabin Jaikeawma
# license: (ISC) 

ตัวอย่าง: ไฟล์ package.json

Path: [skeleton]\node-api\package.json

Language: JSON

{
  "name": "node-api",
  "version": "0.0.1",
  "description": "Node API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Max Eakkabin Jaikeawma",
  "license": "ISC"
}

ไฟล์: package.json

[skeleton]/package.json

ติดตั้ง: Express.js สำหรับ Web Service ที่จำเป็น

Path: [skeleton]\node-api

Language: Bash

# ติดตั้ง Web Service ด้วย Express.js
$ npm install express --save

# ติดตั้ง "ส่วนเสริม" ให้กับ Express.js
$ npm install express-useragent express-validator --save

# ติดตั้ง Package ที่เกี่ยวข้องกับ RESTful Api 
$ npm install body-parser cors --save

# จัดการ Logs กับ RESTful Api 
$ npm install morgan --save

# จัดการ Env กับ RESTful Api 
$ npm install custom-env --save

ติดตั้ง: Package จัดการ Auto Reload (แก้ไขโค้ดปุ๊บ อัพเดทปั๊บ)

Path: [skeleton]\node-api

Language: Bash

# ติดตั้ง Nodemon จัดการ Auto Reload ทันที
$ npm install nodemon @babel/core @babel/node --save-dev

ตัวอย่าง: ไฟล์ package.json ทั้งหมด

Path: [skeleton]\node-api\package.json

Language: JSON

{
  "name": "node-api",
  "version": "0.0.1",
  "description": "Node API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Max Eakkabin Jaikeawma",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "custom-env": "^2.0.6",
    "express": "^4.19.2",
    "express-useragent": "^1.0.15",
    "express-validator": "^7.2.0",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/node": "^7.25.0",
    "nodemon": "^3.1.4"
  }
}

ไฟล์: package.json

[skeleton]/package.json

เพิ่ม: คำสั่ง Script สำหรับ Web Service แบบง่าย ๆ

Path: [skeleton]\node-api\package.json

Language: JSON

{
  "scripts": {
    "start:dev": "NODE_ENV=development && nodemon --exec babel-node src/index.js",
    "start:prod": "NODE_ENV=production && nodemon --exec babel-node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

สร้างไฟล์: เก็บข้อมูล Environment ต่าง ๆ

Path: [skeleton]\node-api\.env

Language: Environment

### System Config ###
NODE_ENV=development
API_URL=http://127.0.0.1:3000
PORT=3000

### API ###
API_VERSION=1

ไฟล์: .env

[skeleton]/.env

สร้างไฟล์: Config ดึงข้อมูล Environment ต่าง ๆ

Path: [skeleton]\node-api\src\app\config.js

Language: Javascript

require('custom-env').env(true);

module.exports = {

  apiUrl: process.env.API_URL,
  port: process.env.PORT,

  env_mode: process.env.NODE_ENV,
  isProduction: process.env.NODE_ENV === 'production',
  apiVersion: process.env.API_VERSION,

}

ไฟล์: config.js

[skeleton]/src/app/config.js

สร้างไฟล์: Config ให้กับ Express.js

Path: [skeleton]\node-api\src\app\express.js

Language: Javascript

const express = require('express')
const bodyParser = require('body-parser')
const useragent = require('express-useragent')

const cors = require('cors')
const morgan = require('morgan')

module.exports = async (app) => {

  // Enable All CORS Requests
  app.use(cors())

  // Parser Body
  app.use(express.json())
  app.use(express.urlencoded({ extended: false }))
  app.use(bodyParser.text())
  app.use(bodyParser.raw())
  app.use(useragent.express())

  // Logger
  app.use(morgan('dev'))

}

ไฟล์: express.js

[skeleton]/src/app/express.js

สร้างไฟล์: จัดการ Error handler ให้กับ Express.js

Path: [skeleton]\node-api\src\app\errorHandler.js

Language: Javascript

module.exports = (isProduction = false, app) => {

  // catch 404 and forward to error handler
  app.use((req, res, next) => {
    let err = new Error('Endpoint Not Found')
    err.status = 404
    next(err)
  })
  
  // Default
  app.use((err, req, res, next) => {
    if (!isProduction) { console.log(err) }
    let statusCode = err.status || 500
    res.status(statusCode)
    res.json({ error: { status: statusCode, message: err.message } })
  })
  
}

ไฟล์: errorHandler.js

[skeleton]/src/app/errorHandler.js

สร้างไฟล์ index.js สำหรับ Web Service อย่างง่าย ๆ

Path: [skeleton]\node-api\src\index.js

Language: Bash

// Express
const express = require('express')

// Setting
const app = express()
const config = require('./app/config')

// Express Configs
require('./app/express')(app)

// Error handler
require('./app/errorHandler')(config.isProduction, app)

// Start Server
const server = app.listen(config.port, () => { 
  const host = server.address().address;
  const port = server.address().port;
  console.log(`Server is running at ${host}:${port}`);
});

ไฟล์: index.js

[skeleton]/src/index.js

รัน Web Service ด้วย Express.js

Path: [skeleton]\node-api

Language: Project Structure

# รันโหมด Dev บน Local
$ npm run start:dev

## Output ##
# > node-api@0.0.1 start:dev
# > NODE_ENV=development && nodemon --exec babel-node src/index.js

# [nodemon] 3.1.4
# [nodemon] to restart at any time, enter `rs`
# [nodemon] watching path(s): *.*
# [nodemon] watching extensions: js,mjs,json
# [nodemon] starting `babel-node src/index.js`
# No env file present for the current environment:
#   Falling back to .env config
# Server is running at :::3000

ตัวอย่าง: รัน Web Service ด้วย Express.js สำเร็จ

http://127.0.0.1:3000