Как создать и развернуть приложение на Angular: быстрый и простой деплой с App Platform

Современная разработка требует не только инструментов для создания интерфейсов, но и простых решений для их развертывания. Angular от Google — популярный фреймворк для создания приложений. Он использует TypeScript и облегчает работу с компонентами, директивами и модулями.

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

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

Вы узнаете, как настроить окружение для разработки, управлять зависимостями и использовать команды Angular CLI. В конце мы покажем, как развернуть приложение в облаке без лишних сложностей.

Что такое Angular и почему стоит его использовать

Angular — это популярный фреймворк от Google для приложений. Он помогает создавать динамические приложения с интерактивными интерфейсами и управлять состоянием. Angular удобен для масштабирования кода и работы с большими проектами.

Фреймворк появился в 2010 году как AngularJS. В 2016 году его полностью переписали, и теперь он называется просто Angular. Обновление улучшило производительность и удобство для разработчиков. Angular поддерживает компоненты, что делает код модульным и переиспользуемым.

Вот основные преимущества Angular:

• Модульность. Приложение делится на модули. Это упрощает разработку и поддержку, особенно для масштабируемых проектов.

• Поддержка TypeScript. Angular использует TypeScript для написания надежного и читаемого кода благодаря строгой типизации.

• Инструменты для разработки. Angular CLI облегчает создание и настройку проектов.

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

Установка окружения для разработки Angular

Для начала работы с Angular нужно правильно настроить окружение. Это упростит процесс разработки. Выполните эти шаги, чтобы подготовить систему:

• Установка Node.js и npm

Сначала установите Node.js. Эта платформа нужна для работы с Angular и поставляется вместе с npm — менеджером пакетов для управления зависимостями. 

Скачайте последнюю версию Node.js с официального сайта и выполните команду в терминале:

Эта команда проверит версию Node.js. Убедитесь, что у вас установлена версия 14.x или выше. Также проверьте версию npm:

Это подтвердит, что ваше окружение готово к установке зависимостей Angular.

• Установка Angular CLI

После установки Node.js установите Angular CLI — командный интерфейс для управления Angular-приложениями. Чтобы установить CLI, выполните команду:

Проверьте версию Angular CLI командой:

Инструмент упростит создание компонентов, модулей и сервисов, а также тестирование и развертывание приложений.

• Выбор текстового редактора

Выбор редактора также важен. Visual Studio Code — популярный выбор благодаря расширениям для TypeScript, HTML и CSS. Можно использовать и другие редакторы — WebStorm или Sublime Text, в зависимости от ваших предпочтений.

Теперь ваше окружение готово к работе с Angular.

Разработка базового функционала приложения на практическом примере

Создадим простое приложение на Angular, чтобы конвертировать рубли в иностранные валюты: доллары (USD), евро (EUR), юани (CNY), йены (JPY) и индийские рупии (INR). Мы будем использовать API для валютных курсов.

Откройте терминал и выполните следующие команды для создания нового проекта:

Здесь мы будем использовать стандартную маршрутизацию. Хотя с версии Angular 17 она уже не требуется, но полезно использовать ее для совместимости со старыми проектами.

Перейдите в корневую папку проекта:

При создании проекта выберите CSS в качестве опции стилей.

Для нашего приложения нам понадобятся HttpClient для запросов к API и FormsModule для работы с формами. Эти модули входят в стандартный пакет Angular.

Для начала зарегистрируйтесь на сайте app.exchangerate-api.com, чтобы получить приватный ключ. Его нужно будет вставить в код. 

Создадим сервис, который будет обращаться к API для получения актуальных курсов валют:

Откройте файл src/app/services/currency.service.ts и замените его содержимое следующим кодом:

Откройте src/app/app.module.ts и добавьте HttpClientModule и FormsModule в раздел импорта, также измените файл следующим образом:

Создадим компонент, который будет содержать логику и интерфейс конвертации:

Откройте src/app/components/converter/converter.component.ts и замените его содержимое следующим кодом:

Откройте src/app/components/converter/converter.component.html и добавьте следующий код:

Откройте src/app/components/converter/converter.component.css и добавьте стили по вашему усмотрению. Например:

Откройте src/app/app.component.html и замените его содержимое на:

В терминале выполните команду:

Откройте браузер и перейдите по адресу http://localhost:4200, чтобы увидеть ваше приложение:

Вы должны увидеть приложение, где можно ввести сумму в рублях и увидеть эквивалентные суммы в USD, EUR, CNY, JPY и INR.

Размещаем проект на GitHub

1. Если у вас нет учетной записи на GitHub, создайте ее:
   • Перейдите на сайт GitHub.
   • Нажмите на кнопку Sign up.
   • Следуйте инструкциям для регистрации.
