13,9 тыс подписчиков

Создание простого веб-сервера с помощью Node.js и Express

3 марта 20213 мар 2021

327

5 мин

Оглавление

Создание и инициализация проекта
Добавление Express
Создание сервера Express

Node.js с Express — это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки простого веб-сервера.

Создаваемый сервер будет обслуживать HTML-страницу, доступную другим людям. К концу статьи вы усвоите базовые знания о:

Node.js;
Express;
npm;
создании маршрутов Express;
обслуживании HTML;
настройке статических ресурсов Express.

Совет: не копируйте код урока, а напишите его сами. Это позволит вам лучше его понять и усвоить.

Создание и инициализация проекта

Первым шагом будет создать пустой каталог для проекта. Это можно сделать обычным способом либо из терминала с помощью следующих команд:

mkdir express-server
cd express-server

После создания проекта нужно его инициализировать:

npm init -y

Эта команда создает файл package.json и инициализирует его с предустановленными значениями. Если вы захотите сами заполнить его поля, удалите флаг -y и следуйте инструкциям.

Добавление Express

После инициализации проекта Node.js мы переходим к следующему шагу — добавлению Express. Установка пакетов в Node.js выполняется командой npm install packageName .

Для добавления последней стабильной версии Express выполните:

npm install express

После установки Express файл package.json будет выглядеть так:

Express перечислен среди dependencies , значит, он установился успешно. Переходим к третьему шагу — созданию сервера.

Создание сервера Express

Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:

touch index.js

Теперь откройте этот файл и пропишите в нем:

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

Что эти строки делают?

Первая импортирует Express в проект, чтобы его можно было использовать. При каждом добавлении в проект пакета необходимо импортировать его туда, где он будет использоваться.
Вторая строка вызывает функцию express , которая создает новое приложение, после чего присваивает результат константе app .

Создание маршрутов и прослушивание порта

Говоря простым языком, маршрут представляет конечную точку, к которой могут обращаться пользователи. Он ассоциируется с HTTP-глаголом (например, GET, POST и пр.) и получает путь URL. Кроме того, он получает функцию, которая вызывается при обращении к этой конечной точке.

Пропишите в файле следующий код:

app.get('/' , (req, res) => {
res.send({ message: 'Hello WWW!' });
});

Разберем его согласно приведенной ранее структуре:

Он связан с HTTP-глаголом — в данном случае GET.
Он получает URL — здесь это домашняя страница (/ ).
Он получает функцию, которая будет вызываться при обращении к конечной точке.

Следовательно, когда пользователь выполняет запрос GET к домашней странице, т.е. localhost:3333 , вызывается стрелочная функция и отображается фраза “Hello WWW!”

Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.

app.listen(3333 , () => {
console .log('Application listening on port 3333!' );
});

Чтобы иметь возможность запускать сервер, вам нужно будет вызывать метод listen . При этом вы также можете изменить номер порта (3333) на любой другой.

Доступ к приложению в браузере

Для запуска приложения выполните в терминале node index.js . Имейте в виду, что index.js — это произвольное имя, которое я выбрал для данного урока, так что можете назвать его app.js или как-угодно иначе.

Теперь, когда сервер запущен, можно обратиться к нему в браузере. Перейдите по адресу http://localhost:3333/ , перед вами должно отобразиться следующее сообщение:

Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.

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

Наше приложение пока что выглядит не очень. Почему бы не добавить ему структуру и стилизацию? Но куда все это нужно добавлять?

В этом разделе вы узнаете, как настраивать и передавать статические ресурсы, такие как HTML, JavaScript, CSS и изображения.

Импорт модуля path

Первым делом нужно импортировать в приложение модуль path . Устанавливать ничего не нужно, потому что path предустановлен в Node изначально.

Пропишите в начале файла эту строку:

const path = require ('path' );

Зачем вообще этот модуль? Он позволяет генерировать абсолютные пути, которые необходимы для передачи статических файлов. Добавьте следующую строку в приложение перед определением маршрутов:

app.use (express.static (path.join(__dirname, 'public' )));

path.join получает два аргумента:

Текущую рабочую директорию (cwd).
Вторую директорию, которую нужно объединить с cwd.

В качестве упражнения попробуйте вывести в консоль path.join(__dirname, 'public') и посмотрите, что получится.

На данный момент сервер должен выглядеть так:

Создание каталога public и добавление ресурсов

Создайте каталог и перейдите в него с помощью следующих команд:

mkdir public
cd public

Теперь создадим пустые файлы, куда затем добавим HTML, CSS и JavaScript. Выполните в терминале следующие команды:

touch app .js touch index .html touch styles .css

Мы оставим app.js максимально простым, добавив только сообщение, подтверждающее, что он работает:

alert('it works' );

То же и с styles.css . Для проверки его работоспособности мы установим цвет фона на синий:

html {
background-color : blue;
}

В завершении нужно написать HTML, чтобы отображать все это на домашней странице. Откройте index.js и добавьте следующий HTML-код:

Теперь остается всего один шаг.

Передача HTML-файла

Мы почти закончили. Осталось только обработать HTML-код. Для этого нужно перейти в файл index.js и прописать в нем следующее:

app.get('/' , (req, res) => {
res.sendFile(`${__dirname}/public/index.html `);
});

Если вы уже ранее работали с Node.js и Express, то можете спросить: “Что здесь делает метод sendFile и почему мы не используем render ?” Метод render мы использовать не можем, так как не задействуем никакой движок (например, Pug, EJS и т.д.). Следовательно, когда кто-либо обращается к домашней странице, мы отправляем назад HTML-файл.

Итоговый код сервера должен выглядеть так:

Если теперь вы перейдете по http://localhost:3333 , то увидите домашнюю страницу с синим фоном. Естественно, сначала нужно будет закрыть надоедливое всплывающее окошко.

Заключение

К завершению статьи у вас должно получиться простое веб-приложение.

В этом уроке мы узнали:

о Node.js;
об Express и о том, как использовать его для создания небольшого веб-приложения;
как создавать маршруты;
как настраивать статическое содержимое в приложении Node.js + Express;
как передавать простой HTML-файл в Express.