Современная разработка требует не только инструментов для создания интерфейсов, но и простых решений для их развертывания. Angular от Google — популярный фреймворк для создания приложений. Он использует TypeScript и облегчает работу с компонентами, директивами и модулями.
Когда приложение готово, нужно его развернуть. Многим разработчикам сложно настроить серверы и оптимизировать код. Облачные сервисы и платформы для автоматического деплоя помогают упростить этот процесс.
В этой инструкции мы рассмотрим, как создать приложение на Angular и развернуть его. Мы пройдем все этапы: от установки Angular и создания проекта до деплоя на облачной платформе.
Вы узнаете, как настроить окружение для разработки, управлять зависимостями и использовать команды Angular CLI. В конце мы покажем, как развернуть приложение в облаке без лишних сложностей.
Angular — это популярный фреймворк от Google для приложений. Он помогает создавать динамические приложения с интерактивными интерфейсами и управлять состоянием. Angular удобен для масштабирования кода и работы с большими проектами.
Фреймворк появился в 2010 году как AngularJS. В 2016 году его полностью переписали, и теперь он называется просто Angular. Обновление улучшило производительность и удобство для разработчиков. Angular поддерживает компоненты, что делает код модульным и переиспользуемым.
Вот основные преимущества Angular:
Модульность. Приложение делится на модули. Это упрощает разработку и поддержку, особенно для масштабируемых проектов.
Поддержка TypeScript. Angular использует TypeScript для написания надежного и читаемого кода благодаря строгой типизации.
Инструменты для разработки. Angular CLI облегчает создание и настройку проектов.
Фреймворк отлично подходит для создания сложных и масштабируемых приложений. Он справляется с задачами, требующими сложного взаимодействия с пользователями, поддержки разных устройств и высокой производительности.
Для начала работы с 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.
Создадим простое приложение на 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.
git --version
Если команда отработала корректно, вы увидите номер версии Git.
cd currency-converter
git init
git add .
git config --global user.name "Имя"
git config --global user.email "email@example.com"
Эти команды сохранят информацию на глобальном уровне (для всех репозиториев). Если хотите настроить только для конкретного репозитория, уберите --global
.
git commit -m "Initial commit"
git remote add origin https://github.com/<ваш-логин>/<имя-репозитория>.git
Замените <ваш-логин>
на ваш логин на GitHub, а <имя-репозитория>
— на имя репозитория, которое вы указали при создании.
git push -u origin master
Если в будущем вы будете вносить изменения в проект, вам нужно будет каждый раз добавлять, коммитить и отправлять изменения.
git add .
git commit -m "Ваше сообщение коммита"
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 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 минут.