2

我有一个微前端应用程序，它由一个容器应用程序和几个远程应用程序组成。它使用带有 Webpack 5 模块联合的 ReactJS，并且在我的本地环境中运行良好。但是，当我将它部署到 AWS CloudFront 时，它并没有按预期工作。

似乎容器应用程序在正确的路径上加载，但“未定义”被添加到遥控器的 remoteEntry.js 文件的 url 中。

请看下面的截图：

CloudFront 错误

容器项目 webpack 生产配置如下：

const prodConfig = {
  mode: "production",
  output: {
    filename: "[name].[contenthash].js",
    publicPath: "/container/latest/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {
        auth: `auth@${domain}/auth/latest/remoteEntry.js`,
        marketing: `marketing@${domain}/marketing/latest/remoteEntry.js`,
        dashboard: `dashboard@${domain}/dashboard/latest/remoteEntry.js`,
      },
      shared: packageJson.dependencies,
    }),
  ],
};

远程项目 webpack 生产配置如下：

const prodConfig = {
  mode: "production",
  output: {
    filename: "[name].[contenthash].js",
    publicPath: "/marketing/latest/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "marketing",
      filename: "remoteEntry.js",
      exposes: {
        "./MarketingApp": "./src/bootstrap",
      },
      shared: packageJson.dependencies,
    }),
  ],
};

容器项目 App.js 如下：

import React, { lazy, Suspense, useState, useEffect } from "react";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import {
  StylesProvider,
  createGenerateClassName,
} from "@material-ui/core/styles";
import { createBrowserHistory } from "history";

import Progress from "./components/Progress";
import Header from "./components/Header";

const MarketingLazy = lazy(() => import("./components/MarketingApp"));
const AuthLazy = lazy(() => import("./components/AuthApp"));
const DashboardLazy = lazy(() => import("./components/DashboardApp"));

const generateClassName = createGenerateClassName({
  productionPrefix: "co",
});

const history = createBrowserHistory();

export default () => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  useEffect(() => {
    if (isSignedIn) {
      history.push("/dashboard");
    }
  }, [isSignedIn]);

  return (
    <Router history={history}>
      <StylesProvider generateClassName={generateClassName}>
        <div>
          <Header
            onSignOut={() => setIsSignedIn(false)}
            isSignedIn={isSignedIn}
          />
          <Suspense fallback={<Progress />}>
            <Switch>
              <Route path="/auth">
                <AuthLazy onSignIn={() => setIsSignedIn(true)} />
              </Route>
              <Route path="/dashboard">
                {!isSignedIn && <Redirect to="/" />}
                <DashboardLazy />
              </Route>
              <Route path="/" component={MarketingLazy} />
            </Switch>
          </Suspense>
        </div>
      </StylesProvider>
    </Router>
  );
};

我正在努力找出错误所在。我不确定它是否有错误：

  • 反应
  • 反应路由器
  • Webpack 模块联合
  • AWS CloudFront

任何帮助，将不胜感激

4

2 回答 2

0

有一点晚，

问题：

问题是您可能只是单独部署营销应用程序，而容器应用程序在重新部署之前并不知道营销应用程序的变化。

解决方案;

您需要做的只是对 Marketing 和容器应用程序进行更改，并提交到 git 以触发这两个应用程序的工作流。

希望这可以帮助有同样问题的人。

于 2022-01-28T17:36:12.540 回答
0

如果您仔细查看浏览器日志。

您的网址中有一个undefined/marketing/latest/remoteEntry.js加载模块联合远程网址的网址。

您可能需要将domain变量设置为云端端点。

于 2021-04-03T09:38:48.153 回答