CSS властивості
ГлавнаяNodeЗапуск HTTP-сервера та видання файлу HTML в Node додатку

Запуск HTTP-сервера та видання файлу HTML в Node додатку

183

Запуск HTTP-сервера з Node

Код для цього прикладу ви можете знайти тут.

Node не тільки містить можливість обробляти JS-файли, як ми щойно зробили, він також може створити HTTP-сервер. Ми збираємося розглянути створення HTTP-сервера з Node-фреймворком Express для обробки HTML-файлу.

У першому додатку ми тільки виводили щось у консоль. Рухаючись уперед, ми врахуємо, чому вже навчилися для наступного кроку, в якому ми можемо організувати веб-сайт для наших користувачів. На один крок ми станемо ближче до повноцінного веб-додатку.

Давайте дотримуватися тієї ж програми, додавши фреймворк Express з видачею HTML-файлу. Нам знадобляться ті ж файли (package.json, server.js) і до них ми додамо новий файл index.html.

Express: Node-фреймворк

Однією з найбільших переваг Node є те, що він містить підтримку багатьох пакетів. Спільнота надсилає багато пакетів у npm і на момент написання в ньому зберігається 129257 пакетів, які завантажили понад 17694831 раз за останній день. Це велике досягнення!

Пакети розширюють функціональність нашої програми та знайдуться пакети для багатьох різних випадків застосування.

Ви, можливо, чули про Grunt, Gulp або навіть препроцесори CSS на кшталт Less — все це може бути пакетом .

Express — легка платформа для створення веб-застосунків за допомогою Node.js. Express допомагає організувати веб-програму на стороні сервера. Сайт ExpressJS описує його як «мінімальної та гнучкий Node-фреймворк для веб-додатків».

Express приховує багато внутрішньої роботи Node, яка дозволяє вам поринути в код програми, отримувати всякі штуки та працювати набагато швидше. Він простий для вивчення і ще дає вам трохи гнучкості з його структурою. Існує причина, чому в даний час це найпопулярніший фреймворк для Node. Ось кілька великих імен, які використовують Express:

  • MySpace
  • LinkedIn
  • Klout
  • Segment.io

Для перегляду повного списку зайдіть на ця сторінка.

Express поставляється з декількома чудовими можливостями, які додадуть легкості у вашу розробку:

  • маршрутизація;
  • обробка запитів;
  • налаштування програми;
  • сполучне програмне забезпечення.

Не хвилюйтеся, якщо ці терміни є для вас новими. Просто знайте, що Express робить розробку набагато простіше і працювати з ним на радість.

Установка Express

Пакети для конкретної програми Node визначаються в package.json. Для отримання встановлених пакетів можна використовувати один з двох методів:

  • Метод 1: Написати пакет у package.json.
  • Метод 2: У командному рядку використовувати npm install.

Ми збираємося використати другий метод. Перейдіть до командного рядка і наберіть:

<code>$ npm install express--save

Модифікатор--save повідомляє npm, що він повинен записати цей пакет у ваш файл package.json Якщо ви виконаєте цю команду і перегляньте файл package.json, то зауважте, що пакет з'явився в розділі dependencies. Ви також помітите, що створено нову папку з ім'ям node_modules. У ній Node зберігає пакети для конкретного проекту.

Змінюватися проектами між розробниками та співробітниками дуже легко. Просто надішліть іншим користувачам ваш проект і вони запустять npm install щоб встановити все з розділу dependencies.

Створення HTTP-сервера та відправлення HTML-файлу

Почнемо з легкої частини на нашому шляху — з HTML-файлу. У проекті створіть новий файл index.html і вставте всередину наступне:

<!DOCTYPE html> <html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя Node-додаток!</title> <!--CSS--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <style> body { padding-top:50px; }
</style>
</head> <body class="container"> <div class="jumbotron"> <h1>Моя програма!</h1>
</div>
</body>
</html>

Ми будемо посилатися на CSS з фреймворку Bootstrap через Bootstrap CDN, це допоможе нам швидко зробити стилізацію для цієї демонстрації.

Рухнемо вперед і створимо наш HTTP-сервер в Node за допомогою Express. Видаліть все з файлу server.js і додайте те, що нам знадобиться:

<code data-language="javascript">//беремо Express var express=require('express'); //Створюємо Express-додаток var app=express(); //створюємо маршрут для головної сторінки //http://localhost:8080/app.get('/', function(req, res) { res.sendfile('index.html'); }); //запускаємо сервер порту 8080 app.listen(8080); //надсилаємо повідомлення console.log('Сервер стартував!');

Крім цього файлу більше нічого не потрібно, щоб використовувати Express для запуску HTTP-сервера та відправки HTML-файлу! p>

require() є основним шляхом виклику пакета в Node. Після створення програми Express у app, ми можемо визначити маршрут за допомогою змінної HTTP. app.get() створює GET маршрут /.

При створенні маршрутів ми завжди матимемо доступ до req (запит) та res (відповідь). Запит містить інформацію з браузера. Відповідь — це те, що ми відправимо назад користувачеві. Ми використовуємо sendfile(), але набагато більше речей можна зробити, надсилаючи дані назад у форматі JSON за допомогою res.json() .

Сервер запускається через app.listen() і туди ж передається бажаний порт 8080.

Щоб переконатися, що все працює, перейдіть в командний рядок, щоб обробити цей файл і запустити сервер. /images/first-node-app/app2.png" alt="">

Тепер ми можемо подивитися на наш сайт у браузері за адресою http://localhost:8080.

Кожен раз, коли ми запускаємо сервер з Node, він буде розміщений за адресою http://localhost:НОМЕР_ПОРТА.

Це дуже легкий та швидкий спосіб створити HTTP-сервер та розпочати розробку. Node та Express можуть застосовуватися для створення дивовижних програм або за необхідності вони просто запускають простий сервер для роботи.

Дуже добре! Ми вже багато зробили з Node:

  • встановили Node;
  • обробили дуже простий файл;
  • використовували npm для встановлення пакета;
  • створили HTTP-сервер з Express;
  • відобразили HTML-файл.

Давайте зробимо наступний крок і створимо програму, яка насправді показує відповідні дані.

Автор та редактори

Автор: Кріс Севілеха
Останнє змінення: 10.01.2019
Редактори: Влад Мержевич