เริ่มต้นเรียนรู้การเขียนโปรแกรมด้วย Node.js ตอนที่ 6 การสร้าง Web Server ด้วย Express
จากบทความที่แล้ว ได้แนะนำ Express ไปแล้วเบื้องต้น และการติดตั้ง Express กับการ Run Node.js เพื่อให้ใช้งานผ่าน Web Browser ได้แล้ว บทความนี้จะพาสร้าง server สำหรับ Node.js อย่างง่ายๆกันครับ
1. เปิด VS Code ขึ้นมา จากนั้นสร้างโฟลเดอร์ที่ต้องการทำงานแล้ว Add เข้ามาใน VS Code เพื่อใช้งาน
2. ติดตั้ง Express ด้วยการเปิด Terminal ใน VS Code แล้วพิมพ์คำสั่ง
npm install express
express --view=ejs
คำสั่งด้านบนเป็นการเรียกใช้ express สั่งให้สร้าง View และเลือกใช้ ejs templeate Engine
EJS คือ
EJS คือ Template Engine ที่ฝังภาษา JavaScript ไว้ และประมวลผลออกมาเป็นภาษา HTML เพื่อนำไปแสดงผล โดยไฟล์ ejs สามารถแทนค่าตัวแปรต่างๆ ที่อยู่ในไฟล์แล้วทำการประมวลผลก่อนแสดงผลออกมาเป็นภาษา HTML ซึ่งหลักการคล้ายกับภาษา PHP จะมีการฝังสคริปต์ไว้ในจุดที่เราต้องการ โดย Template Engine ของ Express ก็มีหลักๆได้แก่ Pug, Mustache และ EJS โดยในบทความนี้จะขอเลือกใช้ EJS เพราะการใช้งานใกล้เคียงกับภาษา HTML ครับ
จากรูปด้านบน เมื่อใช้คำสั่ง express --view=ejs เรียบร้อยแล้ว ระบบจะทำการ generate ไฟล์ที่เกี่ยวข้องเข้ามา และให้เราพิมพ์คำสั่ง ได้เลยครับ
npm install
แล้วระบบจะทำการติดตั้ง Server ที่จำเป็นต้องใช้งานให้แล้วเสร็จ ทั้งนี้เราสามารถติดตั้ง Package เพิ่มเติมในภายหลังได้ โดยเราดูในไฟล์ packate.json ว่าระบบติดตั้งอะไรลงไปบ้าง และเรามาติดตั้งเพิ่มมันก็จะเพิ่มขึ้นมาในรูปด้านล่างเลยครับ
แนะนำ Nodemon
Nodemon จะเป็นสคริปต์ที่ใช้สำหรับ Restart Server เมื่อมีการแก้ไขไฟล์สคริปต์ของ Server โดย Nodemon จะมีประโยชน์อย่างมาก เมื่อเราแก้ไขไฟล์ ทำให้เราไม่ต้องมารีสตาร์ท Node ทุกครั้งเมื่อมีการแก้ไข Nodemon จะทำให้แทน ขั้นการติดตั้งใช้คำสั่งเพียงแค่นี้ใน terminal
npm install nodemon -g
โดย -g เป็นการติดตั้งแบบ global นั่นคือทำให้เครื่องคอมพิวเตอร์ของเรารู้จักกับสคริปต์ Nodemon โดยการติดตั้งครั้งเดียวก็สามารถใช้งาน Nodemon ได้ทุกโปรเจ็คครับ
จากนั้นเพิ่มคำสั่งในไฟล์ packege.json ตรง "start" : "node ./bin/www" ให้เป็น "start" : "nodemon ./bin/www"
{
"name": "nodejsblog",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "nodemon ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1"
}
}
เพิ่มคำว่า mon ลงไปต่อท้าย node เท่านั้นแหล่ะครับ
จากนั้น run คำสั่งใน Terminal
nodemon start
ตามรูป
จากนั้นเปิด Web Browser แล้วป้อน URL
http://localhost:3000
แล้วจะเห็นหน้า Welcome ขึ้นมาครับ เท่านี้ก็เสร็จสิ้นในการสร้าง Web Server ด้วย Express แล้ว
ความคิดเห็น