Створення хмарного трекера витрат - javascript.org.ua

Чому я почав і створив цей проєкт?

Ручне відстеження витрат може бути виснажливим, тому я вирішив створити веб-додаток для відстеження витрат, щоб спростити цей процес.
У цьому проєкті я створив повний стек трекера витрат, використовуючи React для фронтенду, Azure Functions для бекенду та Azure Static Web Apps для хостингу.

Структура проєкту

Фронтенд —

Створений з React для створення адаптивного інтерфейсу користувача.
Обробляє введення користувача для реєстрації та візуалізації витрат.
Розгорнутий за допомогою Azure Static Web Apps.

Бекенд —

Безсерверна архітектура на базі Azure Functions.
Надає REST API для:
- Отримання витрат.
- Додавання даних про витрати.
- Видалення даних про витрати.
- Генерації графіків для візуалізації.

База даних —

Azure Cosmos DB для масштабованого та гнучкого зберігання даних.
Зберігає записи витрат з полями, такими як опис і сума.

Інфраструктура як код (IaC) —

За допомогою Terraform я автоматизував надання ресурсів Azure, таких як Azure Functions, Cosmos DB, Service Plan, Storage Account і Static Web App.
Це особливо корисно для структуризації налаштувань для ресурсів Azure та інших хмарних провайдерів з Terraform.

Деплоймент —

Налаштований CI/CD пайплайн за допомогою GitHub Actions.
Автоматизує процеси створення, тестування та деплойменту фронтенду і бекенду.

Використані технології —

Фронтенд: React, tailwind CSS, Chart.js
Бекенд: Azure Functions (Node.js)
База даних: Azure Cosmos DB
IaC: Terraform
CI/CD: GitHub Actions

Процес розробки

Крок I: Розробка фронтенду

Розробив статичний вебсайт за допомогою React та Chart.js (для Doughnut Chart).
Функції включають:

Відображення балансу, доходу та витрат.
Візуалізація доходу та витрат у вигляді Doughnut Chart.
Відображення попередніх транзакцій.
Додавання нової транзакції.
Видалення транзакції.

Фронтенд трекера витрат

Наразі транзакції захардкожені. Пізніше, коли ми інтегруємо застосунок з Azure Functions і CosmosDB в Azure, він буде отримувати транзакції з Azure та відображати їх у React застосунку.

Крок 2: Створення Azure CosmosDB за допомогою Terraform

Автоматизація створення Azure CosmosDB за допомогою Terraform (IaC):

Встановіть Terraform та авторизуйтесь у Azure за допомогою az login або Service Principal.
Налаштування робочого каталогу: створіть та організуйте файли Terraform.
Оголосіть змінні: використовуйте файл variables.tf для повторного використання.
Налаштування CosmosDB: налаштуйте NoSQL API в файлах Terraform.
Розгортання ресурсів:

Використовуйте команду terraform init, щоб ініціалізувати Terraform.
Використовуйте команду terraform plan, щоб переглянути зміни.
Виконайте команду terraform apply, щоб розгорнути CosmosDB. Підтвердіть, коли буде запитано.

Створення CosmosDB за допомогою Terraform

Перевірте створення ресурсу в Azure.

Крок 3: Інтеграція API бекенду з Azure Functions і CosmosDB

Налаштування Azure Functions:

Встановіть інструменти для Azure Functions:

npm install -g azure-functions-core-tools@4 --unsafe-perm true

Ініціалізуйте проєкт:

func init --worker-runtime node

**2.
Створення API:

Додати функції з HTTP тригером:

func new

Реалізувати API, такі як AddExpense, GetExpenses і DeleteExpense.

API AddExpense

API GetExpenses

API DeleteExpense

‘X’ для видалення транзакції

Транзакції, збережені в CosmosDB

Видалення конкретної транзакції

Транзакція з квитком на фільм була видалена

3. Підключення до CosmosDB:

Використовувати наявний екземпляр CosmosDB.
Додати COSMOS_DB_CONNECTION_STRING у local.settings.json.

4. Деплой на Azure:

Увійдіть в Azure CLI:

az login

Деплойте функції:

func azure functionapp publish

5. Тестування API:

Тестуйте локально за допомогою:

func start

Використовуйте інструменти, такі як Postman, для подальшого тестування.

6. Примітки з інтеграції:

Виправте проблеми з CORS, додавши локальну адресу React у local.settings.json.
Виправте помилки з неавторизованим ключем, використовуючи основний ключ замість рядка підключення.
Інтегруйте фронтенд і бекенд API за допомогою Axios у React для отримання транзакцій.

Крок 4: Деплой бекенд API на Azure Functions

Деплой за допомогою Terraform:
Автоматизуйте створення Azure Functions, Azure Storage Account і Azure Service Plan за допомогою Terraform.
Виправлення проблем з деплойментом:

Проблема з `FUNCTIONSWORKERRUNTIME`

Виправте помилки з FUNCTIONS_WORKER_RUNTIME, оновивши середовище за допомогою таких команд:

az functionapp config appsettings set --resource-group expense-tracker --name expense-tracker-functions --settings FUNCTIONS_WORKER_RUNTIME=node

az functionapp restart --resource-group expense-tracker --name expense-tracker-functions

az functionapp config appsettings list --resource-group expense-tracker --name expense-tracker-functions

3. Деплой через Azure CLI:

Деплойте Azure Functions за допомогою:

func azure functionapp publish

4. Функціональність:
Реалізуйте API для додавання, видалення та отримання транзакцій з CosmosDB, з’єднуючи фронтенд React з базою даних.

Крок 5: Деплой фронтенду React через Azure Static Web Apps

Підготовка React App:

Перейдіть до директорії вашого проєкту React:

cd /path/to/your/react-app

Створіть продакшн-білд:

npm run build

2. Деплой через Azure Storage:

Увімкніть хостинг статичного сайту в обліковому записі Azure Storage.
Завантажте файли білду React у контейнер $web.
Доступ до статичного сайту через URL облікового запису Storage.

**3.
Деплой з використанням Azure Static Web Apps:

Створіть статичний веб-додаток за допомогою Terraform або інтерфейсу Azure UI.
Примітка: для Terraform використовуйте sku_tier і sku_size як "Standard", щоб уникнути помилок.
Використовуючи Azure UI, зв’яжіть додаток з репозиторієм GitHub для автоматичного деплойменту через GitHub Actions.

4. Доступ до деплойнутого додатка:

Використовуйте URL зі сторінки огляду Azure Static Web App для перегляду хостингу вебсайту.

Крок 6: Автоматизація CI/CD за допомогою GitHub Actions

GitHub Actions для CI/CD:

Автоматично будує та тестує React (фронтенд) і Azure Functions (бекенд) при пуші коду.
Деплойте React додаток на Azure Static Web Apps і бекенд на Azure Function App після успішного білду.

2. Інтеграція Static Web App з GitHub:

Зв'язування Static Web App з GitHub автоматично генерує файл .yaml.
Додайте azure_static_web_apps_api_token як секрет в GitHub > Settings > Secrets & Variables.

3. Оновлення файлу .yaml:

Вкажіть шляхи:

app_location: "./frontend/react"   
api_location: "./backend/src/functions"   
output_location: "dist"

Закомітьте і запуште зміни для автоматизації.

Для розширеної версії статті ви можете відвідати мій акаунт на GitHub @github.com

Перекладено з: Building a Cloud-Hosted Expense Tracker