Как настроить локальный сервер и запустить приложение с помощью Node.js
В этом кратком руководстве вы узнаете, как настроить локальный сервер с помощью Node.js. К концу вы сможете запускать базовую версию приложения на собственном виртуальном сервере.
Давайте начнем! 🚀
Зачем вам нужен веб-сервер и что это вообще такое?
Виртуальный веб-сервер работает на вашем собственном компьютере с использованием серверного программного обеспечения. Если вы начинающий разработчик, вам наверняка захочется его создать, поскольку он позволяет тестировать функции любого созданного вами веб-приложения.
Представьте, что вы загружаете свой веб-сайт или приложение на всеобщее обозрение, не тестируя его в Интернете. Невозможно быть уверенным в том, что это хорошо работает для других пользователей. Плохо звучит, правда? Поэтому при доступе к сайту в Интернете рекомендуется всегда проверять, как работают созданные вами функции.
Установите Node.js
Для начала нам нужно установить Node.js, который представляет собой среду выполнения для JavaScript (👉 на английском языке: Node поможет вам выполнить код JavaScript).
Многие разработчики приходят в восторг, когда говорят о Node. До Node только веб-браузеры, такие как Google Chrome, имели движок JavaScript, который мог читать и отображать код, написанный на JavaScript. Для Chrome этот интерпретатор называется V8. Особенность, которая сделала Node настолько популярным, заключается в том, что он позволяет запускать JavaScript практически на всех машинах, а это означает, что браузер больше не является ограничением для выполнения JavaScript.
Можно с уверенностью сказать, что Node - лучший выбор при создании простого сервера для всех видов веб-приложений. Итак, давайте установим его. Давайте рассмотрим два способа: один быстрый способ установки и другой вариант, который сначала будет немного сложнее, но позже будет намного удобнее.
(1) Быстрый способ установки Node.js
- Перейдите на официальную страницу Node.js и скачайте установочный пакет для своей операционной системы. Используйте версию LTS, а не текущую.
- После завершения загрузки установите пакет, как любое другое приложение на свой Mac или ПК.
- Затем вы можете перейти к выбранной вами программе Терминала. Если у вас не установлено приложение Терминал, такое как iTerm2 или Hyper, просто откройте Терминал, который предустановлен на каждом Mac. Если вы пользователь Windows, отметьте здесь.
- Вы можете ввести следующую команду в свой Терминал, чтобы проверить, все ли было установлено правильно:
$ node -v
. Если все работает нормально, вы должны увидеть номер версии узла. Также проверьте, был лиnpm
установлен с$ npm -v
.Npm
- это диспетчер пакетов узла, который поставляется вместе с узлом при установке. Мы будем использовать его в следующих шагах, чтобы установить Express и запустить наш виртуальный сервер.
(2) Лучший способ установить Node.js
Вместо описанного выше способа я предпочитаю использовать Homebrew, менеджер пакетов для macOS. Это позволяет очень быстро устанавливать недостающие приложения через Терминал. Пользователи Windows должны использовать другой менеджер пакетов, например Scoop. Они очень похожи, и в демонстрационных целях я покажу вам, как установить Node через Homebrew.
- Снова \ перейдите в Терминал и вставьте туда следующее приглашение (без знака $). Если вам интересно: он просто проверяет репозиторий GitHub из Homebrew и устанавливает приложение оттуда.
$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
- Если Homebrew был установлен правильно, теперь мы будем готовы установить Node с помощью этой простой команды:
$ brew install node
- Вы можете проверить, все ли в порядке, набрав:
$ node -v
и$ npm -v
(которые должны дать вам номер версии вашего установленного узла).
Но зачем прилагать все усилия для установки Node с помощью диспетчера пакетов, такого как Homebrew? Это хорошая идея по нескольким причинам:
- Если вы используете диспетчер установки Node, возможно, у вас возникнут проблемы с доступом, требующие внесения изменений в вашу систему с помощью команды
$ sudo
. - Кроме того, если вы когда-нибудь захотите удалить программу без Node, это будет очень беспорядочно, так как вам нужно будет отслеживать все файлы, которые были созданы.
- Наконец, при использовании Homebrew гораздо проще поддерживать актуальную версию Node.
Настройте свое первое приложение
Ты все еще со мной, правда? Отлично, давайте, наконец, приступим к созданию настоящего веб-приложения и локального сервера!
Чтобы сделать это довольно удобно, мы можем использовать express-generator
, отличный инструмент командной строки, который создает для нас скелет приложения. В противном случае вам потребуется написать более сложный код, такой как настройка экземпляра сервера, настройка механизма просмотра и т. Д. Хотя это полезно знать, нет необходимости запускать ваше первое приложение на веб-сервере.
Express-generator
прост. Просто возьмите следующую команду и введите ее в свой терминал: $ npm install express-generator -g
. С -g
мы устанавливаем Express глобально, что означает, что вы можете получить доступ к пакету из любого каталога.
Находясь в Терминале, вы можете создать новое приложение с express-generator
, набрав: $ express -v ejs -c sass myapp
. В этом примере myapp
будет именем вашего проекта. И угадай что? Вы только что создали свое первое приложение! Чтобы перейти в только что созданный myapp
каталог, введите $ cd myapp
.
Полюбуйтесь только что созданным приложением
Взгляните на только что созданный myapp
проект. Чтобы увидеть свои файлы в редакторе кода, просто используйте эту строку: $ code .
, находясь в папке myapp
на вашем Терминале.
Чтобы это работало, вы, конечно, должны установить редактор кода, например Visual Studio Code или Atom.
При открытии редактора вы можете увидеть проект и все файлы, которые были автоматически созданы для вас с помощью экспресс-генератора. В index.ejs
вы можете вносить изменения и создавать на их основе сложное веб-приложение. А пока оставим все как есть и продолжим сборку нашего сервера.
Мы почти на месте.
И последнее: мы должны установить различные дополнительные сторонние пакеты (которые указаны как зависимости в файле package.json
). Обычно они требуются Express для запуска сервера, как и следовало ожидать. Хорошая новость в том, что это будет довольно просто, так как вы можете установить все это через npm
одновременно. Откройте свой терминал и используйте эту подсказку:
$ npm install
. Вы можете проверить, прошла ли установка успешно, снова зайдя в редактор кода. Вы увидите новую папку с именем node_modules
, как в моем примере выше (подсказка: исключите ее, если вы загружаете на GitHub).
Запустите свое приложение на виртуальном веб-сервере
Наконец, давайте запустим наше приложение на веб-сервере. Большая часть необходимого уже была сделана на предыдущих этапах! Два простых шага и вот вы:
- Находясь в Терминале, введите следующую команду:
$ npm start
. Это запустит виртуальный сервер. - Перейдите в адресную строку своего интернет-браузера и введите
localhost:3000
. Localhost - это домен верхнего уровня (TLD), такой же, как .com или .org. Однако он зарезервирован для документации и тестирования. С помощью:3000
вы вызываете порт по умолчанию для доступа к только что построенному серверу.
Куда пойти отсюда
Поздравляю! Вы создали свое первое приложение и запустили его на своем собственном сервере. Отсюда вы можете начать создавать свое собственное приложение. Каркас приложения уже настроен таким образом, чтобы вы могли создавать свой сайт в index.ejs
. Если вы хотите создать что-то более продвинутое, чем простой сайт, вам следует рассмотреть возможность использования частичных файлов. Это означает, что вы создаете свое приложение из компонентов, на которые вы можете ссылаться из своего index.ejs
. Удобно, что мы уже установили EJS-движок представления, который поможет вам при построении определенных частей вашего приложения в компонентах.
Спасибо за чтение. Я очень надеюсь, что вы нашли этот урок полезным.