Статические файлы и функция static()¶
Для того чтобы 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/img/admin.png
и /assets/css/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
.