ให้บริการไฟล์คงที่ใน Express

เพื่อให้บริการไฟล์แบบคงที่อย่างเช่น ไฟล์รูปภาพ, ไฟล์ CSS, และไฟล์ JavaScript ใช้ฟังก์ชันของมิดเดิลแวร์ในตัว express.static ใน Express

โครงสร้างของฟังก์ชันคือ:

express.static(root, [options])

อาร์กิวเมนต์ root เป็นตัวกำหนดไดเรกเทอรีฐานราก ซึ่งให้บริการสินทรัพย์คงที่ (static assets) สำหรับข้อมูลเพิ่มเติมของอาร์กิวเมนต์ options ดูได้ที่ express.static

ตัวอย่างเช่น การใช้งานโค้ดข้างล่างนี้เพื่อให้บริการ ไฟล์รูปภาพ, ไฟล์ CSS, และไฟล์ JavaScript ในไดเรกเทอรีชื่อว่า public:

app.use(express.static('public'))

ตอนนี้คุณสามารถโหลดไฟล์ที่อยู่ในไดเรกเทอรี public ได้ดังนี้:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

เพื่อใช้สินทรัพย์คงที่หลายไดเรกเทอรี สามารถเรียกใช้มิดเดิลแวร์ฟังก์ชัน express.static ได้หลายครั้ง:

app.use(express.static('public'))
app.use(express.static('files'))

Express จะมองหาไฟล์ตามลำดับตามที่คุณตั้งค่าไดเรกเทอรี่คงที่ด้วยมิดเดิลแวร์ฟังก์ชัน express.static

เพื่อสร้างคำนำหน้าเส้นทางเสมือน (ที่ซึ่งเส้นทางไม่สามารถมายังที่อยู่ของไฟล์จริงในระบบได้) สำหรับไฟล์ที่ให้บริการโดยฟังก์ชัน express.static ระบุเส้นทาง สำหรับไดเรทเทอรีคงที่ ดังนี้:

app.use('/static', express.static('public'))

ตอนนี้คุณสามารถโหลดไฟล์ที่อยู่ในไดเรกเทอรี public จากคำนำหน้าเส้นทาง /static

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

อย่างไรก็ตาม เส้นทางที่คุณให้ไว้ในฟังก์ชัน express.static มีความสัมพันธ์กับไดเรกเทอรีจากที่ซึ่งคุณการบวนการรัน node ของคุณ ถ้าคุณรัน app จากไดเรกเทอรีอื่น มันจะปลอดภัยกว่าถ้าใช้เส้นทางจริงของไดเรกเทอรีที่คุณต้องการบริการไฟล์คงที่:

const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชัน serve-static และตัวเลือก ดูได้ที่ serve-static