Развертывание звучит устрашающе, но не обязательно

Heroku - контейнерная облачная платформа как услуга (PaaS). Он позволяет разработчикам создавать, доставлять, отслеживать и масштабировать свои приложения без проблем с инфраструктурой.

В этом посте мы развернем приложение Angular, созданное с версией 9, которая на данный момент является последней стабильной версией. Однако конфигурации не связаны с версией angular, вы можете развернуть ее со старыми или новыми версиями с помощью этого руководства.

Heroku говорит:

«Мы - самый быстрый способ перейти от идеи к URL».

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

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

Мы запустили новое приложение Angular с использованием последней версии интерфейса командной строки. Вот что мы получаем:

Давайте запустим ng serve, чтобы убедиться, что с нашим приложением все в порядке.

С приложением все в порядке, теперь давайте сосредоточимся на развертывании. Теперь нам нужно знать, что мы можем делать с Heroku и как мы можем это делать.

Начиная

Первый шаг - создать новое приложение на Heroku. Итак, простой способ сделать это - перейти на панель управления и использовать созданный для этого пользовательский интерфейс.

Нажмите «Создать новое приложение» в правом верхнем углу.

Дадим нашему приложению имя, выберем регион и нажмем «Создать приложение».

Мы будем перенаправлены на страницу, подобную приведенной ниже, где показаны наши варианты развертывания. Варианты:

  • Heroku Git
  • Интеграция с GitHub
  • Реестр контейнеров

В этом посте мы будем использовать интеграцию с Github. После того, как мы создадим репозиторий для нашего приложения на GitHub, мы можем продолжить. Нажмите на опцию Github и найдите наше репо.

После того, как Heroku обнаружит наше репо, мы просто нажимаем кнопку Подключить, чтобы соединить репо с Heroku. Это поможет нам выполнять автоматическое развертывание каждый раз, когда мы нажимаем на нашу основную ветку.

После того, как соединение будет установлено, вы увидите такую ​​страницу. Здесь мы видим, что у нас есть опция «Включить автоматическое развертывание» из ветви, которую мы можем выбрать. Если это то, что вы хотите, все, что вам нужно сделать, это нажать на эту кнопку.

На данный момент мы создали репозиторий с работающим приложением, подключили его к Heroku и включили автоматическое развертывание. Итак, каждый раз, когда мы нажимаем на нашу основную ветку, Heroku запускает для нас процесс развертывания.

Теперь все в порядке, и все, что нам нужно, это некоторые конфигурации развертывания, фиксация и отправка на GitHub. Начнем с того, что это за конфиги.

Отличительной чертой Heroku является их концепция buildpack. В основном, чтобы перенести ваше приложение с локального хоста на реальный URL-адрес, вам нужно дать некоторые инструкции удаленному компьютеру для выполнения выпуска и развертывания.

Что нам нужно сказать машине

  1. Установите наши зависимости.
  2. Сделайте производственную сборку нашего приложения.
  3. Разверните нашу производственную сборку на Heroku.
  4. Обслуживаем нашу папку dist после ее развертывания.
  5. Запустить производство по заданному URL-адресу.

К счастью, у Heroku уже есть пакет сборки, который сообщает машине, что нужно делать именно то, что нам нужно, и называется он Node.js Buildpack. Все, что нам нужно сделать, это немного помочь этому сборочному пакету.

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

Давай установим.

npm i express --save

Теперь нам нужен скрипт на JS, чтобы сообщить Express, что делать.

Создайте файл в корневом каталоге вашего проекта. Я люблю называть это server.js.

Здесь вам нужно изменить только название вашего приложения. Он должен быть таким же, как атрибут «name» в вашем package.json.

Здесь важно отметить, что файл server.js должен находиться в корневом каталоге вашего проекта.

Что мы делаем в файле server.js?

По сути, в файле server.js мы используем сервер Express для:

  1. Перенаправляйте весь трафик с http на https.
function requireHTTPS(req, res, next) {
    // The 'x-forwarded-proto' check is for Heroku
    if (!req.secure && req.get('x-forwarded-proto') !== 'https') {
        return res.redirect('https://' + req.get('host') + req.url);
    }
    next();
}
const express = require('express');
const app = express();
const app = express();
app.use(requireHTTPS);

2. Обслуживаем наши статические файлы.

app.use(express.static(’./dist/<name-on-package.json>’));

3. Дождитесь запроса на любой путь и перенаправьте все запросы на index.html.

app.get(’/*’, function(req, res) {
  res.sendFile(’index.html’, {root: 'dist/<name-on-package.json>/’}
);
});

Маршрутизатор Angular будет обрабатывать, какой компонент должен быть показан пользователю в соответствии с запрошенным им путем.

4. Прослушивайте запросы на PORT, заданном переменными env, или на порте Heroku по умолчанию, который равен 8080.

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

Проверьте, что все в порядке

Отличный трюк здесь, чтобы проверить, что с этим скриптом все в порядке, без его развертывания в heroku, - это запустить его локально, чтобы мы могли сэкономить время в случае каких-либо ошибок. После запуска ng build - prod мы можем сделать что-то очень простое в терминале:

Команда node server.js запустит то, что находится внутри файла server.js, и мы сможем проверить, есть ли какие-либо проблемы с нашим файлом, прежде чем развертывать его на Heroku.

Обратите внимание, что мой рабочий каталог - это корневой каталог моего проекта, в котором находится мой server.js файл.

После этого мы можем перейти на localhost: 8080 и увидеть приложение, обслуживаемое из папки dist.

Package.json

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

Измените сценарий запуска на node server.js.

Итак, мы не хотим использовать команду ng serve, потому что она предназначена только для разработки, нам нужен настоящий сервер для нашей производственной среды.

Измените сценарий сборки на ng build --prod

Здесь следует отметить, что вам нужно вносить это изменение только в производственной среде, то есть только в основной ветке, в противном случае мы будем запускать сервер Express каждый раз, когда запускаем сценарий запуска.

Заключение

Это все. Мы закончили с тем, что требуется для нашего первого развертывания на Heroku. Теперь мы сделаем фиксацию и отправим Heroku, чтобы запустить развертывание.

Если вы не выбрали автоматическое развертывание, вам нужно сделать push, а затем перейти на панель инструментов Heroku ›Выберите приложение› Развернуть ›Развернуть ветку в конце страницы.

Процесс развертывания выглядит так:

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

Как вы можете видеть ниже, наше приложение теперь размещено и обслуживается Heroku. Приложение Angular-Heroku.

Теперь мы закончили процесс развертывания, и наше приложение запущено. С первой попытки мне потребовалось около четырех часов, чтобы исправить все ошибки, которые у меня были, и выполнить первое успешное развертывание. Не позволяйте неудачам помешать вам разместить заявку в Интернете.

Бонус

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

Ресурсы

Не стесняйтесь спрашивать меня о чем угодно, я с удовольствием отвечу на ваши вопросы.

Спасибо за прочтение.