Перейти к содержанию

Статические файлы

Для того чтобы Node.js сервер мог передавать по запросу находящиеся у него статические файлы (изображения, аудио, HTML, CSS, JS), используется функция фреймворка Express static().

Добавьте перед определением всех маршрутов следующий код.

app.use(express.static(`${__dirname}/assets`))

Функция должна вызываться как Middleware с использованием метода use(). В качестве параметра Express static() принимает имя директории, в которой находятся все статические файлы, но при запросе самих файлов указывать в URL директорию не нужно. Поиск будет осуществляться относительно указанной директории.

Например, запрашивается следующий файл CSS.

http://127.0.0.1/img/logo.svg

Когда сервер Node.js получает запрос, он определяет, что это статический файл, а функция Express static() уже сама знает, что его необходимо искать в директории assets.

В приведенном выше коде использования Express static(), задается абсолютное расположение директории assets с помощью переменной __dirname, поскольку без нее путь будет формироваться относительно того места, из которого был запущен процесс Node.js.

Express static() может использоваться неограниченное количество раз. Например, если у вас имеется две директории со статическими файлами и обращение к ним должно происходить в зависимости от запрашиваемого URL, то используется следующая запись.

app.use('/photos', express.static(`${__dirname}/assets/img`))
app.use('/styles', express.static(`${__dirname}/assets/css`))

Здесь первым параметром методу use() передается начало URL, по которому будут запрашиваться файлы, а вторым параметром - место, где нужно будет его искать.

Пример запросов.

http://127.0.0.1/photos/admin.png
http://127.0.0.1/styles/app.css

Чтобы в ответ были возвращены запрашиваемые файлы admin.png и app.css, они должны находиться по пути /assets/images/admin.png и /assets/styles/app.css соответственно.

Пример Node.js сервера с использованием Express static() для отдачи статических файлов.

app.js

const express = require('express')
const app = express()

const host = '127.0.0.1'
const port = 7000

app.use('/uploads', express.static(`${__dirname}/assets/images`))
app.use('/styles', express.static(`${__dirname}/css`))

app.listen(port, host, function() {
  console.log(`Server listens http://${host}:${port}`)
})

Так, при запросе

http://127.0.0.1/uploads/logo.svg

должен вернуться файл, который физически находится по пути /assets/images/logo.svg.