时间戳

首页 > 解决方案 > 如何使用 ingress 在 kubernetes 中显示 speedtester

kubernetes - 如何使用 ingress 在 kubernetes 中显示 speedtester

问题描述

我的集群中有一个网络速度测试器服务和部署。我想在我的 k8s 集群中的前端反应应用程序的窗口上显示小部件......我使用 iframe 如下。

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

我的 svc 看起来像这样：

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

我的部分入口如下所示：

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

现在，当我使用它（速度测试器）作为我的默认根目录/时，项目中只有一个入口，它工作正常。但是，我的根/是前端反应应用程序。如果我像上面那样将它设置在自己的入口上，它会说网络错误并且不起作用。

有没有其他方法可以显示这个小部件？

我该如何解决入口路由问题，因为除了这个小部件和前端反应应用程序之外，我还有一个管理员反应客户端应用程序，如果我也将它放在它自己的入口中，它也不会加载。

TL;DR 如何加载两个反应应用程序和一个路径为根的静态容器？

标签： kuberneteskubernetes-ingressnginx-ingress

解决方案

如何加载两个反应应用程序和一个路径为根的静态容器？

假设root路径必须有 Kubernetes Ingress 将允许您在为不同主机列出这些的条件下执行此操作。您可能会在下面找到一个示例，这对于您的用例来说可能是这样的：

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

由于同源策略，当您使用不同的主机时，事情会变得更加复杂。它是在客户端 Web 应用程序（如 Web 浏览器）上强制执行的安全策略，以防止来自不同来源的资源之间的交互。虽然对于防止恶意行为很有用，但此安全措施还可以防止已知来源之间的合法交互。

为了让这种情况发生，您需要启用cros origin 资源共享。

什么是 CORS？

CORS 是一种允许 JavaScript 中的跨域 HTTP 请求的方法，即运行在一个域上的 JS 向不同域上的页面发出的请求。出于安全原因，这通常是不允许的（它可能允许一个页面使用用户的凭据向另一个页面发送请求）；CORS 提供了一种安全地允许此类请求的方法。

这可以通过两种方式处理，通过配置应用程序发送 CORS 标头或配置入口来执行此操作。欲了解更多信息，请访问：

推荐阅读