Будь то приложение для личных целей, список задач, приложение-календарь или что-то более профессиональное, знание того, как развернуть приложение, является одной из самых важных операций, с которыми нам придется столкнуться в процессе разработки.
Фактически, с помощью этого процесса можно увидеть завершенную нашу работу и получить к ней доступ, когда захотим и откуда захотим, а не только на нашей локальной машине.
Поэтому в этой статье мы увидим, как развернуть приложение 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 раз или столько раз, сколько захотите. Не стесняйтесь задавать вопросы, если они у вас есть. Большое спасибо за чтение!