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: speedtestand 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: 10000Now, 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?
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: 4200Things 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: