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:
Для просмотра полного списка зайдите на эту страницу.
Express поставляется с несколькими замечательными возможностями, которые добавят лёгкости в вашу разработку:
маршрутизация;
обработка запросов;
настройки приложения;
связующее программное обеспечение.
Не волнуйтесь, если эти термины являются для вас новыми. Просто знайте, что Express делает разработку намного проще и работать с ним в радость.
Установка Express
Пакеты для конкретного приложения Node определяются в package.json. Для получения установленных пакетов вы можете использовать один из двух методов:
Метод 1: Написать пакет в package.json.
Метод 2: В командной строке использовать npm install.
Мы собираемся использовать второй метод. Перейдите в командную строку и наберите:
Модификатор —save сообщает npm, что он должен записать этот пакет в ваш файл package.json. Если вы выполните эту команду и посмотрите файл package.json, то заметите, что пакет появился в разделе dependencies. Вы также заметите, что была создана новая папка с именем node_modules. В ней Node хранит пакеты для конкретного проекта.
Меняться проектами между разработчиками и сотрудниками очень легко. Просто отправьте другим пользователям ваш проект и они запустят npm install чтобы установить всё из раздела dependencies.
Поскольку у нас уже есть Node и готов Express, используем их для создания HTTP-сервера и выдачи HTML-файла нашим пользователям.
Создание HTTP-сервера и отправка HTML-файла
Начнём с лёгкой части на нашем пути — с HTML-файла. В проекте создайте новый файл index.html и поместите внутрь следующее:
body Моё приложение!
Мы будем ссылаться на CSS из фреймворка Bootstrap через Bootstrap CDN, это поможет нам быстро сделать стилизацию для этой демонстрации.
Двинемся вперёд и создадим наш HTTP-сервер в Node с помощью Express. Удалите всё из файла server.js и добавьте то что нам понадобится:
// берём 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-файла!
require() является основным путём вызова пакета в Node. После создания Express-приложения в app , мы можем определить маршрут с помощью переменной HTTP. app.get() создаёт GET маршрут /.
При создании маршрутов, мы всегда будем иметь доступ к req (запрос) и res (ответ). Запрос содержит информацию из браузера. Ответ — это то, что мы отправим обратно пользователю. Мы используем sendfile() , но гораздо больше вещей можно сделать, отправляя данные обратно в формате JSON с помощью res.json() .
Сервер запускается через app.listen() и туда же передаётся желаемый порт 8080.
Чтобы убедиться что всё работает, перейдите в командную строку, чтобы обработать этот файл и запустить сервер.
Теперь мы можем посмотреть на наш сайт в браузере по адресу http://localhost:8080.
Всякий раз, когда мы запускаем сервер с Node, он будет размещён по адресу http://localhost:НОМЕР_ПОРТА.
Это очень лёгкий и быстрый способ создать HTTP-сервер и начать разработку. Node и Express могут применяться для создания удивительных приложений или при необходимости они просто запускают простой сервер для работы.
Отлично! Мы уже много сделали с Node:
установили Node;
обработали очень простой файл;
использовали npm для установки пакета;
создали HTTP-сервер с Express;
отобразили HTML-файл.
Давайте сделаем следующий шаг и создадим приложение, которое на самом деле показывает соответствующие данные.
http-server is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it’s simple and hackable enough to be used for testing, local development and learning.
Installation:
Running on-demand:
Using npx you can run the script without installing it first:
npx http-server [path] [options]
Globally via npm
npm install --global http-server
This will install http-server globally so that it may be run from the command line anywhere.
Globally via Homebrew
As a dependency in your npm package:
Usage:
[path] defaults to ./public if the folder exists, and ./ otherwise.
Now you can visit http://localhost:8080 to view your server
Note: Caching is on by default. Add -c-1 as an option to disable caching.
Available Options:
Command
Description
Defaults
-p or —port
Port to use. Use -p 0 to look for an open port, starting at 8080. It will also read from process.env.PORT .
8080
-a
Address to use
0.0.0.0
-d
Show directory listings
true
-i
Display autoIndex
true
-g or —gzip
When enabled it will serve ./public/some-file.js.gz in place of ./public/some-file.js when a gzipped version of the file exists and the request accepts gzip encoding. If brotli is also enabled, it will try to serve brotli first.
false
-b or —brotli
When enabled it will serve ./public/some-file.js.br in place of ./public/some-file.js when a brotli compressed version of the file exists and the request accepts br encoding. If gzip is also enabled, it will try to serve brotli first.
false
-e or —ext
Default file extension if none supplied
html
-s or —silent
Suppress log messages from output
—cors
Enable CORS via the Access-Control-Allow-Origin header
-o [path]
Open browser window after starting the server. Optionally provide a URL path to open. e.g.: -o /other/dir/
-c
Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds. To disable caching, use -c-1 .
3600
-U or —utc
Use UTC time format in log messages.
—log-ip
Enable logging of the client’s IP address
false
-P or —proxy
Proxies all requests which can’t be resolved locally to the given url. e.g.: -P http://someurl.com
—proxy-options
Pass proxy options using nested dotted objects. e.g.: —proxy-options.secure false
—username
Username for basic authentication
—password
Password for basic authentication
-S , —tls or —ssl
Enable secure request serving with TLS/SSL (HTTPS)
false
-C or —cert
Path to ssl cert file
cert.pem
-K or —key
Path to ssl key file
key.pem
-r or —robots
Automatically provide a /robots.txt (The content of which defaults to User-agent: *\nDisallow: / )
false
—no-dotfiles
Do not show dotfiles
—mimetypes
Path to a .types file for custom mimetype definition
-h or —help
Print this list and exit.
-v or —version
Print the version and exit.
Magic Files
index.html will be served as the default file to any directory requests.
404.html will be served if a file is not found. This can be used for Single-Page App (SPA) hosting to serve the entry page.
Catch-all redirect
To implement a catch-all redirect, use the index page itself as the proxy with:
http-server --proxy http://localhost:8080?
Note the ? at the end of the proxy URL. Thanks to @houston3 for this clever hack!
TLS/SSL
First, you need to make sure that openssl is installed correctly, and you have key.pem and cert.pem files. You can generate them using this command:
You will be prompted with a few questions after entering the command. Use 127.0.0.1 as value for Common name if you want to be able to install the certificate in your OS’s root certificate store or browser so that it is trusted.
This generates a cert-key pair and it will be valid for 3650 days (about 10 years).
Then you need to run the server with -S for enabling SSL and -C for your certificate file.
If you wish to use a passphrase with your private key you can include one in the openssl command via the -passout parameter (using password of foobar)