2. Если Git у вас еще не установлен, его нужно скачать и установить:
   • Скачайте Git для вашей операционной системы.
   • Установите его, следуя инструкциям на экране.
   • После установки проверьте, что Git успешно установлен. Откройте терминал и введите:

Если команда отработала корректно, вы увидите номер версии Git.

3. Перейдите в директорию вашего проекта Angular через терминал:

4. Инициализируйте репозиторий Git в корне проекта:

5. Добавьте все файлы в репозиторий:

6. Выполните команды, чтобы установить имя и email для коммитов:

Эти команды сохранят информацию на глобальном уровне (для всех репозиториев). Если хотите настроить только для конкретного репозитория, уберите --global.

7. Создайте первый коммит:

8. Перейдите на GitHub.
9. В правом верхнем углу страницы нажмите на кнопку + и выберите New repository. Введите название вашего репозитория и, при необходимости, описание.
10. Выберите, будет ли репозиторий публичным (доступен для всех) или приватным (доступен только вам).
11. Нажмите на кнопку Create repository.
12. Вернитесь в терминал, где у вас открыт проект.
13. Свяжите локальный репозиторий с удаленным на GitHub:

Замените <ваш-логин> на ваш логин на GitHub, а <имя-репозитория> — на имя репозитория, которое вы указали при создании.

14. Отправьте код в удаленный репозиторий:

15. Перейдите на страницу вашего репозитория на GitHub. Убедитесь, что все файлы вашего Angular-проекта загружены правильно.

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

1. Добавьте измененные файлы:

2. Сделайте коммит:

3. Отправьте изменения на GitHub:

Теперь ваш Angular-проект размещен на GitHub, и вы можете делиться ссылкой на него с другими, например: 

Развертывание

Чтобы задеплоить проект на платформе Timeweb Cloud App Platformвыполните несколько действий:

• Зарегистрируйтесь в Timeweb Cloud и перейдите в App Platform

Откройте панель управления Timeweb Cloud и перейдите в раздел App Platform. Нажмите «Создать» и выберите тип приложения. 

Для фронтенд-проектов можно использовать Dockerfile или встроенные шаблоны для различных фреймворков.

• Подключение репозитория

Подключите репозиторий с вашим приложением. Репозиторий можно загрузить через GitHub, GitLab или Bitbucket. 

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

• Выбор ветки и коммита

Выберите ветку для деплоя и настройте автоматическую пересборку приложения при каждом новом коммите.

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

• Конфигурация сервера

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

• Сборка приложения

Сервис автоматически соберет приложение на основе параметров сборки. Вы также можете задать переменные окружения (например, для базы данных). В качестве команды сборки поставьте:

Нужно также указать директорию сборки:

• Запуск деплоя

Если необходимо, укажите свое имя для приложения, которое будет отображаться в панели. 

После настройки всех параметров нажмите «Запустить деплой». 

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

• Доступ к приложению

После деплоя вы получите IP-адрес и временный домен. Также перейти к своему приложению можно после успешного деплоя по кнопке справа вверху.

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

Ошибки и их решение при деплое Angular-приложений

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

• Несовместимость версий пакетов

При обновлении Angular или его зависимостей может возникнуть конфликт версий. Это приводит к сбоям в сборке или работе приложения. Например, версия Angular CLI может не совпадать с версиями других пакетов.

Решение. Регулярно обновляйте Angular CLI. Используйте команду ng update для автоматического обновления зависимостей.

• Ошибки при сборке

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

Решение. Проверьте файл angular.json. Убедитесь, что все пути и зависимости указаны правильно. Проверьте наличие всех файлов в нужных директориях.

• Ошибки конфигурации среды

Неверные настройки переменных среды могут привести к проблемам при запуске приложения в разных окружениях (development, production). 

Решение. Настройте файлы environment.ts для разных окружений. Убедитесь, что продакшн-сборка использует правильные переменные среды.

• Ошибки с ресурсами

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

Решение. Проверьте пути к ресурсам в проекте и настройки в angular.json. Убедитесь, что все ресурсы добавлены в сборку.

Как обновлять приложение и управлять версиями

Обновление приложения требует правильного управления версиями и деплоя без ошибок. 

Используйте системы контроля версий и инструменты CI/CD для автоматизации развертывания и отката в случае проблем. Применяйте семантическое версионирование, чтобы четко различать минорные и мажорные обновления.

Чтобы улучшить производительность Angular-приложений, минимизируйте объем передаваемых данных. Используйте техники lazy loading и tree shaking для загрузки только необходимых модулей и уменьшения размера бандла.

Следуя этим рекомендациям, вы сможете устранить ошибки и ваш первый проект выйдет в открытый доступ.

Заключение

Развертывание Angular-приложений стало проще благодаря современным облачным платформам и инструментам автоматизации. А через наш инструмент App Platform вы сможете задеплоить приложение в течение 5 минут.