Разверните веб-приложение JavaScript менее чем за 30 минут

Вы только что закончили свое первое приложение JavaScript и теперь задаетесь вопросом: Как мне разместить свое приложение в Интернете? В этом руководстве мы рассмотрим самый быстрый и простой способ развертывания вашего JavaScript-приложения на Heroku с помощью Git, Node, Node Package Manager (NPM) и Express.

Heroku - это облачная платформа, которая предлагает веб-разработчикам бесплатный план для управления и развертывания своих проектов. Чтобы воспользоваться их услугами, нам придется зарегистрироваться.

0. Предпосылки

Прежде чем мы начнем, убедитесь, что Git, Node и NPM установлены, выполнив следующие команды в вашем терминале:

* $ означает запуск команды в вашем терминале.

$ node --version

Если Node не установлен, скачайте его здесь.

$ npm --version

NPM обычно устанавливается вместе с Node. Однако, если NPM не установлен в вашей системе, попробуйте переустановить более свежую версию Node.

$ git --version

Если Git не установлен, скачайте его здесь. После установки Git давайте инициализируем локальный репозиторий для нашего приложения.

$ git init

1. Установите Heroku CLI.

После того, как мы подписались на Heroku и установили все необходимые компоненты, установите Heroku CLI и войдите в систему через свой терминал.

$ heroku login

2. Инициализируйте package.json в каталоге приложений.

Если у вас уже есть файл package.json в корневом каталоге приложения, вы можете перейти к шагу 3.

В противном случае в корневом каталоге приложения выполните следующую команду, чтобы инициализировать файл package.json. Этот файл действует как идентификатор (например, идентификационная карта для вашего приложения) и требуется NPM, чтобы знать, какие зависимости установить для вашего приложения.

$ npm init

После выполнения команды вам будет предложен ряд вопросов, которые автоматически заполнят ваш файл package.json метаданными из ваших ответов. Пока вы можете пропустить вопросы, нажав enter, так как вы сможете редактировать файл позже.

3. Установка Express

Далее мы будем использовать фреймворк веб-приложений Node.js под названием Express для настройки нашего сервера. Чтобы установить Express, нам нужно выполнить следующую команду:

$ npm install --save express

Используя NPM, это поможет нам загрузить и установить необходимые файлы для модуля Express в каталог приложения. Флаг --save также укажет Express как зависимость в нашем файле package.json.

4. Настройка сервера Express.

Создайте файл server.js. Это будет действовать как наш сценарий инициализации при развертывании нашего приложения на Heroku.

$ touch server.js

Затем откройте файл server.js и сохраните его в следующем коде:

Что это вообще значит? Давайте поговорим немного подробнее.

const express = require('express');
const app = express();
const path = require('path');

Чтобы наш скрипт server.js использовал Express, нам нужно потребовать модуль Express, инициализировав const express = require('express').

Следующая строка const app = express() инициализирует переменную app новым объектом Express. Это позволит нам использовать методы, предоставляемые модулем Express.

Другой модуль, который мы будем использовать, - это модуль Путь, предоставляемый Node, к которому мы можем получить доступ через const path = require('path'). Это предоставит нам набор методов, которые мы можем использовать при работе с каталогами путей. В нашем случае мы в основном будем использовать path.join(...).

app.use(express.static(path.join(__dirname)));

app.use(path, callback) вызывается всякий раз, когда запрос (GET, POST, PATCH, DELETE) отправляется на путь, который запускает функцию обратного вызова. Проще говоря, представьте, что прослушиватель событий помещается на обозначенный путь с помощью функции обратного вызова. Тем не мение; если путь не указан, обратный вызов будет срабатывать при каждом запросе независимо от пути. Поскольку в настоящее время у нас нет пути, наша функция обратного вызова express.static(...) будет срабатывать при каждом запросе, который получает наш сайт.

express.static(...) - это функция промежуточного программного обеспечения, которая позволяет нам предоставлять каталог или файл для общего использования. В нашем случае мы передали path.join(__dirname) в качестве аргумента нашей функции промежуточного программного обеспечения, где __dirname представляет корневой каталог нашего приложения. Это означает, что каждый каталог и файл в нашем корневом каталоге приложения могут быть доступны клиенту, когда его браузер выполняет запрос.

Не пугайтесь! Помните, что каждый раз, когда клиент переходит на наш веб-сайт, его браузер выполняет GET-запрос. В свою очередь, наш сервер должен отправить ответ вместе с файлами html, css и js, которые составляют базовое веб-приложение. Если мы хотим разрешить публичный доступ только к определенному каталогу, мы можем вместо этого передать path.join(__dirname, '[name of the directory]'). По мере того, как наши веб-приложения становятся более сложными, мы можем захотеть скрыть определенные файлы, которые могут содержать наши ключи API, секреты и т. Д., Путем ограничения того, какие файлы могут быть доступны публично.

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Здесь мы устанавливаем наши маршруты. В функции app.get(path, callback) обратный вызов запускается, когда выполняется запрос GET по указанному пути. В нашем примере у нас в настоящее время есть один маршрут к '/’, по которому мы отправляем обратно index.html клиенту. Пока наш app.use(express.static(...)) разрешает публичное использование наших файлов css и js, клиентский браузер также сможет получать эти файлы для использования. На данный момент этого достаточно, чтобы наш сайт заработал.

app.listen(process.env.PORT || 3000);

Эта строка сообщает нашему веб-приложению, какой порт слушать. Когда мы развертываем наше веб-приложение, Heroku установит для сервера значение порта по умолчанию, которое будет обозначено как process.env.PORT. Если порт не указан, наше веб-приложение по умолчанию будет использовать порт 3000.

Чтобы быстро это проверить, мы можем запустить $ node server.js и перейти к http://localhost:3000 в нашем браузере. Когда все будет хорошо, нажмите Ctrl + C в терминале, чтобы выключить локальный сервер.

4. Настройка package.json

После того, как мы настроили наш server.js, нам нужно будет настроить инструкции для Heroku для запуска нашего сервера при развертывании. В вашем файле package.json в разделе scripts добавьте "start": "node server.js".

Heroku автоматически найдет сценарий start и выполнит его при развертывании.

5. Зафиксируйте все изменения с помощью Git.

Теперь, когда мы настроили все необходимые файлы, выполните следующие команды, чтобы зафиксировать наши изменения. Во-первых, нам нужно будет выполнить наши изменения.

$ git add .

Эта команда добавит все наши файлы в область подготовки. Далее нам нужно будет зафиксировать изменения.

$ git commit -m '[type some detailed message here]'

После фиксации ваших изменений мы, наконец, можем развернуть наше приложение!

6. Развертывание нашего приложения на Heroku

Выполните следующую команду и замените [] именем вашего приложения.

$ heroku create [name of your app]

Это инициализирует приложение на веб-сайте Heroku и настроит Heroku в качестве удаленного репозитория в вашем файле .git. Как только это будет сделано, давайте переместим наш локальный репозиторий в удаленный репозиторий Heroku.

$ git push heroku master

После того, как наше веб-приложение будет успешно перенесено в удаленный репозиторий, Heroku автоматически запустит npm start скрипт, который мы ранее определили в нашем файле package.json. В свою очередь, это запустит node server.js и запустит наш сервер! Если все пойдет хорошо, нам будет возвращен URL-адрес нашего веб-приложения!

Удачи и удачного кодирования!

Ресурсы