Webpack Module Federation pro produkční prostředí

Webpack Module federation je opravdu pěkný kus technologie pro oddělení vašich nastavení mikrofrontendů s dynamickým rozlišením sdíleného kódu. Všechny nástrahy externích webpacků jsou pryč.

Ale vidím spoustu problematických příkladů, jak nastavit ModuleFederation s hračkami, které nefungují pro produkční prostředí, nebo ještě hůř, hackerskými řešeními, kterým nikdo neporozumí, aniž by porozuměl webpacku arkanes.
Zde na dev.to zkontrolujte toto. I označená aktualizace se slibným příkladem od samotného autora MF je problematické nastavení.

Je to problematické, protože tato nastavení nejsou agnostická pro adresy URL webových stránek nebo se spoléhají na hacky za běhu, aby vložily vaše integrační / pracovní / produkční adresy URL. Tato nastavení se neškálují, i když tvrdí, že tak činí.

Zde ukážu příklad bezproblémového nastavení, které nevyžaduje hacky nebo konfigurace za běhu.

Jednoduchý configure once, build once, deploy everywhere založit.
Zní to jako kouzlo, že? Pojďme se ponořit.

Architektura

První věc, které byste si měli všimnout, je, že vše je za stejnou doménou URL. Takže první doporučení tohoto nastavení je:

• Umístěte svůj web za jednu a pouze jednu doménu URL.
  • Žádná noční můra konfigurace CORS.
  • Skryje vaši vnitřní architekturu před koncovým uživatelem. vaši uživatelé by neměli mít tušení, že váš web je rozdělen do mikrofrontendů.
  • Zjednodušuje konfiguraci webového balíčku pomocí federace modulů.

Chcete-li před uživatelem skrýt svou vnitřní architekturu, použijte reverzní proxy. Může to být jakákoli technologie, jako je Nginx, Kong, HaProxy, kubernetes ingress, ...

Z jedné domény na agnostické nastavení URL

Jak toto nastavení zjednodušuje konfiguraci webpacku pomocí federace modulů?

Někteří z vás to už možná vědí. Je to stejné doporučení, které jste vždy říkali vývojářům frontendu. Takže zde je druhé doporučení pro toto nastavení:

• Pro adresy URL vlastních webových stránek používejte adresy URL relavite. Adresy URL domén používejte pouze pro externí webové stránky.
  • adresa URL domény:https://domain/mfe-1
  • relavite URL:/mfe-1

Takže je to opravdu tak jednoduché. Module Federation je webpack a webpack podporuje nastavení relativní adresy URL.
Pomocí relativní adresy URL nebudete muset nikde konfigurovat doménu webu a budete ji moci nasadit všude. Stejné sestavení, nasazené ve vašem integračním, pracovním a produkčním prostředí.

Příklad konfigurace webového balíčku pro hostitele

Zde je tedy webpack.config.js příklad pro vašeho hostitele používajícího pouze relativní URL. Žádná zakódovaná doména. Důležité části jsou v:

• atribut 'publicPath', který by měl používat relativní adresu URL,
• Vlastnost 'remotes' v nastavení ModuleFederation, která by měla také používat relativní adresu URL

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require('./package.json').dependencies;
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: '<path to your local host index.js>',
  cache: false,
  devtool: false,
  optimization: {
    minimize: true,
  },
  output: {
    // you could use 'auto', but 'auto' does not work with ie11, it's better to use relative url anyway.
    publicPath: '/',
    clean: true,
    pathinfo: false,
    path: buildPath,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'swc-loader',
        options: {
          cacheDirectory: true,
        },
      },
    ],
  },
    : [
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            // relative URL
            mfe_1: 'mfe_1@/mfe-1/remoteEntry.js',
            mfe_2: 'mfe_2@/mfe-2/remoteEntry.js',
          },
          shared: {
            ...deps,
          },
        }),
        new HtmlWebpackPlugin({
          template: 'index.html',
          inject: 'body',
          hash: true,
          minify: true,
        }),
      ],
};

Příklad konfigurace webového balíčku pro mikrofrontend

Zde je tedy webpack.config.js příklad pro váš Micro-frontend používající pouze relativní URL. Žádná zakódovaná doména. Důležité části jsou v:

• atribut 'publicPath', který by měl používat relativní adresu URL,

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require('./package.json').dependencies;
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: '<path to your local mfe index.js>',
  cache: false,
  devtool: false,
  optimization: {
    minimize: true,
  },
  output: {
    // relative URL
    publicPath: '/mfe-1/',
    clean: true,
    pathinfo: false,
    path: buildPath,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'swc-loader',
        options: {
          cacheDirectory: true,
        },
      },
    ],
  },
  plugins: [
        new ModuleFederationPlugin({
          name: 'mfe_1',
          filename: 'remoteEntry.js',
          library: { type: 'var', name: 'mfe_1' },
          remotes: {},
          exposes: {
            './view1': '<path to your local view js>',
          },
          shared: {
            ...deps,
          },
        }),
      ]
};

Závěr

Ke konfiguraci federace modulů pro vaše produkční prostředí byste neměli muset rozumět arkanes webpacku.
Pamatujte si tato dvě pravidla:

• Umístěte svůj web za jednu a pouze jednu doménu URL.
• Pro adresy URL vlastních webových stránek používejte adresy URL relavite. Adresy URL domén používejte pouze pro externí webové stránky.

Děkuji za přečtení. Nezapomeňte like článek, pokud byl pro vás užitečný.