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

Современная разработка требует не только инструментов для создания интерфейсов, но и простых решений для их развертывания. 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 -v

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

npm -v

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

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

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

npm install -g @angular/cli

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

ng version

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

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

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

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

apps

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

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

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

ng new currency-converter --no-standalone --routing

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

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

cd currency-converter

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

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

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

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

ng generate service services/currency

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CurrencyService {

  private apiKey = 'ВВЕДИТЕ ПОЛУЧЕННЫЙ КЛЮЧ СЮДА'; // Ваш API ключ
  private apiUrl = 'https://v6.exchangerate-api.com/v6/';

  constructor(private http: HttpClient) { }

  getExchangeRates(baseCurrency: string): Observable<any> {
    const url = `${this.apiUrl}${this.apiKey}/latest/${baseCurrency}`;
    console.log('Запрос к API:', url);
    return this.http.get(url);
  }
}

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Добавлено
import { HttpClientModule } from '@angular/common/http'; // Добавлено


import { AppComponent } from './app.component';
import { ConverterComponent } from './components/converter/converter.component';

@NgModule({
declarations: [
AppComponent,
ConverterComponent
],
imports: [
BrowserModule,
FormsModule, // Добавлено
HttpClientModule // Добавлено
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

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

ng generate component components/converter

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

import { Component, OnInit } from '@angular/core';
import { CurrencyService } from '../../services/currency.service';

@Component({
  selector: 'app-converter',
  templateUrl: './converter.component.html',
  styleUrls: ['./converter.component.css']
})
export class ConverterComponent implements OnInit {

  rubAmount: number = 0;
  exchangeRates: any = {};
  convertedValues: any = {};
  currencyList = ['USD', 'EUR', 'CNY', 'JPY', 'INR'];

  constructor(private currencyService: CurrencyService) { }

  ngOnInit(): void {
    this.getRates();
  }

  getRates(): void {
    this.currencyService.getExchangeRates('RUB').subscribe(
      data => {
        this.exchangeRates = data.conversion_rates;
        console.log('Получены курсы обмена:', this.exchangeRates);
        this.convert(); // Вызов конвертации после получения курсов
      },
      error => {
        console.error('Ошибка при получении курсов обмена:', error);
      }
    );
  }

  convert(): void {
    console.log('Вызов convert() с rubAmount:', this.rubAmount);
    this.rubAmount = Number(this.rubAmount); // Приведение к числу
    if (this.exchangeRates) {
      this.convertedValues = {};
      for (let currency of this.currencyList) {
        const rate = this.exchangeRates[currency];
        if (rate) {
          this.convertedValues[currency] = this.rubAmount * rate;
          console.log(`Конвертация: ${this.rubAmount} RUB = ${this.convertedValues[currency]} ${currency}`);
        } else {
          console.warn(`Курс для ${currency} не найден.`);
        }
      }
    } else {
      console.warn('Курсы обмена не определены.');
    }
  }
}

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

<div class="converter-container">
  <h2>Конвертер рублей в иностранные валюты</h2>
  <div class="input-group">
    <label for="rubAmount">Сумма в рублях:</label>
    <input type="number" id="rubAmount" [(ngModel)]="rubAmount" (input)="convert()" placeholder="Введите сумму">
  </div>

  <div class="results" *ngIf="convertedValues">
    <h3>Результаты конвертации:</h3>
    <ul>
      <li *ngFor="let currency of currencyList">
        {{ currency }}: {{ convertedValues[currency] | number:'1.2-2' }}
      </li>
    </ul>
  </div>
</div>

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

.converter-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  margin-right: 10px;
}

.input-group input {
  width: 200px;
  padding: 5px;
}

.results ul {
  list-style-type: none;
  padding: 0;
}

.results li {
  margin: 5px 0;
}

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

<app-converter></app-converter>

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

ng serve

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

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

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

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

git --version

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

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

cd currency-converter

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

git init

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

git add .

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

git config --global user.name "Имя"
git config --global user.email "email@example.com"

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

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

git commit -m "Initial commit"

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

git remote add origin https://github.com/<ваш-логин>/<имя-репозитория>.git

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

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

git push -u origin master

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

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

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

git add .

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

git commit -m "Ваше сообщение коммита"

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

git push origin master

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

https://github.com/<ваш-логин>/<имя-репозитория>.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ng build

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

/dist/currency-converter/browser

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

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

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

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

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

После деплоя вы получите 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-приложений стало проще благодаря современным облачным платформам и инструментам автоматизации. А через наш инструмент Apps вы сможете задеплоить приложение в течение 5 минут.