Mise en œuvre d'une architecture Micro-frontends avec qiankun

Le framework qiankun s'est imposé comme une solution robuste pour pallier les limitations classiques des iframe dans les architectures micro-frontends. Contrairement aux iframes, qui souffrent de problèmes de synchronisation d'URL, de perte d'état au rafraîchissement et d'une gestion complexe de l'historique de navigation, qiankun offre une intégration fluide et performante.

Configuration de l'Application Hôte (Main)

Pour mettre en place le conteneur principal, commencez par créer un répertoire dédié contenant les fichiers essentiels : index.html, app.js, package.json et webpack.config.js.

1. Définition des dépendances

Le fichier package.json doit inclure les outils de build et les bibliothèques nécessaires au fonctionnement de l'application hôte.

{
  "name": "orchestrateur-micro-frontend",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.21.0",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.76.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "qiankun": "^2.10.0"
  }
}

2. Configuration de Webpack

La configuration de Webpack pour l'hôte doit permettre la gestion de l'historique de navigation (History API) et autoriser les requêtes cross-origin pour charger les ressources des micro-applications.

const HTMLPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './app.js',
  mode: 'development',
  devServer: {
    port: 8080,
    open: true,
    historyApiFallback: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    client: {
      overlay: { errors: true, warnings: false }
    }
  },
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HTMLPlugin({
      template: './index.html'
    })
  ]
};

3. Structure de la page d'accueil

L'application hôte définit des points d'entrée de navigation et une zone cible (un conteneur DOM) où les micro-applications seront injectées dynamiquement.


<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Portail Micro-Frontend</title>
  <style>
    nav { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding: 10px; }
    nav a { margin-right: 15px; text-decoration: none; color: blue; }
    #view-container { padding: 20px; min-height: 500px; border: 1px dashed #aaa; }
  </style>
</head>
<body>
  <nav>
    <a href="/module-react">Module React</a>
    <a href="/module-vue">Module Vue</a>
  </nav>
  <!-- Zone de rendu pour les micro-apps -->
  <section id="view-container"></section>
</body>
</html>

4. Enregistrement des micro-applications

Dans le fichier app.js, nous utilisons les fonctions registerMicroApps et start de qiankun pour lier les URLs aux instances distantes.

import { registerMicroApps, start } from 'qiankun';

const apps = [
  {
    name: 'app-react-service',
    entry: '//localhost:3001',
    container: '#view-container',
    activeRule: '/module-react',
  },
  {
    name: 'app-vue-service',
    entry: '//localhost:3002',
    container: '#view-container',
    activeRule: '/module-vue',
  }
];

registerMicroApps(apps);

// Initialisation du framework
start({
  sandbox: { strictStyleIsolation: true }
});

Avantages et Fonctionnement

Une fois l'application hôte lancée, elle agit comme un orchestrateur. Les micro-applications peuvent être développées avec des piles technologiques totalemant différentes (React, Vue, Engular, ou même jQuery) sans interférer les unes avec les autres.

L'un des atouts majeurs de qiankun réside dans sa capacité à faciliter la communication entre applications. Grâce aux API fournies, il est possible de partager un état global, tel qu'un jeton d'authentification (Token). Cela permet de réaliser un Single Sign-On (SSO) transparent : une fois l'utilisateur connecté via un module, les autres micro-applications récupèrent l'identité sans nécessiter de reconnexion.

Pour chaque micro-application esclave, il est nécessaire d'exposer des cycles de vie (bootstrap, mount, unmount) afin que l'hôte puisse les piloter correctement lors du changement de route.

Étiquettes: Micro-frontends qiankun webpack JavaScript architecture

Publié le 17 juillet à 23h48

L'Atelier Monstre