Как запустить свой сервер на node.js глобально?
Здравствуйте. Недавно начал делать один-проект сайт и сервер тестировал только локально сам с собой, но там есть такие функции как взаимодействие между пользователями и это я в одиночку протестировать не могу. Попробовал найти информацию в интернете но не разобрался, везде пишут что-то вроде что нужен хостинг который вроде как запустит свой сервер, но зачем мне их сервер если я сделал свой на node.js? Ну и вот я хочу спросить как возможно запустить глобально сайт? пока это не релиз, просто хотел бы протестировать работоспособность. Или просто может есть какая-то другая возможность чтобы протестировать его с другими пользователями в интернете?
Отслеживать
задан 13 июл 2017 в 8:39
Horchynskyi Horchynskyi
1,597 1 1 золотой знак 14 14 серебряных знаков 25 25 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вы можете воспользоваться сервисом Now. Он позоволяет очень просто развернуть ваше приложение. И если вы не используете много ресурсов, то это будет бесплатно.
Ставите пакет now
npm install -g now После в корне вашего проекта запускаете
При первом запуске вас спросят про email и вам надо будет его подтвердить. Но последующие запуски это делать не нужно.
В результате вы получите сервер (глобальный) с вашим приложением видимый в сети. Имя сервера будет выбрано случайно, но вам его сообщат. Чтобы другие люди могли использовать ваш сервер вам надо передать им это имя.
Отслеживать
ответ дан 13 июл 2017 в 10:17
Mikhail Vaysman Mikhail Vaysman
14.2k 1 1 золотой знак 21 21 серебряный знак 31 31 бронзовый знак
Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
20 авг 2017 в 15:01
Для начала вы можете воспользоватся своей локальной сетью. С помощью команды ipconfig посмотрите свой ip в локальной сети. По этому ip вы можете заходить на свой сервер со всех устройств, подключенных к вашей домашней сети (телефон, ноут, другой комп, планшет итд)
Если вы всё же хотите выставить сайт в интернет, то оптимальный вариант для тестирования на мой взгляд — heroku. Это бесплатно, относительно легко деплоить, не нужно мучиться с найстрокой сервера.
Вот код на nodejs, который выведет в консоль ваш локальный ip адрес:
const ifaces = require('os').networkInterfaces(); const localhost = Object.keys(ifaces).reduce((host,ifname) => < let iface = ifaces[ifname].find(iface =>!('IPv4' !== iface.family || iface.internal !== false)); return iface? iface.address : host; >, '127.0.0.1'); console.log(localhost); Учебник Express часть 2: Создание скелета сайта
Эта вторая статья в нашем учебнике Express показывает, как создать каркас проекта веб-сайта, который позже можно будет заполнить с помощью путей сайта, шаблонов представлений и обращений к базе данных.
| Необходимые знания: | Установить среду разработки Node. Просмотреть учебник Express. |
|---|---|
| Задача: | Научиться запускать свои проекты используя Express Application Generator. |
Обзор
В этой статье показано, как создать каркас сайта с помощью средства Express Application Generator. Каркас затем можно будет заполнить с помощью путей сайта, шаблонов/представлений и обращений к базе данных. Мы используем это средство для создания основы нашего сайта Local Library. К основе будет добавлен код, необходимый сайту. Создание каркаса чрезвычайно просто — требуется только вызвать генератор в командной строке, указав имя нового проекта, дополнительно можно указать также движок шаблона сайта и генератор CSS.
Далее показано, как вызвать генератор приложений, и даётся небольшое пояснение различных вариантов представлений и CSS. Мы поясним структуру каркаса веб-сайта. В конце мы покажем, как запустить веб-сайт, чтобы убедиться, что он работает.
Примечание: Express Application Generator — не единственный генератор Express-приложений, и созданный проект —не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О минимальном Express приложении смотрите Hello world example в документации Express.
Применение генератора приложений
Вы уже должны были установить express-generator , читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:
npm install express-generator -g
express-generator имеет ряд параметров, которые можно увидеть, выполнив команду express —help (или express -h):
> express --help Usage: express [options] [dir] Options: -h, --help output usage information (информация по применению) --version output the version number (номер версии express) -e, --ejs add ejs engine support (добавить поддержку движка ejs) --pug add pug engine support (добавить поддержку движка pug) --hbs add handlebars engine support (добавить поддержку движка handlebar) -H, --hogan add hogan.js engine support (добавить поддержку движка hogan.js) -v, --view engine> add view engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) (добавить поддержку движков представлений. По умолчанию - jade) -c, --css engine> add stylesheet engine> support (less|stylus|compass|sass) (defaults to plain css) (добавить поддержку движков стилей, по умолчанию - простой CSS) --git add .gitignore (добавить поддержку .gitignore) -f, --force force on non-empty directory (работать в каталоге с файлами)
Команда express создаст проект в текущем каталоге с использованием (устаревшего) движка представления Jade и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога.
- Время до получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть все относительные сложности изучения кандидатов в шаблонизаторы.
- Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
- Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри «обычного» HTML, а другие строят HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
- Производительность и время интерпретации.
- Особенности — следует выбирать движок с учётом таких особенностей:
- Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.
- Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.
- Краткий синтаксис управления переменными и циклами.
- Возможность фильтровать значения переменных на уровне шаблона (например, делать переменные в верхнем регистре или форматировать значение даты).
- Возможность создавать выходные форматы, отличные от HTML (например, JSON или XML).
- Поддержка асинхронных операций и потоковой передачи.
- Возможность использования как на клиенте, так и на сервере. Возможность применения движка шаблона на клиенте позволяет обслуживать данные и выполнять все действия или их большую часть на стороне клиента.
Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.
: express-locallibrary-tutorial create : express-locallibrary-tutorial/package.json create : express-locallibrary-tutorial/app.js create : express-locallibrary-tutorial/public/images create : express-locallibrary-tutorial/public create : express-locallibrary-tutorial/public/stylesheets create : express-locallibrary-tutorial/public/stylesheets/style.css create : express-locallibrary-tutorial/public/javascripts create : express-locallibrary-tutorial/routes create : express-locallibrary-tutorial/routes/index.js create : express-locallibrary-tutorial/routes/users.js create : express-locallibrary-tutorial/views create : express-locallibrary-tutorial/views/index.pug create : express-locallibrary-tutorial/views/layout.pug create : express-locallibrary-tutorial/views/error.pug create : express-locallibrary-tutorial/bin create : express-locallibrary-tutorial/bin/www install dependencies: > cd express-locallibrary-tutorial && npm install run the app: > SET DEBUG=express-locallibrary-tutorial:* & npm start
После списка файлов генератор выведет инструкции для установки зависимостей (указанных в файле package.json) и запуска приложения (инструкции предназначены для Windows; для Linux/Mac OS X они могут слегка отличаться).
Запускаем каркас сайта
Сейчас у нас есть готовый каркас проекта. Сайт пока ничего не делает, но его стоит запустить, чтобы убедиться в его работоспособности.
-
Прежде всего установим зависимости (команда install запросит все пакеты зависимостей, указанные в файле package.json).
cd express-locallibrary-tutorial npm install
-
В Windows используйте команду:
DEBUG=express-locallibrary-tutorial:* & npm start
DEBUG=express-locallibrary-tutorial:* npm start
У нас получилось веб-приложение на базе Express, работающее по адресу localhost:3000.
Примечание: Можно также запустить приложение командой npm start . Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:
>SET DEBUG=express-locallibrary-tutorial:* & npm start > express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial > node ./bin/www express-locallibrary-tutorial:server Listening on port 3000 +0ms GET / 200 288.474 ms - 170 GET /stylesheets/style.css 200 5.799 ms - 111 GET /favicon.ico 404 34.134 ms - 1335
Обеспечиваем
перезапуск сервера при изменении файловЛюбые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.
Одно из самых простых средств для этого — nodemon. Его обычно устанавливают глобально (так как это «инструмент»), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):
npm install --save-dev nodemonЕсли вы предпочитаете установить nodemon глобально, не только для этого проекта, надо выполнить команду
npm install -g nodemon
В файле package.json проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :
"devDependencies": "nodemon": "^1.11.0" >
Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел scripts в файле package.json исходно будет содержать одну строку, которая начинается с «start» . Обновите его, поставив запятую в конце строки, и добавьте строку «devstart», показанную ниже:
"scripts": "start": "node ./bin/www", "devstart": "nodemon ./bin/www" >,
Теперь можно запустить сервер почти так же, как и ранее, но командой npm run devstart:
DEBUG=express-locallibrary-tutorial:* & npm run devstart
- Для macOS или Linux:
DEBUG=express-locallibrary-tutorial:* npm run devstart
Примечание: Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя rs в командной строке). Вам всё равно придётся обновить страницу в браузере .
Теперь мы должны выполнять команду » npm run » а не просто npm start , поскольку «start», это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии «start», но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.
Созданный проект
Давайте посмотрим на созданный проект.
Структура каталогов
После установки зависимостей проект имеет такую структуру файлов (файлы — это элементы без префикса»/»). Файл package.json определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задаёт точку входа приложения, у нас — файл JavaScript /bin/www. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает app.js для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога routes/. Шаблоны хранятся в каталоге /views.
/express-locallibrary-tutorial app.js /bin www package.json /node_modules [about 4,500 subdirectories and files] /public /images /javascripts /stylesheets style.css /routes index.js users.js /views error.pug index.pug layout.pug
Далее файлы описаны более подробно.
package.json
Файл package.json указывает зависимости приложения и содержит другие данные:
"name": "express-locallibrary-tutorial", "version": "0.0.0", "private": true, "scripts": "start": "node ./bin/www", "devstart": "nodemon ./bin/www" >, "dependencies": "body-parser": "~1.15.2", "cookie-parser": "~1.4.3", "debug": "~2.2.0", "express": "~4.14.0", "morgan": "~1.7.0", "pug": "~2.0.0-beta6", "serve-favicon": "~2.3.0" >, "devDependencies": "nodemon": "^1.11.0" > >
Зависимости включают пакет express и пакет для выбранного движка представления (pug). Кроме того, указаны пакеты, полезные во многих веб-приложениях:
- body-parser: — анализирует часть тела входящего запроса HTTP и облегчает извлечение из него различных частей. Например, мы можно читать POST- параметры.
- cookie-parser: разбирает заголовок и заполняет req.cookies (по сути, даёт удобный метод для доступа к информации cookie).
- debug: небольшой отладчик, работающий по образцу методики отладки ядра node.
- morgan: средство логирования запросов HTTP для node.
- serve-favicon: средство обработки favicon (значка, используемого для представления сайта на вкладках браузера, закладках и т. д).
Раздел «scripts» определяет скрипт» start», выполняемый при запуске сервера командой npm start . Можно видеть, что самом деле выполняется команда node ./bin/www. Кроме того, определяется script «devstart«, который вызывается командой npm run devstart . Запускается тот же файл ./bin/www ,но командой nodemon вместо node.
"scripts": "start": "node ./bin/www", "devstart": "nodemon ./bin/www" >,
Файл www
Файл /bin/www – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app= require(./app) .
#!/usr/bin/env node /** * Module dependencies. */ var app = require("../app");
Примечание: require() — это глобальная функция node для импорта модулей в текущий файл. Для модуля app.js указан относительный путь, а расширение файла по умолчанию (.js) опущено.
Оставшаяся часть кода настраивает порт сервера node для HTTP (определён в переменной среды или 3000, если не определён), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.
Файл app.js
Этот файл создаёт объект приложения express (с именем app , по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:
var express = require('express'); var app = express(); . module.exports = app;
Именно этот экспортированный объект использован в рассмотренном ранее файле www.
Рассмотрим детали файла app.js. Сначала при помощи require(. ) выполняется импорт некоторых полезных библиотек node: express, serve-favicon, morgan, cookie-parse, body-parser (они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).
var express = require("express"); var path = require("path"); var favicon = require("serve-favicon"); var logger = require("morgan"); var cookieParser = require("cookie-parser"); var bodyParser = require("body-parser");
Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.
var index = require("./routes/index"); var users = require("./routes/users");
Примечание: Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.
Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение ‘view’, указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка ‘view engine’, указывая на библиотеку шаблона (у нас — «pug»).
var app = express(); // view engine setup app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug");
Следующие строки вызывают app.use(. ), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки /public корня проекта.
// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger("dev")); app.use(bodyParser.json()); app.use(bodyParser.urlencoded( extended: false >)); app.use(cookieParser()); app.use(express.static(path.join(__dirname, "public")));
Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:
.use("/", index); app.use("/users", users);
Примечание: . пути, указанные выше (‘/’ и ‘ /users’ ) рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile. Мы поговорим подробнее о путях в последующей статье.
Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.
// catch 404 and forward to error handler app.use(function (req, res, next) var err = new Error("Not Found"); err.status = 404; next(err); >); // error handler app.use(function (err, req, res, next) // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get("env") === "development" ? err : >; // render the error page res.status(err.status || 500); res.render("error"); >);
Объект app приложения Express теперь полностью настроен. Остался последний шаг — добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле /bin/www).
.exports = app;
Пути (Routes)
Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.
var express = require("express"); var router = express.Router(); /* GET users listing. */ router.get("/", function (req, res, next) res.send("respond with a resource"); >); module.exports = router;
Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задаётся при импорте модуля — (‘ /users ‘) плюс что-то, определяемое в этом файле (‘ / ‘). Иными словами, этот путь будет использован, когда получен URL-запрос /users/ .
Примечание: запустите сервер и задайте в браузере URL http://localhost:3000/users/ . Вы должны увидеть сообщение: ‘respond with a resource’.
Стоит отметить, что колбэк-функция имеет третий аргумент — ‘ next ‘, т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути ‘/’ .
Представления (шаблоны)
Файлы преставлений (шаблонов) хранятся в каталоге /views (это указано в app.js) и имеют расширение .pug. Метод Response.render() выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из /routes/index.js (приводится ниже) можно увидеть, что роут отвечает, используя шаблон «index» с переданным значением переменной «title» из шаблона.
/* GET home page. */ router.get("/", function (req, res) res.render("index", title: "Express" >); >);
Шаблон для пути ‘/’ приведён ниже (файл index.pug). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением ‘Express’ помещена в определённое место шаблона.
extends layout block content h1= title p Welcome to #
Мини-тест
Создайте новый путь в /routes/users.js, чтобы выводить текст «You’re so cool» или «Ну, вы крутой!» по URL /users/cool/ . Проверьте его, запустив сервер и посетив в браузере http://localhost:3000/users/cool/ .
Итоги
Сейчас создан каркас проекта Local Library. Мы проверили, что он запускается с использованием Node. Но главное, что вы поняли структуру проекта, и знаете, где и как добавить пути и представления для нашей локальной библиотеки.
Далее мы изменим каркас, чтобы он работал как библиотечный веб-сайт
Смотрите также
- Express application generator (документация Express)
- Using template engi nes with Express (документация Express)
- Назад
- Обзор: Express Nodejs
- Далее
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как запустить простой статический сайт за пять ≈пятиминутных шагов при помощи Node.js и Express
В качестве отклика на инструкцию «Как сделать за один час» я решил опубликовать собственную, состоящую из пяти простых и обозримых ≈пятиминутных шагов.
Шаг 1. Установить в соответствии с инструкциями, имеющимися в вики для каждой из поддерживаемых операционных систем. (Для Windows достаточно скачать и запустить воспользоваться системным менеджером пакетов, и так далее.)
Шаг 2. Создать пустой каталог и поместить в нём файл следующего содержания:
site.js
// Перечисление зависимостей: var path = require('path'); var express = require('express'); // Описание настроек: var staticSiteOptions = < portnum: 80, // слушать порт 80 maxAge: 1000 * 60 * 15 // хранить страницы в кэше пятнадцать минут >; // Запуск сайта: express().use(express.static( path.join(__dirname, 'static'), staticSiteOptions )).listen(staticSiteOptions.portnum);Настройки staticSiteOptions можно переменить по собственному вкусу.
Шаг 3. В том же каталоге подать команду которая автоматически создаст подкаталог и установит туда скачав из Интернета.
Шаг 4. В том же каталоге создать подкаталог и поместить в нём файлы статического сайта. Этот подкаталог станет корнем сайта. Файлы с именами будут использоваться Иными словами, при ответе сервера на запрос с адресом, содержащим только имя некоторого каталога (будь то корень сайта или один из его подкаталогов), будет показан файл с именем из указанного каталога (если есть).
Шаг 5. В том же каталоге подать команду которая запустит сервер. Убедившись в её работоспособности, обеспечить автозапуск этой команды в этом каталоге после каждой перезагрузки операционной системы. (Например, можно для этой цели.)
Под хабракатом уместно упомянуть (и упоминаю) о том, что просто запустить сервер на некотором компьютере может быть не достаточно: у этого компьютера также должно быть некоторое имя, известное читателям сайта, а до сервера должны доходить запросы, отправляемые на слушаемый им внешний порт.
Но задачу о том, как назначить имя тому компьютеру, на котором запущен сервер, я оставляю на усмотрение читателя, потому что у ней есть несколько общеизвестных решений.
(Можно купить VPS с фиксированным запустить на нём а затем купить домен, купить или подобрать бесплатные по вкусу, сообщить их имена доменоторговцу, а затем связать с желаемым именем в панели управления первичным Можно запускать на домашнем компьютере, а фиксированный для него купить у поставщика Интернета. Можно использовать динамический DNS, обходиться без фиксированного А может оказаться, что внешнего и вовсе не надо, если нужен для интранета.)
Да и задачу о том, как пробросить через файерволл тот порт, который слушает сервер, я также оставляю на усмотрение читателя. Её решение обыкновенно излагается в инструкции к файерволлу.
Создание простого веб-сервера с помощью Node.js и 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 будет выглядеть так:
"name": "express-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": "test": "echo \"Error: no test specified\" && exit 1"
>,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": "express": "^4.17.1"
>
>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’) и посмотрите, что получится.
На данный момент сервер должен выглядеть так:
const path = require('path');
const express = require('express');
const app = express();app.use(express.static(path.join(__dirname, 'public')))app.get('/', (req, res) => res.send(< message: 'Hello WWW!' >);
>);app.listen(3333, () => console.log('Application listening on port 3333!');
>);Создание каталога 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-код:
My server
My server
Server built with Node.js and Express
Теперь остается всего один шаг.
Передача HTML-файла
Мы почти закончили. Осталось только обработать HTML-код. Для этого нужно перейти в файл index.js и прописать в нем следующее:
app.get('/', (req, res) => res.sendFile(`$/public/index.html`);
>);Если вы уже ранее работали с Node.js и Express, то можете спросить: “Что здесь делает метод sendFile и почему мы не используем render ?” Метод render мы использовать не можем, так как не задействуем никакой движок (например, Pug, EJS и т.д.). Следовательно, когда кто-либо обращается к домашней странице, мы отправляем назад HTML-файл.
Итоговый код сервера должен выглядеть так:
const path = require('path');
const express = require('express');
const app = express();app.use(express.static(path.join(__dirname, 'public')))app.get('/', (req, res) => res.sendFile(`$/public/index.html`);
>);app.listen(3333, () => console.log('Application listening on port 3333!');
>);
COPYЕсли теперь вы перейдете по http://localhost:3333 , то увидите домашнюю страницу с синим фоном. Естественно, сначала нужно будет закрыть надоедливое всплывающее окошко.
Заключение
К завершению статьи у вас должно получиться простое веб-приложение.
В этом уроке мы узнали:
- о Node.js;
- об Express и о том, как использовать его для создания небольшого веб-приложения;
- как создавать маршруты;
- как настраивать статическое содержимое в приложении Node.js + Express;
- как передавать простой HTML-файл в Express.
- Создаем Telegram-бота с помощью Node.js за 3 минуты
- Найти и обезвредить: утечки памяти в Node.js
- Создание многопользовательской игры с использованием Socket.io при помощи NodeJS и React