Кажется, что о развертывании приложений 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 на героку; Большое ему спасибо.
Оставьте комментарий ниже, если вы столкнулись с какими-либо проблемами или у вас есть предложения.