okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

企业级应用开发

2024/9/22

微前端架构 是企业级应用开发中一个重要的趋势，它将大型应用划分为多个独立的子应用，由不同的团队进行开发、部署和维护。每个子应用都可以独立更新和部署，彼此之间通过松散耦合的方式集成，这种架构可以极大提升团队协作和开发效率。

在微前端架构中，React 是一种常见的前端框架，因其组件化设计和与微前端模式的良好兼容性，广泛应用于企业级应用开发中。

下面将详细介绍 微前端原理及实现，模块/目录划分，以及 微前端架构的搭建。

1. 微前端架构的原理

什么是微前端？

微前端（Micro Frontends）是将大型前端应用拆分为多个更小、更独立的前端应用，每个应用可以由不同的技术栈、团队负责开发。它类似于后端的微服务架构，但应用在前端层面上。微前端架构的核心目标是提高可维护性、可扩展性以及开发效率。

微前端架构的主要概念：

  • 子应用：多个独立的前端应用，每个应用可以独立开发、测试、部署和更新。子应用可以使用不同的前端框架（例如 React、Vue 或 Angular）。
  • 主应用：负责集成各个子应用，并提供统一的入口、路由以及共享的状态管理。
  • 路由隔离：每个子应用的路由都是独立的，但由主应用进行控制和统一管理。
  • 独立部署：每个子应用可以独立发布，而不需要重新部署整个系统。

2. 微前端的实现方式

微前端的实现有多种方式，常见的有以下几种：

1. iFrame 实现

iFrame 是一种较早的微前端实现方式，通过将子应用嵌入到主应用的 iFrame 标签中。尽管 iFrame 实现简单，但它带来了一些局限性，例如跨域问题、共享状态和通信复杂性，以及 UI 的统一风格难以维护。因此，现代微前端架构中 iFrame 逐渐被淘汰。

2. Web Components

Web Components 是原生 JavaScript 提供的组件化标准，能够在不同的前端框架之间实现组件复用。在微前端架构中，每个子应用可以打包为一个 Web Component，主应用通过 Web Components 进行集成。这种方式适合异构技术栈的微前端项目。

3. 单页应用中的微前端（Single SPA）

Single SPA 是一种流行的微前端框架，它允许你将多个子应用集成在一个单页应用中。Single SPA 通过将路由、应用生命周期等核心逻辑抽象出来，实现各个子应用的无缝集成。

Single SPA 核心功能：

  • 生命周期管理：每个子应用可以注册 mount、unmount、bootstrap 等生命周期钩子，保证应用的启动和销毁有序进行。
  • 路由管理：基于路由规则加载不同的子应用。
  • 技术栈无关：支持不同的前端框架同时存在，例如在一个微前端系统中，主应用使用 React，子应用可以是 Vue 或 Angular。

3. 微前端架构的具体实现

项目结构和模块划分

假设我们使用 Single SPA 来构建微前端架构的企业级应用，项目结构可以参考以下设计：

bash
my-microfrontend-app/
├── main-app/                 # 主应用
│   ├── src/
│   │   ├── App.js            # 主应用入口
│   │   ├── routes.js         # 路由配置
│   │   └── store.js          # 全局状态管理
│   └── public/
├── app1/                     # 子应用1
│   ├── src/
│   │   ├── App.js            # 子应用入口
│   │   └── components/       # 子应用组件
├── app2/                     # 子应用2
│   ├── src/
│   │   ├── App.js            # 子应用入口
│   │   └── components/       # 子应用组件
└── shared/                   # 共享模块
    ├── components/           # 共享组件
    └── utils/                # 共享工具函数

Single SPA 基础配置

安装 Single SPA

bash
npx create-single-spa

选择创建 root-config 来配置主应用，之后为每个子应用创建相应的配置文件。

主应用（main-app）配置

js
// main-app/src/routes.js
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: ['/app1'],
});

registerApplication({
  name: 'app2',
  app: () => System.import('app2'),
  activeWhen: ['/app2'],
});

start();

子应用（app1）导出生命周期方法

js
// app1/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render() {
  ReactDOM.render(<App />, document.getElementById('app1-root'));
}

export const bootstrap = () => Promise.resolve();
export const mount = () => Promise.resolve().then(render);
export const unmount = () => Promise.resolve().then(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('app1-root'));
});

通过这种方式，主应用控制子应用的挂载和卸载，并根据路由进行切换和渲染。

4. 微前端架构中的 CI/CD 工具链

持续集成与部署工具链

在微前端架构中，每个子应用可以独立开发和部署。因此，建立合理的 CI/CD（持续集成与部署）流程非常关键。常用的 CI/CD 工具有 GitHub Actions、Jenkins、CircleCI 等。

GitHub Actions 的使用示例：

  • 子应用的自动化构建与部署：可以为每个子应用单独创建 GitHub Action 文件，设置不同的构建和部署步骤。
yaml
# .github/workflows/app1.yml
name: Deploy App1

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        run: echo "Deploying app1 to server"
  • 主应用的 CI/CD 流程：可以为主应用配置一个 CI/CD 流程，确保主应用的每次更新都会触发自动化的构建与部署。

Jenkins 配置示例：

Jenkins 是另一种常见的 CI/CD 工具，支持更复杂的流水线配置。可以通过 Pipeline as Code 的方式实现自动化构建和部署：

groovy
pipeline {
    agent any
    stages {
        stage('Checkout') {
            steps {
                git url: 'https://github.com/myorg/main-app.git'
            }
        }
        stage('Install Dependencies') {
            steps {
                sh 'npm install'
            }
        }
        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                sh 'scp -r ./build user@server:/var/www/main-app'
            }
        }
    }
}

5. Docker 与容器化部署 React 应用

微前端应用可以通过 Docker 容器化来部署，保证各个子应用独立运行，并简化依赖管理和环境配置。

Docker 化 React 应用的步骤：

  1. 创建 Dockerfile：
dockerfile
# 使用 Node.js 作为基础镜像
FROM node:14

# 设置工作目录
WORKDIR /app

# 复制项目文件到容器中
COPY . .

# 安装依赖
RUN npm install

# 构建项目
RUN npm run build

# 使用 nginx 作为静态服务器
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html

# 暴露端口
EXPOSE 80

# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]
  1. 构建和运行容器：
bash
docker build -t my-react-app .
docker run -p 80:80 my-react-app

通过 Docker，可以将 React 应用打包成容器，确保在不同的环境中拥有一致的运行效果。

总结

  • 微前端架构 通过将大型应用拆分为多个独立的子应用，提升了应用的可维护性和团队协作效率。
  • Single SPA 是实现微前端的一种流行方案，能够轻松管理多个前端应用的生命周期和路由。
  • 使用 GitHub Actions 或 Jenkins 等 CI/CD 工具，可以自动化构建、测试和部署流程。
  • Docker 提供了容器化解决方案，帮助微前端应用实现更为简洁的部署流程。

这种架构能够帮助企业级应用在持续迭代的过程中保持高效的开发和交付。