Создание веб-приложения с использованием микрофронтендов и Module Federation
Привет! В данной статье мы разберём процесс разработки веб-приложения на основе подхода микрофронтендов с использованием технологии Module Federation.
Микрофронтенды – это подход в веб-разработке, при котором фронтенд разделяется на множество маленьких, автономных частей. Эти части разрабатываются разными командами, возможно, с использованием различных технологий, но в итоге они совместно функционируют как единое целое. Такой подход позволяет решать проблемы, связанные с большими приложениями, упрощает процесс разработки и тестирования, способствует использованию разнообразных технологий и улучшает возможности повторного использования кода.
Цель нашего проекта – создать банковское приложение, обладающее функциональностью для просмотра и редактирования банковских карт и транзакций.
Для реализации выберем AntdDesign, React.js в комбинации с Module Federation
На схеме представлена архитектура веб-приложения, использующего микрофронтенды с интеграцией через Module Federation. В вверху изображения находится Host, который является главным приложением (Main app) и служит контейнером для остальных микроприложений.
Существуют два микрофронтенда: Cards и Transactions, каждое из которых разработано отдельной командой и выполняет свои функции в рамках банковского приложения.
Также на схеме присутствует компонент Shared, который содержит общие ресурсы, такие как типы данных, утилиты, компоненты и прочее. Эти ресурсы импортируются как в Host, так и в микроприложения Cards и Transactions, что обеспечивает консистентность и переиспользование кода во всей экосистеме приложения.
Кроме того, здесь изображен Event Bus, который представляет собой механизм для обмена сообщениями и событиями между компонентами системы. Это обеспечивает общение между Host и микроприложениями, а также между самими микроприложениями, что позволяет им реагировать на изменения состояний.
Данная схема демонстрирует модульную и расширяемую структуру веб-приложения, что является одним из ключевых преимуществ подхода микрофронтендов. Это позволяет разрабатывать приложения, которые легче поддерживать, обновлять и масштабировать.
Мы организуем наши приложения внутри директории packages и настроим Yarn Workspaces, что позволит нам эффективно использовать общие компоненты из модуля shared между различными пакетами.
"workspaces": [
"packages/*"
],Module Federation, введённый в Webpack 5, позволяет различным частям приложения загружать код друг друга динамически. С помощью этой функции мы обеспечим асинхронную загрузку компонентов
Webpack-конфиг для host-приложения
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require('./package.json').dependencies;
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
// Остальная конфигурация Webpack, не связанная непосредственно с Module Federation
// ...
plugins: [
// Плагин Module Federation для интеграции микрофронтендов
new ModuleFederationPlugin({
remotes: {
// Определение удаленных микрофронтендов, доступных для этого микрофронтенда
'remote-modules-transactions': isProduction
? 'remoteModulesTransactions@https://microfrontend.fancy-app.site/apps/transactions/remoteEntry.js'
: 'remoteModulesTransactions@http://localhost:3003/remoteEntry.js',
'remote-modules-cards': isProduction
? 'remoteModulesCards@https://microfrontend.fancy-app.site/apps/cards/remoteEntry.js'
: 'remoteModulesCards@http://localhost:3001/remoteEntry.js',
},
shared: {
// Определение общих зависимостей между разными микрофронтендами
react: { singleton: true, requiredVersion: deps.react },
antd: { singleton: true, requiredVersion: deps['antd'] },
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
'react-redux': { singleton: true, requiredVersion: deps['react-redux'] },
axios: { singleton: true, requiredVersion: deps['axios'] },
},
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'), // Шаблон HTML для Webpack
}),
],
// Другие настройки Webpack
// ...
};Webpack-конфиг для приложения "Банковские карты"
const path = require('path');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const deps = require('./package.json').dependencies;
module.exports = {
// Остальная конфигурация Webpack...
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'), // Шаблон HTML для Webpack
}),
// Конфигурация Module Federation Plugin
new ModuleFederationPlugin({
name: 'remoteModulesCards', // Имя микрофронтенда
filename: 'remoteEntry.js', // Имя файла, который будет служить точкой входа для микрофронтенда
exposes: {
'./Cards': './src/root', // Определяет, какие модули и компоненты будут доступны для других микрофронтендов
},
shared: {
// Определение зависимостей, которые будут использоваться как общие между различными микрофронтендами
react: { requiredVersion: deps.react, singleton: true },
antd: { singleton: true, requiredVersion: deps['antd'] },
'react-dom': { requiredVersion: deps['react-dom'], singleton: true },
'react-redux': { singleton: true, requiredVersion: deps['react-redux'] },
axios: { singleton: true, requiredVersion: deps['axios'] },
},
}),
],
// Другие настройки Webpack...
};Теперь мы легко можем импортировать наши приложения в host-приложение.
import React, { Suspense, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Main } from '../pages/Main';
import { MainLayout } from '@host/layouts/MainLayout';
// Ленивая загрузка компонентов Cards и Transactions из удаленных модулей
const Cards = React.lazy(() => import('remote-modules-cards/Cards'));
const Transactions = React.lazy(() => import('remote-modules-transactions/Transactions'));
const Pages = () => {
return (
<Router>
<MainLayout>
{/* Использование Suspense для управления состоянием загрузки асинхронных компонентов */}
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path={'/'} element={<Main />} />
<Route path={'/cards/*'} element={<Cards />} />
<Route path={'/transactions/*'} element={<Transactions />} />
</Routes>
</Suspense>
</MainLayout>
</Router>
);
};
export default Pages;Далее для команды "Банковские карты" настроим Redux Toolkit
// Импортируем функцию configureStore из библиотеки Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';
// Импортируем корневой редьюсер
import rootReducer from './features';
// Создаем хранилище с помощью функции configureStore
const store = configureStore({
// Устанавливаем корневой редьюсер
reducer: rootReducer,
// Устанавливаем промежуточное ПО по умолчанию
middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});
// Экспортируем хранилище
export default store;
// Определяем типы для диспетчера и состояния приложения
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;// Импортируем React
import React from 'react';
// Импортируем главный компонент приложения
import App from '../app/App';
// Импортируем Provider из react-redux для связи React и Redux
import { Provider } from 'react-redux';
// Импортируем наше хранилище Redux
import store from '@modules/cards/store/store';
// Создаем главный компонент Index
const Index = (): JSX.Element => {
return (
// Оборачиваем наше приложение в Provider, передавая в него наше хранилище
<Provider store={store}>
<App />
</Provider>
);
};
// Экспортируем главный компонент
export default Index;В приложении должна быть система ролей
USER - может просматривать страницы,
MANAGER - имеет права на редактирование,
ADMIN - может редактировать и удалять данные.
Host-приложение отправляет запрос на сервер для получения информации о пользователе и сохраняет эти данные в своем хранилище. Необходимо изолированно получить эти данные в приложении "Банковские карты".
Для этого нужно написать middleware для Redux-стора host-приложения, чтобы сохранять данные в глобальный объект window
// Импортируем функцию configureStore и тип Middleware из библиотеки Redux Toolkit
import { configureStore, Middleware } from '@reduxjs/toolkit';
// Импортируем корневой редьюсер и тип RootState
import rootReducer, { RootState } from './features';
// Создаем промежуточное ПО, которое сохраняет состояние приложения в глобальном объекте window
const windowStateMiddleware: Middleware<{}, RootState> =
(store) => (next) => (action) => {
const result = next(action);
(window as any).host = store.getState();
return result;
};
// Функция для загрузки состояния из глобального объекта window
const loadFromWindow = (): RootState | undefined => {
try {
const hostState = (window as any).host;
if (hostState === null) return undefined;
return hostState;
} catch (e) {
console.warn('Error loading state from window:', e);
return undefined;
}
};
// Создаем хранилище с помощью функции configureStore
const store = configureStore({
// Устанавливаем корневой редьюсер
reducer: rootReducer,
// Добавляем промежуточное ПО, которое сохраняет состояние в window
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(windowStateMiddleware),
// Загружаем предварительное состояние из window
preloadedState: loadFromWindow(),
});
// Экспортируем хранилище
export default store;
// Определяем тип для диспетчера
export type AppDispatch = typeof store.dispatch;Вынесем константы в модуль shared
export const USER_ROLE = () => {
return window.host.common.user.role;
};Для синхронизации изменения роли пользователя между всеми микрофронтендами мы задействуем event bus. В модуле shared реализуем обработчики для отправки и приёма событий.
// Импортируем каналы событий и типы ролей
import { Channels } from '@/events/const/channels';
import { EnumRole } from '@/types';
// Объявляем переменную для обработчика событий
let eventHandler: ((event: Event) => void) | null = null;
// Функция для обработки изменения роли пользователя
export const onChangeUserRole = (cb: (role: EnumRole) => void): void => {
// Создаем обработчик событий
eventHandler = (event: Event) => {
// Приводим событие к типу CustomEvent
const customEvent = event as CustomEvent<{ role: EnumRole }>;
// Если в событии есть детали, выводим их в консоль и вызываем callback-функцию
if (customEvent.detail) {
console.log(`On ${Channels.changeUserRole} - ${customEvent.detail.role}`);
cb(customEvent.detail.role);
}
};
// Добавляем обработчик событий на глобальный объект window
window.addEventListener(Channels.changeUserRole, eventHandler);
};
// Функция для остановки прослушивания изменения роли пользователя
export const stopListeningToUserRoleChange = (): void => {
// Если обработчик событий существует, удаляем его и обнуляем переменную
if (eventHandler) {
window.removeEventListener(Channels.changeUserRole, eventHandler);
eventHandler = null;
}
};
// Функция для отправки события об изменении роли пользователя
export const emitChangeUserRole = (newRole: EnumRole): void => {
// Выводим в консоль информацию о событии
console.log(`Emit ${Channels.changeUserRole} - ${newRole}`);
// Создаем новое событие
const event = new CustomEvent(Channels.changeUserRole, {
detail: { role: newRole },
});
// Отправляем событие
window.dispatchEvent(event);
};Для реализации страницы редактирования банковской карты, на которой учтены роли пользователей, мы начнем с установления механизма подписки на событие обновления роли. Это позволит странице реагировать на изменения и адаптировать доступные функции редактирования в соответствии с текущей ролью пользователя.
import React, { useEffect, useState } from 'react';
import { Button, Card, List, Modal, notification } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { getCardDetails } from '@modules/cards/store/features/cards/slice';
import { AppDispatch } from '@modules/cards/store/store';
import { userCardsDetailsSelector } from '@modules/cards/store/features/cards/selectors';
import { Transaction } from '@modules/cards/types';
import { events, variables, types } from 'shared';
const { EnumRole } = types;
const { USER_ROLE } = variables;
const { onChangeUserRole, stopListeningToUserRoleChange } = events;
export const CardDetail = () => {
// Использование Redux для диспетчеризации и получения состояния
const dispatch: AppDispatch = useDispatch();
const cardDetails = useSelector(userCardsDetailsSelector);
// Локальное состояние для роли пользователя и видимости модального окна
const [role, setRole] = useState(USER_ROLE);
const [isModalVisible, setIsModalVisible] = useState(false);
// Эффект для загрузки деталей карты при монтировании компонента
useEffect(() => {
const load = async () => {
await dispatch(getCardDetails('1'));
};
load();
}, []);
// Функции для управления модальным окном
const showEditModal = () => {
setIsModalVisible(true);
};
const handleEdit = () => {
setIsModalVisible(false);
};
const handleDelete = () => {
// Отображение уведомления об удалении
notification.open({
message: 'Card delete',
description: 'Card delete success.',
onClick: () => {
console.log('Notification Clicked!');
},
});
};
// Эффект для подписки и отписки от событий изменения роли пользователя
useEffect(() => {
onChangeUserRole(setRole);
return stopListeningToUserRoleChange;
}, []);
// Условный рендеринг, если детали карты не загружены
if (!cardDetails) {
return <div>loading...</div>;
}
// Функция для определения действий на основе роли пользователя
const getActions = () => {
switch (role) {
case EnumRole.admin:
return [
<Button key="edit" type="primary" onClick={showEditModal}>
Edit
</Button>,
<Button key="delete" type="dashed" onClick={handleDelete}>
Delete
</Button>,
];
case EnumRole.manager:
return [
<Button key="edit" type="primary" onClick={showEditModal}>
Edit
</Button>,
];
default:
return [];
}
};
// Рендеринг компонента Card с деталями карты и действиями
return (
<>
<Card
actions={getActions()}
title={`Card Details - ${cardDetails.cardHolderName} `}
>
{/* Отображение различных атрибутов карты */}
<p>PAN: {cardDetails.pan}</p>
<p>Expiry: {cardDetails.expiry}</p>
<p>Card Type: {cardDetails.cardType}</p>
<p>Issuing Bank: {cardDetails.issuingBank}</p>
<p>Credit Limit: {cardDetails.creditLimit}</p>
<p>Available Balance: {cardDetails.availableBalance}</p>
{/* Список последних транзакций */}
<List
header={<div>Recent Transactions</div>}
bordered
dataSource={cardDetails.recentTransactions}
renderItem={(item: Transaction) => (
<List.Item>
{item.date} - {item.amount} {item.currency} - {item.description}
</List.Item>
)}
/>
<p>
<b>*For demonstration events from the host, change the user role.</b>
</p>
</Card>
{/* Модальное окно для редактирования */}
<Modal
title="Edit transactions"
open={isModalVisible}
onOk={handleEdit}
onCancel={() => setIsModalVisible(false)}
>
<p>Form edit card</p>
</Modal>
</>
);Для настройки развертывания приложения через GitHub Actions, создадим файл конфигурации .yml, который определяет рабочий процесс CI/CD. Вот пример простого конфига:
name: Build and Deploy Cards Project
# Этот workflow запускается при событиях push или pull request,
# но только для изменений в директории 'packages/cards'.
on:
push:
paths:
- 'packages/cards/**'
pull_request:
paths:
- 'packages/cards/**'
# Определение задач (jobs) для выполнения
jobs:
# Первая задача: Установка зависимостей
install-dependencies:
runs-on: ubuntu-latest # Задача выполняется на последней версии Ubuntu
steps:
- uses: actions/checkout@v2 # Выполняет checkout кода репозитория
- name: Set up Node.js # Устанавливает Node.js версии 16
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Cache Node modules # Кэширование Node модулей для ускорения сборки
uses: actions/cache@v2
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
- name: Install Dependencies # Установка зависимостей проекта через Yarn
run: yarn install
# Вторая задача: Тестирование и сборка
test-and-build:
needs: install-dependencies # Эта задача требует завершения задачи install-dependencies
runs-on: ubuntu-latest # Запускается на последней версии Ubuntu
steps:
- uses: actions/checkout@v2 # Выполняет checkout кода репозитория
- name: Use Node.js # Использует Node.js версии 16
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Cache Node modules # Кэширование Node модулей
uses: actions/cache@v2
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
- name: Build Shared Modules # Сборка общих модулей
run: yarn workspace shared build
- name: Test and Build Cards # Тестирование и сборка workspace Cards
run: |
yarn workspace cards test
yarn workspace cards build
- name: Archive Build Artifacts # Архивация артефактов сборки для развертывания
uses: actions/upload-artifact@v2
with:
name: shared-artifacts
path: packages/cards/dist
# Третья задача: Развертывание Cards
deploy-cards:
needs: test-and-build # Эта задача требует завершения задачи test-and-build
runs-on: ubuntu-latest # Запускается на последней версии Ubuntu
steps:
- uses: actions/checkout@v2 # Выполняет checkout кода репозитория
- name: Use Node.js # Использует Node.js версии 16
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Cache Node modules # Кэширование Node модулей
uses: actions/cache@v2
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
- name: Download Build Artifacts # Скачивание артефактов сборки из предыдущей задачи
uses: actions/download-artifact@v2
with:
name: shared-artifacts
path: ./cards
- name: Deploy to Server # Развертывание артефактов на сервере с помощью SCP
uses: appleboy/scp-action@master
with:
host: ${{ secrets.HOST }}
username: root
key: ${{ secrets.SSH_PRIVATE_KEY }}
source: 'cards/*'
target: '/usr/share/nginx/html/microfrontend/apps'На скриншоте представлено распределение собранных бандлов. Здесь мы можем добавить такие функции, как версионирование и A/B-тестирование, управляя ими через Nginx.
В итоге, у нас получается система, где каждая команда, работающая над разными модулями имеет свое приложение в структуре микрофронтенда.
Этот подход ускоряет процесс сборки, так как больше не требуется ожидать проверки всего приложения. Код можно обновлять по частям и проводить регрессивное тестирование для каждого отдельного компонента.
Также значительно уменьшается проблема с конфликтами слияния (мердж-конфликтами), поскольку команды работают над различными частями проекта независимо друг от друга. Это повышает эффективность работы команд и упрощает процесс разработки в целом.
Тестовый стенд для демонстрации функционала и исходный код в GitHub репозитории.
Спасибо за внимание)