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

Фактически, с помощью этого процесса можно увидеть завершенную нашу работу и получить к ней доступ, когда захотим и откуда захотим, а не только на нашей локальной машине.

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

Предпосылки

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

Новый проект

Во-первых, давайте удостоверимся, что у нас установлена ​​последняя версия Angular CLI на нашем локальном компьютере (на данный момент я пишу, текущая версия - 10).

$ npm install -g @angular/cli@latest

После установки CLI мы, наконец, можем приступить к созданию нового проекта с помощью команды:

$ ng new demo-deploy

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

Давайте запустим приложение, которое мы назвали demo-deploy, чтобы убедиться, что оно работает:

$ cd demo-deploy
$ ng serve

и перейдите по адресу: http://localhost:4200

Новый репозиторий GitHub

Чтобы создать новый репозиторий на Github из уже существующего проекта, вам необходимо получить доступ к GitHub и войти в систему (если вы еще не создали пользователя на GitHub, вы должны сделать это, чтобы продолжить упражнение).

Создайте новый репозиторий и в поле «Имя репозитория» введите demo-deploy. На этом этапе удобно не добавлять какие-либо файлы, поскольку это может привести к ошибкам с уже существующими файлами в проекте.
Вы можете безопасно добавить их позже.

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

$ git init -b main
$ git add .
$ git commit -m "First commit"

Теперь вернитесь в свой проект GitHub и получите URL-адрес удаленного репозитория.

и использовать его для привязки проекта к удаленному:

$ git remote add origin <remote_repository_URL>
$ git remote -v
$ git push -u origin main

Теперь, обновив страницу, вы увидите проект, загруженный на GitHub.

Heroku

Документация:

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

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

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

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

Теперь шаги становятся очень механическими. Фактически, после подключения учетной записи к GitHub нам придется искать репозиторий в разделе «Подключение к GitHub», как вы можете видеть на следующем изображении:

После определения конкретного репозитория нашего проекта все, что нам нужно сделать, это выбрать ветку, в которой мы хотим начать сборку, и включить автоматическое развертывание, чтобы при нажатии на GitHub Heroku автоматически обновлял сборку во всех случаях. бесплатно (удобно, не правда ли ?!).

Давайте начнем развертывание вручную и подождем, операция может занять некоторое время.
В конце операции мы увидим экран, похожий на следующий:

Изменения в проекте

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

Как?

Просто перейдите в package.json файл и создайте сценарий постустановки, чтобы в поле «scripts» у нас было что-то вроде этого:

"scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e",
   "postinstall": "ng build --aot --prod"
}

N.B. если есть какие-либо проблемы на этапе сборки, замените команду «postinstall» следующей:

"heroku-postbuild": "ng build --prod"

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

Опережающий (AOT) компилятор Angular преобразует ваш код Angular HTML и TypeScript в эффективный код JavaScript на этапе сборки перед загрузкой и запуском этого кода браузером. Компиляция вашего приложения в процессе сборки обеспечивает более быструю визуализацию в браузере.

На данный момент скомпилированная версия находится в папке «dist», из которой затем запускается приложение.

Как добраться до Heroku

Чтобы Heroku знал, какую версию Node и Npm использовать для нашего приложения, необходимо указать версии в package.json, и было бы разумно использовать те же версии, которые есть у нас на локальном компьютере, чтобы иметь две версии. среды, согласующиеся друг с другом.

Чтобы проверить версию:

$ node -v
$ npm -v

а теперь добавьте их в package.json

"engines": {
   "node": "10.16.0",
   "npm": "6.9.0"
}

Наконец, давайте установим в массиве зависимостей:

  • Машинопись:
$ npm install typescript --save
  • Enhanced Resolve, что-то вроде веб-пакета
$ npm install [email protected] --save-dev

Последний шаг: сервер

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

$ npm install express path --save

Express - это легкая структура веб-приложений, которая помогает организовать ваше веб-приложение в архитектуру MVC на стороне сервера.

— — —

Модуль path предоставляет утилиты для работы с путями к файлам и каталогам.

Теперь давайте создадим новый файл с именем server.js в корне нашего проекта и скопируем следующий код:

//Install express server
const express = require('express');
// Requirement of path Module in order to manage URLS
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/demo-deploy'));
app.get('/*', function(req,res) {
   res.sendFile(path.join(__dirname+'/dist/demo-deploy/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Запустить приложение

Последнее, что осталось сделать, это изменить скрипт «start» на thepackage.json

"start": "node server.js"

и, нажав на внесенные изменения, Heroku автоматически развернет наше приложение.

$ git add .
$ git commit -m 'deploy updates'
$ git push

Поэтому давайте зайдем на панель управления Heroku в разделе «Обзор», и мы сможем увидеть статус развертывания, запущенного автоматически, в списке «Последние действия».

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

Выводы

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

Если вам понравилась эта статья, нажмите кнопку 👏 хлопка 50 раз или столько раз, сколько захотите. Не стесняйтесь задавать вопросы, если они у вас есть. Большое спасибо за чтение!