How to display speedtester in kubernetes using ingress

Question

I have a network speed tester service and deployment in my cluster. I would like to display the widget on a window in my frontend react app within my k8s cluster ... I used iframe as follows.

const SpeedTest = (props) => {
  return (
    <div>
      <Container>
      <iframe className="speedTestFrame" src={`..path..`}></iframe>
      <br />
      </Container>
    </div>
  );
};

My svc looks like this:

  apiVersion: v1
  kind: Service
  metadata:
    name: speedtest
  spec:
    ports:
      - name: "10000"
        port: 10000
        targetPort: 8080
    selector:
      app: speedtest

and part of my ingress looks like this:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: speed-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
 rules:
 - http:
    paths:
    - path: /speedtest
      pathType: Exact
      backend:
        serviceName: speedtest
        servicePort: 10000

Now, when I use it (speed tester) as my default root / with only one ingress in the project, it works fine. However, my root / is for the frontend react app. If I set it on its own ingress like above, it says network error and does not work.

Is there any other way I can display this widget ?

How do I solve the ingress routing issue because apart from this widget and the frontend react app, I also have an admin react client app and it does not load if I place it in its own ingress as well.

TL;DR How do I load two react apps and a static container whose path is the root?

score 1 · Answer 1 · answered Feb 01 '21 at 13:11

How do I load two react apps and a static container whose path is the root?

Assuming root path is must have Kubernetes Ingress will allow you to do that under condition that you are listing these for different host. Below you might find an exmple how this might look like for your use case:

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: ingress-example
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: frontend.example.com
    http:
      paths:
      - path: /
        backend:
          serviceName: front-end
          servicePort: 80
  - host: admin.example.com
    http:
      paths:
      - path: /
        backend:
          serviceName: admin-react
          servicePort: 80
  - host: speedtest.example.com
    http:
      paths:
      - path: /
        backend:
          serviceName: speedtest
          servicePort: 4200

Things get more complicated when you use different hosts because of same-origin policy. It`s a security policy enforced on client-side web applications (like web browsers) to prevent interactions between resources from different origins. While useful for preventing malicious behavior, this security measure also prevents legitimate interactions between known origins.

For allow that to happen you will need to enable cros origin resource sharing.

What is CORS?

CORS is a method to permit cross-origin HTTP requests in JavaScript, i.e. requests made by JS running on one domain to a page on a different domain. This is usually disallowed for security reasons (it could allow one page to send requests using the user's credentials to another page); CORS provides a way to safely permit such requests.

This can be handled in two ways, either by configuring you application to send CORS header or configure ingress to do so. For more info please go to:

How to display speedtester in kubernetes using ingress

1 Answers1