Автор оригинала: Janith Kasun.
Вступление
В этой статье мы собираемся в Build простое приложение для обслуживания статических файлов, таких как HTML-файлы, файлы CSS и изображения, использующие Node.js и Экспресс Отказ
Настройка проекта и установки Express
Чтобы начать, давайте создадим новый проект Node.js, запустив init Команда в новой папке:
$ npm init
Заполните запрошенную информацию в ваши требования или просто установите значения по умолчанию, оставляя каждую строку пустым.
Теперь мы можем установить экспресс-каркас, запустив:
$ npm install --save express
Мы все набор, давайте начнем кодировать!
Служить файлы с Express
Есть два способа обслуживать статические файлы с использованием Express:
- Обслуживание одного файла, настроив путь к ресурсу
- Установка публичного каталога, в котором все файлы доступны
Мы перейдем на каждый из этих методов в следующих двух разделах.
Обслуживание одного файла
Рассмотрим сценарий, когда мы хотим создать простую целевую страницу, которая состоит из 3 HTML-документов ( Home.html , contact.html и about.html ), и мы хотим служить Эти файлы пользователю.
Предположим, что пользователь посещает корневой путь ( http://localhost: 3000 ). В этом случае мы хотим служить home.html файл. Точно так же, если пользователь посещает Контакты или /О Пути, мы хотим служить Contact.html и о.html Файлы соответственно.
Для реализации этого давайте создадим посадка .JS Файл и импортировать Express Library:
const express = require('express');
Затем мы создадим приложение Express:
const app = express();
Затем давайте определим порт, на котором будет запущен наш сервер, который мы будем использовать позже, когда мы фактически запускаем сервер:
const port = 3000;
Поскольку мы отправляем один файл, мы не будем включать ссылки на какие-либо файлы CSS или сценариев в тех файлах HTML, если они не размещаются в другом месте, например, CDN.
Мы будем обрабатывать служение этих файлов вместе в следующем разделе, поэтому на данный момент давайте придерживайтесь трех очень простых, самых популярных HTML-файлов:
home.html:
Home
Contact.Html:
Contact
about.html:
About Us
Теперь давайте вернемся и отредактируем нашу посадка .JS Файл для отправки файлов, соответствующих путям пользователей, такие как отправка home.html файл, когда пользователь посещает корневой путь.
Мы можем использовать res.sendfile () Способ подать файл в ответе:
app.get('/', (req, res) => {
res.sendFile('./landing-page/home.html', { root: __dirname });
});
По соображениям безопасности лучше всего использовать статический путь для res.sendfile () , как показано выше. Если вы когда-либо принимаете пользовательский ввод, который влияет на путь к файлу, будьте очень осторожны, чтобы пользователю мог быть в состоянии управлять пухом файла и, таким образом, позволяя им получить личные файлы.
В нашем случае мы устанавливаем корню, где относительный путь от передачи корень Параметр к способу. Обратите внимание, что мы прошли __dirname , который является глобальной переменной Node.js на путь текущего запущенного файла.
Мы можем использовать тот же метод для обслуживания наших других файлов, Contact.html и о.html , также:
app.get('/about', (req, res) => {
res.sendFile('./landing-page/about.html', { root: __dirname });
});
app.get('/contact', (req, res) => {
res.sendFile('./landing-page/contact.html', { root: __dirname });
});
Теперь, когда наше приложение готово к работе, давайте начнем сервер и прослушайте порт, который мы установили ранее:
app.listen(port, () => console.log(`listening on port ${port}!`));
И запустить наше приложение, выполнив:
$ node landing-page.js
Откройте свой браузер и посетите любой из сопоставленных путей, и вам следует встретить с файлами HTML:
Настройка публичного каталога
Второй метод обслуживания статических файлов – настроить публичный каталог. В отличие от отправки файла через ответ HTTP, где можно подавать только один файл, все файлы внутри нашей указанной папки будут доступны для пользователей.
Давайте создадим другой файл, называемый server.js и установите папку с нашими тремя HTML-документами, чтобы быть публичным каталогом:
const express = require('express');
const app = express();
const port = 3000;
// Setting up the public directory
app.use(express.static('landing-page'));
app.listen(port, () => console.log(`listening on port ${port}!`));
Создание публики каталога так же просто, как и использование app.use () и Express.Static () методы.
Давайте снова запустим наше приложение и убедитесь, что это работает:
$ node server.js
Откройте свой браузер и посетите любой из сопопутных путей, и вам следует встретить файлы HTML, как в последний раз. Имейте в виду, что на этот раз корневой путь не сопоставлен на home.html файл, а скорее http://localhost: 3000/home.html :
Кроме того, вы можете установить префикс к пути к доступу вашего публичного каталога, передавая префикс в качестве первого параметра:
app.use('/public', express.static('landing-page'));
Теперь файлы расположены на другом пути. Например, home.html сейчас находится в http://localhost: 3000/public/home.html Отказ
В отличие от первого метода, где вы попадаете /О и о.html будет подан, обратите внимание, что вы должны использовать полное имя файла, чтобы получить здесь файл – /about.html на примере.
Это позволяет размещать другие файлы, такие как CSS, файлы JavaScript, а также изображения.
Например, если есть изображение кота на вашей общедоступной папке cat.png Сервер будет служить его на http://localhost: 3000/public/cat.png В зависимости от вашей конфигурации, и вы можете легко вызвать его через HTML-страницу и отобразить ее.
Если вы планируете провести посадочную страницу, как это, скорее всего, это может быть комбинация обоих методов, которые мы обсуждали выше. Вы можете использовать ответ на отправку одного HTML-файла и публичного каталога для размещения других статических активов, таких как файлы CSS, сценарии JS и изображения.
Заключение
Исходный код этого проекта доступен на Github по-прежнему. Используйте это, чтобы сравнить свой код, если вы когда-нибудь застряли по учебнику.
Счастливое кодирование!