URL of remoteEntry in Kubernetes Cluster - kubernetes

Question

I am trying to build a series of Micro-Frontends using Webpack 5 and the ModuleFederationPlugin.
In the webpack config of my container app I have to configure how the container is going to reach out to the other microfrontends so I can make use of those micro-frontends.
This all works fine when I am serving locally, not using Docker and Kubernetes and my Ingress Controller.
However because I am using Kubernetes and an Ingress Controller, I am unsure what the remote host would be.
Link to Repo
Here is my container webpack.dev.js file
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);
and here is my 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
and here is my marketing webpack.dev.js file
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);
I am totally stumped as to what the remote host would be to reach out to my marketing micro-frontend
serving it as usual without running it in a docker container or kubernetes cluster, the remote host would be
https://localhost:8081/remoteEntry.js
but that doesn't work in a kubernetes cluster
I tried using the ingress controller and namespace, but that too, does not work
https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js
This is the error I get

Answer 1

https://ingress-nginx-controller.ingress-nginx.svc.cluster.local:8081/remoteEntry.js
If your client and the node are on the same network (eg. can ping each other), do kubectl get service ingress-nginx --namespace ingress-nginx and take note of the nodePort# (TYPE=NodePort, PORT(S) 443:<nodePort#>/TCP). Your remote entry will be https://<any of the worker node IP>:<nodePort#>/remoteEntry.js
If you client is on the Internet and your worker node has public IP, your remote entry will be https://<public IP of the worker node>:<nodePort#>/remoteEntry.js
If you client is on the Internet and your worker node doesn't have public IP, you need to expose your ingress-nginx service with LoadBalancer. Do kubectl get service ingress-nginx --namespace ingress-nginx and take note of the EXTERNAL IP. Your remote entry become https://<EXTERNAL IP>/remoteEntry.js