Ваш первый сервер на Node.js
Node Hero: Глава 4
В этой главе я расскажу вам о том, как вы можете запустить простой HTTP-сервер на Node.js и начать обрабатывать запросы.
Модуль http для вашего Node.js-сервера
Затем запускаем этот скрипт:
Что нужно здесь отметить:
Модуль http крайне низкоуровневый: создание сложного веб-приложения с использованием вышеприведенного фрагмента кода очень трудоемко. Именно по этой причине мы обычно выбираем фреймворки для работы над нашими проектами. Есть множество фреймворков, вот самые популярные:
В этой и следующих главах мы будем использовать Express, так как именно для него вы можете найти множество модулей в NPM.
Express
Добавление Express в ваш проект — это просто установка через NPM:
После того, как вы установили Express, давайте посмотрим, как создать приложение аналогичное тому, что мы написали ранее:
Одна из самых мощных концепций, которую реализует Express — это паттерн Middleware.
Middleware — промежуточный обработчик
Вы можете думать о промежуточных обработчиках как о конвейерах Unix, но для HTTP-запросов.
На диаграмме вы можете увидеть, как запрос идёт через условное Express-приложение. Он проходит через три промежуточных обработчика. Каждый обработчик может изменить этот запрос, а затем, основываясь на вашей бизнес-логике, третий middleware отправит ответ, либо запрос попадёт в обработчик соответствующего роута.
На практике вы можете сделать это следующим образом:
Что следует здесь отметить:
Обработка ошибок
Как и во всех фреймворках, правильная обработка ошибок имеет решающее значение. В Express вы должны создать специальный промежуточный обработчик — middleware с четырьмя входными параметрами:
Что следует здесь отметить:
Рендеринг HTML
Ранее мы рассмотрели, как отправлять JSON-ответы. Пришло время узнать, как отрендерить HTML простым способом. Для этого мы собираемся использовать пакет handlebars с обёрткой express-handlebars.
Сначала создадим следующую структуру каталогов:
После этого заполните index.js следующим кодом:
Последнее, что мы должны сделать, чтобы заставить всё это работать, — добавить обработчик маршрута в наше приложение Express:
Метод render принимает два параметра:
Как только вы сделаете запрос по этому адресу, вы получите что-то вроде этого:
Это всего лишь верхушка айсберга. Чтобы узнать, как добавить больше шаблонов (и даже частичных), обратитесь к официальной документации express-handlebars.
Отладка Express
Создание простого веб-сервера с помощью Node.js и Express
Node.js с Express — это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки простого веб-сервера.
Создаваемый сервер будет обслуживать HTML-страницу, доступную другим людям. К концу статьи вы усвоите базовые знания о:
Совет: не копируйте код урока, а напишите его сами. Это позволит вам лучше его понять и усвоить.
Создание и инициализация проекта
Первым шагом будет создать пустой каталог для проекта. Это можно сделать обычным способом либо из терминала с помощью следующих команд:
После создания проекта нужно его инициализировать:
Добавление Express
Для добавления последней стабильной версии Express выполните:
После установки Express файл package.json будет выглядеть так:
Создание сервера Express
Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:
Теперь откройте этот файл и пропишите в нем:
Что эти строки делают?
Создание маршрутов и прослушивание порта
Говоря простым языком, маршрут представляет конечную точку, к которой могут обращаться пользователи. Он ассоциируется с HTTP-глаголом (например, GET, POST и пр.) и получает путь URL. Кроме того, он получает функцию, которая вызывается при обращении к этой конечной точке.
Пропишите в файле следующий код:
Разберем его согласно приведенной ранее структуре:
Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.
Доступ к приложению в браузере
Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.
Статические файлы
Наше приложение пока что выглядит не очень. Почему бы не добавить ему структуру и стилизацию? Но куда все это нужно добавлять?
В этом разделе вы узнаете, как настраивать и передавать статические ресурсы, такие как HTML, JavaScript, CSS и изображения.
Импорт модуля path
Пропишите в начале файла эту строку:
Зачем вообще этот модуль? Он позволяет генерировать абсолютные пути, которые необходимы для передачи статических файлов. Добавьте следующую строку в приложение перед определением маршрутов:
path.join получает два аргумента:
В качестве упражнения попробуйте вывести в консоль path.join(__dirname, ‘public’) и посмотрите, что получится.
На данный момент сервер должен выглядеть так:
Создание каталога public и добавление ресурсов
Создайте каталог и перейдите в него с помощью следующих команд:
Теперь создадим пустые файлы, куда затем добавим HTML, CSS и JavaScript. Выполните в терминале следующие команды:
Мы оставим app.js максимально простым, добавив только сообщение, подтверждающее, что он работает:
В завершении нужно написать HTML, чтобы отображать все это на домашней странице. Откройте index.js и добавьте следующий HTML-код:
Теперь остается всего один шаг.
Передача HTML-файла
Мы почти закончили. Осталось только обработать HTML-код. Для этого нужно перейти в файл index.js и прописать в нем следующее:
Итоговый код сервера должен выглядеть так:
Заключение
К завершению статьи у вас должно получиться простое веб-приложение.
Играемся с Node.js Часть 1 «Пишем свой первый сервер»
Так что же такое node.js
Node.js это событийно-ориентированный язык программирования разработанный Райаном Далем на движке V8. Разработка node.js спонсируется компанией Joyent.
В декабре 2014 года был создан форк io.js.
В мае 2015 года было принято решение о слиянии io.js и Node.js и дальнейшем развитии под названием Node.js Foundation.
NPM — это менеджер пакетов для node.js, пакеты скачиваются из интернета и устанавливаются.
Подробнее можете почитать на
Пишем простейший сервер на node.js
И так, когда вы скачали и установили Node.js с официального сайта nodejs.org можно написать простейший сервер, который выводит hello world в браузере.
Для начала создаем директорию для нашего проекта, и переходим в нее через консоль, далее создаем файл server.js и прописываем в консоли
и отвечаем на вопросы.
В файл server.js запишем следующий код:
Но сначала надо установить модуль http для этого в консоли пишем:
Для запуска сервера нужно прописать в консоли (также можно создать bat файл с таким содержимым):
Но лучше всего использовать nodemon, он автоматически перезапустит сервер после изменения файла, как его установить, можно почитать в инете.
Теперь перейдя по адресу localhost:3000 вы увидите надпись hello world в вашем браузере. Если вы хотите чтобы на сервер можно было зайти по всей локальной сети надо узнать локальный ip компьютера. Для этого вводим в консоли ipconfig и узнаем ip (на картинке подчеркнут)
После того как узнали свой_ip вводите в браузер свой_ip:3000
Давайте немного усложним нашу задачу, нам надо узнать, заходил ли кто на сервер, метод, который использовался, и url по которому заходили.
Наш код станет примерно таким:
Теперь откройте браузер и введите адрес:3000 (порт).
Свой веб-сервер на NodeJS, и ни единого фреймворка. Часть 1
Для многих людей JavaScript ассоциативно связан с обилием разнообразных фреймворков и библиотек. Разумеется, инструменты, которые помогают нам каждый день — это хорошо, но, мне кажется, нужно искать некий баланс между использованием инструментов и прокрастинацией, а также знать, как работают вещи, которыми ты пользуешься. Поэтому, когда я только сел разбираться с NodeJS, мне было особенно интересно написать полноценный веб-сервер, которым я мог бы пользоваться сам.
Новичку в NodeJS действительно может быть нелегко. JS — один из языков, в котором часто не существует единственного правильного решения конкретной задачи, а добавленные в ноду модули для работы с файловой системой, http сервером и прочими вещами, характерными для работы на сервере, затрудняют переход даже тем, кто пишет хороший код для браузеров. Тем не менее, я надеюсь, что вы знаете основы этого языка и его работы в серверном окружении, если нет, советую посмотреть замечательный скринкаст, который поможет разобраться в основах. И последнее — я не претендую на какой-то исключительно правильный код и буду рад услышать критику — мы все учимся, и это отличный способ получать знания.
Начнём с файловой структуры
Исходная папка nodejs хранится на сервере по пути /var/www/html/. В ней и будет наш веб-сервер. Дальше всё просто: создаём в ней директорию routing, в которой будет лежать наш скрипт index.js, а также 4 папки — dynamic, static, nopage и main — для динамически генерируемых страниц, статики, страницы 404 и главной страницы. Выглядит всё это так:
Создаём наш сервер
Отлично, с файловой структурой более-менее определились. Теперь создаём в исходной папке файл server.js со следующим содержимым:
Здорово! Теперь наш сервер будет принимать запросы, записывать JSON-данные, если они есть, но пока что будет вылетать с ошибкой, потому что у нас нет функции define в /routing/index.js. Время это исправить.
Запускаем наш сервер:
Заходим туда, где он слушает запросы. Если вы не меняли код, это будет localhost:8000. Ура. Ответ есть.
Замечательно. Только это не совсем то, что нам нужно от сервера, правда?
Ловим запросы к нашим API
Да, мы получили ответ, но пока что не слишком близки к конечной цели. Самое время писать логику для нашего роутера.
Определяем, есть ли страница
Пара слов об API
Способ организации скриптов — личное дело каждого. На данный момент код в блоке try у меня такой:
По сути, все мои скрипты представляют собой функцию, которая передаёт замыканиями параметры и возвращает промис, и дальнейшая логика на промисах и завязана. В данном контексте такой подход кажется мне очень удобным, так отлов ошибок становится очень лёгким делом. Уже можно, в принципе, переписать эту логику на async / await, но особого смысла для себя я в этом не вижу.
Обрабатываем запросы браузера
Теперь мы уже можем пользоваться нашим сервером, и он будет возвращать страницы. Однако, если вы поместите в /routing/static/somepage ту же страницу, которая прекрасно работает, например, на апаче, вы столкнётесь с некоторыми проблемами.
Во-первых, для этого веб-сервера, как и для, наверное, всех в таком роде, нужно иначе задавать ссылки на css/js/img/… файлы. Если вам хочется подключить к странице 404 css-файл и сделать её красивой, то в случае с апачем мы создали бы в той же папке nopage файл style.css и подключили бы его, указав в тэге link следующее: ‘href=«style.css»’. Однако, теперь нам нужно писать путь иначе, а именно: «/routing/nopage/style.css».
Во-вторых, даже если мы подключим всё правильно, то ничего не произойдёт, и у нас всё ещё будет голая страница html. И вот тут мы подходим к самой последней части сегодняшней статьи — дополним скрипт, чтобы он ловил и обрабатывал запросы, которые браузер отправляет сам, читая разметку html. Ну и про favicon не забудем — возьмите фавиконку и положите её в /routing директорию нашего сервера.
Фух. Всё готово. Теперь можно подключить наш css-файл и увидеть нашу страницу 404 со всеми стилями:
Выводы
Ура! Мы сделали свой веб-сервер, который работает, и работает хорошо. Разумеется, это только начало работы над приложением, но самое главное уже готово — на таком веб-сервере можно поднимать любые страницы, он справляется и со статикой, и с динамическим контентом, и роутинг, на мой взгляд, выглядит удобно — достаточно просто положить соответствующий файл в static или dynamic, и он тут же подхватится, и не надо писать роутинг для каждого конкретного случая.
В общем и целом, работой сервера я очень даже доволен, и сейчас отказался от апача в сторону этого решения, и в целом это был очень интересный опыт. Большое спасибо, что ты, читатель, разделил его со мной, дойдя до этого момента.
UPD: Я не призываю кого-либо использовать этот сервер на постоянной основе. Несмотря на то, что он полностью меня устраивает, в нём нет большого количества нужных для обычного веб-сервера функций и не оптимизирован некоторый готовый функционал, вроде внятного определения mime-типов. Это всё будет в следующих статьях.
Создание простого веб-сервера с помощью Node.js и Express
Node.js с Express — это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки простого веб-сервера.
Создаваемый сервер будет обслуживать HTML-страницу, доступную другим людям. К концу статьи вы усвоите базовые знания о:
Совет: не копируйте код урока, а напишите его сами. Это позволит вам лучше его понять и усвоить.
Создание и инициализация проекта
Первым шагом будет создать пустой каталог для проекта. Это можно сделать обычным способом либо из терминала с помощью следующих команд:
После создания проекта нужно его инициализировать:
Добавление Express
Для добавления последней стабильной версии Express выполните:
После установки Express файл package.json будет выглядеть так:
Создание сервера Express
Прежде чем продолжать, нужно создать для сервера JS-файл. Выполните в терминале следующую команду:
Теперь откройте этот файл и пропишите в нем:
Что эти строки делают?
Создание маршрутов и прослушивание порта
Говоря простым языком, маршрут представляет конечную точку, к которой могут обращаться пользователи. Он ассоциируется с HTTP-глаголом (например, GET, POST и пр.) и получает путь URL. Кроме того, он получает функцию, которая вызывается при обращении к этой конечной точке.
Пропишите в файле следующий код:
Разберем его согласно приведенной ранее структуре:
Последним шагом подготовки сервера к работе будет настройка слушателя. Понадобится указать для приложения конкретный порт. Напишите нижеприведенный код в конец JS-файла.
Доступ к приложению в браузере
Вы отлично справились с настройкой веб-сервера Node.js + Express. В следующем разделе мы настроим статическое содержимое, а именно JavaScript, CSS, HTML, изображения и т.д.
Статические файлы
Наше приложение пока что выглядит не очень. Почему бы не добавить ему структуру и стилизацию? Но куда все это нужно добавлять?
В этом разделе вы узнаете, как настраивать и передавать статические ресурсы, такие как HTML, JavaScript, CSS и изображения.
Импорт модуля path
Пропишите в начале файла эту строку:
Зачем вообще этот модуль? Он позволяет генерировать абсолютные пути, которые необходимы для передачи статических файлов. Добавьте следующую строку в приложение перед определением маршрутов:
path.join получает два аргумента:
В качестве упражнения попробуйте вывести в консоль path.join(__dirname, ‘public’) и посмотрите, что получится.
На данный момент сервер должен выглядеть так:
Создание каталога public и добавление ресурсов
Создайте каталог и перейдите в него с помощью следующих команд:
Теперь создадим пустые файлы, куда затем добавим HTML, CSS и JavaScript. Выполните в терминале следующие команды:
Мы оставим app.js максимально простым, добавив только сообщение, подтверждающее, что он работает:
В завершении нужно написать HTML, чтобы отображать все это на домашней странице. Откройте index.js и добавьте следующий HTML-код:
Теперь остается всего один шаг.
Передача HTML-файла
Мы почти закончили. Осталось только обработать HTML-код. Для этого нужно перейти в файл index.js и прописать в нем следующее:
Итоговый код сервера должен выглядеть так:
Заключение
К завершению статьи у вас должно получиться простое веб-приложение.