Статические файлы и функция 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.

Статические файлы и функция static()¶

Комментарии