Kubernetes集群中remoteEntry的URL

Question

我正在尝试使用 Webpack 5 和 ModuleFederationPlugin 构建一系列微前端。

在我的容器应用程序的 webpack 配置中，我必须配置容器如何访问其他微前端，以便我可以利用这些微前端。

当我在本地提供服务而不是使用 Docker 和 Kubernetes 以及我的 Ingress Controller 时，这一切都工作正常。

但是，因为我使用 Kubernetes 和入口控制器，所以我不确定远程主机是什么。

Repo 链接

这是我的容器 webpack.dev.js 文件

const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const commonConfig = require("./webpack.common");
const packageJson = require("../package.json");

const devConfig = {
  mode: "development",
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    historyApiFallback: {
      index: "index.html",
    },
    compress: true,
    disableHostCheck: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      remotes: {
        marketing:
          "marketing@https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js",
      },
      shared: packageJson.dependencies,
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);

，这是我的 < strong>Ingress Config

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
    - host: ticketing.dev
      http:
        paths:
          - path: /api/users/?(.*)
            pathType: Prefix
            backend:
              service:
                name: auth-srv
                port:
                  number: 3000
          - path: /marketing?(.*)
            pathType: Prefix
            backend:
              service:
                name: marketing-srv
                port:
                  number: 8081
          - path: /?(.*)
            pathType: Prefix
            backend:
              service:
                name: container-srv
                port:
                  number: 8080

，这是我的营销 webpack.dev.js 文件，

const { merge } = require("webpack-merge");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const commonConfig = require("./webpack.common");
const packageJson = require("../package.json");

const devConfig = {
  mode: "development",
  devServer: {
    host: "0.0.0.0",
    port: 8081,
    historyApiFallback: {
      index: "index.html",
    },
    compress: true,
    disableHostCheck: true, // That solved it
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "marketing",
      filename: "remoteEntry.js",
      exposes: {
        "./core": "./src/bootstrap",
      },
      shared: packageJson.dependencies,
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);

我完全不知道远程主机将如何访问我的营销微前端，

照常提供服务，而无需在 Docker 中运行它容器或者 kubernetes 集群，远程主机将是

https://localhost:8081/remoteEntry.js

但这在 kubernetes 集群中不起作用

我尝试使用入口控制器和命名空间，但这也是如此，不起作用

https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js

这是我得到的错误

Answer 1

https://ingress-nginx-controller .ingress-nginx.svc.cluster.local:8081/remoteEntry.js

如果您的客户端和节点位于同一网络上（例如可以互相 ping 通），请执行 kubectl获取 service ingress-nginx --namespace ingress-nginx 并记下 nodePort# (TYPE=NodePort, PORT(S) 443:/TCP)。 您的远程条目将为 https://<任意工作节点 IP>:/remoteEntry.js

如果您的客户端位于互联网上并且您的工作节点具有公共 IP， ，您的远程条目将是 https://<工作节点的公共 IP>:/remoteEntry.js

如果您的客户端位于互联网上，而您的工作节点不在互联网上没有公共IP，您需要使用 LoadBalancer 公开您的 ingress-nginx 服务。执行 kubectl get service ingress-nginx --namespace ingress-nginx 并记下 EXTERNAL IP 。您的远程条目将变为 https:///remoteEntry.js