微前端，助力云原生时代的高效协作

前端

2023-09-30 20:53:51

在云原生时代，微前端技术因其模块化、独立部署、低耦合的特点，逐渐成为业界前端开发的宠儿。微前端将前端应用分解为多个可独立开发、部署和维护的小型前端模块，极大地提升了前端项目的迭代效率和敏捷性。

本文将以qiankun作为微前端框架，结合docker容器技术、nginx作为网关和gitlab-ci/cd作为持续集成/持续交付工具，构建一个从开发、构建、测试到部署的全流程自动化微前端项目。通过这个项目，读者将学习到以下内容：

如何使用qiankun构建微前端应用
如何使用docker容器化微前端应用
如何使用nginx作为微前端应用的网关
如何使用gitlab-ci/cd实现微前端应用的自动化部署

前端架构的演进与微前端的崛起

单体前端架构的局限性

随着互联网应用的复杂度不断提升，前端代码量也随之激增。单体前端架构下，所有前端代码都耦合在一起，这使得前端项目变得难以维护和扩展。单体前端架构还存在以下局限性：

代码臃肿，难以维护。 随着前端代码量的增加，单体前端应用的代码库变得臃肿，维护起来非常困难。
扩展性差，难以复用。 单体前端应用很难扩展，因为任何改动都会影响到整个应用。而且，单体前端应用的代码很难复用，因为它们通常是紧耦合的。
难以进行持续集成和持续交付。 单体前端应用很难进行持续集成和持续交付，因为每次改动都会影响到整个应用。这使得单体前端应用的发布周期很长，难以快速响应业务需求。

微前端架构的优势

微前端架构是解决单体前端架构局限性的有效方法。微前端架构将前端应用分解为多个可独立开发、部署和维护的小型前端模块，每个模块都有自己的代码库和构建流程。微前端架构具有以下优势：

模块化，易于维护和扩展。 微前端应用由多个小型前端模块组成，每个模块都有自己的代码库和构建流程。这使得微前端应用易于维护和扩展，因为开发人员可以独立地开发和维护各个模块。
复用性高，提高开发效率。 微前端应用的模块可以复用，这可以提高开发效率。当需要开发一个新的前端应用时，开发人员可以复用现有的微前端模块，而无需从头开始开发。
易于进行持续集成和持续交付。 微前端应用易于进行持续集成和持续交付，因为每个模块都有自己的代码库和构建流程。这使得微前端应用的发布周期很短，可以快速响应业务需求。

微前端与qiankun

qiankun是一个开源的微前端框架，可以帮助开发人员构建微前端应用。qiankun具有以下特点：

简单易用。 qiankun的API简单易用，开发人员可以快速上手。
功能强大。 qiankun提供了丰富的功能，可以满足微前端应用开发的各种需求。
社区活跃。 qiankun的社区非常活跃，开发人员可以在这里获得各种帮助。

Docker容器技术简介

Docker是一个开源的容器引擎，可以帮助开发人员打包和运行应用程序。Docker容器具有以下特点：

轻量级。 Docker容器非常轻量级，启动速度快，占用资源少。
可移植性强。 Docker容器可以移植到任何支持Docker的平台上。
隔离性强。 Docker容器相互隔离，不会相互影响。

Nginx简介

Nginx是一个开源的web服务器，可以作为微前端应用的网关。Nginx具有以下特点：

高性能。 Nginx的性能非常高，可以处理大量的并发请求。
稳定性强。 Nginx非常稳定，可以长时间稳定运行。
功能强大。 Nginx提供了丰富的功能，可以满足微前端应用开发的各种需求。

Gitlab-ci/cd简介

Gitlab-ci/cd是一个开源的持续集成/持续交付工具，可以帮助开发人员实现自动化部署。Gitlab-ci/cd具有以下特点：

简单易用。 Gitlab-ci/cd的配置非常简单，开发人员可以快速上手。
功能强大。 Gitlab-ci/cd提供了丰富的功能，可以满足持续集成/持续交付的各种需求。
社区活跃。 Gitlab-ci/cd的社区非常活跃，开发人员可以在这里获得各种帮助。

微前端、qiankun、docker、nginx和gitlab-ci/cd结合构建自动化部署微前端项目实战

项目初始化

mkdir micro-frontend-project
cd micro-frontend-project

安装qiankun

npm install qiankun

创建微前端应用

mkdir apps
cd apps
mkdir app1
mkdir app2

在每个微前端应用中安装qiankun

cd app1
npm install qiankun
cd ../app2
npm install qiankun

在每个微前端应用中创建入口文件

cd app1
touch index.js
cd ../app2
touch index.js

在每个微前端应用中编写入口文件

// app1/index.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#app1',
  },
]);

start();

// app2/index.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app2',
    entry: '//localhost:3002',
    container: '#app2',
  },
]);

start();

在每个微前端应用中启动开发服务器

cd app1
npm start
cd ../app2
npm start

安装docker

curl -fsSL https://get.docker.com | sh

安装nginx

sudo apt-get update
sudo apt-get install nginx

配置nginx

sudo nano /etc/nginx/sites-available/default

server {
  listen 80;
  server_name localhost;

  location /app1 {
    proxy_pass http://localhost:3001;
  }

  location /app2 {
    proxy_pass http://localhost:3002;
  }
}

重新启动nginx

sudo service nginx restart

安装gitlab-ci/cd

sudo apt-get update
sudo apt-get install gitlab-ci-multi-runner

配置gitlab-ci/cd

sudo nano /etc/gitlab-ci/config.toml

[[runners]]
  name = "my-runner"
  url = "http://localhost:3001"
  token = "my-secret-token"
  executor = "docker"
  builds_dir = "/builds"

重启gitlab-ci/cd

sudo service gitlab-ci-multi-runner restart

创建gitlab-ci/cd配置文件

touch .gitlab-ci.yml

image: node:16

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build

test:
  stage: test
  script:
    - npm test

deploy:
  stage: deploy
  script:
    - docker build -t micro-frontend-app .
    - docker push micro-frontend-app
    - kubectl apply -f deployment.yaml

将项目推送到gitlab

git init
git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/my-username/micro-frontend-project.git
git push -u origin master