Кажется, что о развертывании приложений angular на heroku легко подумать, пока вам действительно не придется его попробовать.

Недавно приложение angular должно было быть развернуто в среде heroku для производства. Пока я искал самый быстрый и простой способ сделать это, я обнаружил, что на некоторых онлайн-ресурсах не объясняется, как это делается без каких-либо проблем.

Следовательно, эта статья «все в одном» поможет вам и сократит дни исследований.

Настройте приложение Angular для правильного развертывания на Heroku

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

В приложении angular откройте файл Package.json и добавьте следующее:

В разделе «сценарии» добавьте команду после установки:

Это создает приложение с использованием компилятора Ahead Of Time (AOT) и делает его готовым к работе. Будет создана dist папка, из которой будут запускаться все версии приложения, преобразованные в HTML и javascript.

Добавить механизмы Node и NPM, Express, Cors

Должны быть добавлены механизмы Node и NPM, которые Heroku будет использовать для запуска вашего приложения. Cors должны быть добавлены для предотвращения ошибок перекрестного происхождения и Express, чтобы помочь запускать наши производственные файлы (dist). Это должна быть та же версия, что и на вашем компьютере. Итак, вы можете запустить node -v и npm -v, чтобы получить правильную версию и включить ее в файл package.json следующим образом:

Скопируйте некоторые зависимости разработчика в зависимости

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

Установите сервер для запуска вашего приложения

Локально мы запускаем ng serve из терминала, чтобы запустить наше приложение в локальном браузере. Но нам нужно будет настроить сервер Express, который будет запускать наше готовое к работе приложение (из созданной папки dist) только для обеспечения легкой и быстрой загрузки.

Установите экспресс-сервер, запустив:

npm install express path cors --save

Создайте файл server.js в корне приложения и вставьте следующий код. Убедитесь, что путь к вашему файлу указан правильно, так как это основная причина, хотя большинство из них не будет работать должным образом при развертывании.

В моем dist-файле был файл client-app, прежде чем я смог получить доступ к файлу index.html, который будет запускаться в производственной среде.

Изменить команду запуска

В package.json измените команду «start» на node server.js, чтобы она стала:

"start": "node server.js"

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

Внесите несколько изменений в index.html

Удалите https: во всех cdns в файле index.html, чтобы он выглядел так:

Добавить Procfile в корневой каталог в структуре папок

Procfile определяет команды, выполняемые приложением при запуске. Вы можете использовать Procfile для объявления различных типов процессов.

Как только все эти шаги будут выполнены, вы будете готовы к развертыванию на heroku.

Отправить в git

Настроить Heroku

Если у вас еще нет учетной записи, создайте ее на сайте heroku. Это бесплатно. Войдите в свою панель управления и создайте новое приложение.

Нажмите создать приложение.

В меню Развернуть в разделе Метод развертывания выберите GitHub. Если вы еще этого не сделали, он попросит вас войти в свою учетную запись github, чтобы к ней можно было подключиться.

Введите имя репозитория GitHub и нажмите Поиск. Когда репо отобразится ниже, нажмите Подключиться.

После подключения к желаемому репозиторию прокрутите вниз и выберите метод развертывания: ручное или автоматическое развертывание, которое всегда будет развертывать эту ветку в любое время, когда выполняется push.

Но если вы не нажимаете на git или хотите использовать heroku cli в своем терминале для развертывания, просто следуйте инструкциям на изображении ниже.

Это хорошо работает, если развертываемая ветка является главной.

И это все, что нужно для развертывания приложения angular на heroku.

Спасибо, что дочитали до конца.

Эта статья была вдохновлена ​​статьей Olutunmbi Banto о том, как развернуть приложение angular на героку; Большое ему спасибо.

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