无法将 Vue Axios 请求从一个 pod 发送到另一个 pod 的服务,但我可以从另一个 pod 到服务

时间:2021-06-03 13:36:29

标签: kubernetes vuejs2 axios kubernetes-ingress

我有一个带有 SpringBoot 应用程序的后端 Pod 和一个运行 Vue 应用程序的前端 Pod。我一直在一步一步地了解有关 Kubernetes 的更多信息。现在的目标是从 Vue 应用程序向我的 SpringBoot 应用程序发出 GET 请求。如果我在各自的本地环境中运行这两个应用程序(npm build run,并且只运行 SpringBoot 应用程序),这会很好地工作。

然后,我将它们移动到由 Kubernetes 中的服务支持的 pod 容器中。两者都可以独立工作,但我无法让我的 Vue 应用程序使用 Axios 发出 GET 请求。 (并且我已允许所有 CORS 源访问,因此不应该 至少是问题)

我一直在研究其他问题,并阅读了大量文档。我不确定在本地运行 Kubernetes 是否可以做到这一点,或者我是否需要设置一个域名?我看过很多使用主机名的入口示例,我还研究了环境变量。

  1. 我没有域,我在 Docker 上运行我的 kubernetes 集群
  2. 我的 Vue 容器中有环境变量,一个是我自己制作的,一些是由 Kubernetes 自己制作的,它们实际上指向我的后端/SpringBoot pod 的 IP 的本地 IP。 (基本上是 RESTSERVICE_PORT_8080_ADDR、RESTSERVICE_SERVICE_PORT_8080_8080)
  3. 据我所知,我应该能够从外部保持后端 Pod 关闭。通过引用该服务,我应该能够发出 GET 请求。 我可以部署一个将 CURL 发送到后端服务名称的 pod,它可以工作。但是在我的 Vue 应用程序中使用完全相同的地址不起作用。这是为什么?我读过它是关于浏览器 + 我的 Vue 应用程序需要访问,但我该如何正确设置?

所以基本上我已经研究过使用环境变量,但我不知道如何在容器中的 Vue 应用程序内部使用这些变量。而且我还尝试只联系与 CURL 一起使用的服务地址,而不是来自 Vue AXIOS 请求。

  • 我也可以配置 Ingress,但这也会向公众开放我的后端服务/pod,我知道这是我应该避免做的事情。 就像我提到的那样,理想情况下,我应该能够在不向公众开放的情况下访问后端 Pod 的服务,对吗?

这是我的后端代码的 pod + 服务配置。这是一个 YAML 文件,如果我没记错的话,它是通过一些 Spring 指南自动配置的,从那时起我就重用了它。它有一些样板,很抱歉:

SpringBoot pod + 服务配置 YAML:

    apiVersion: apps/v1
    kind: Deployment
    metadata:
      creationTimestamp: null
      labels:
        app: restservice
      name: restservice
    spec:
      replicas: 1
      selector:
        matchLabels:
          app: restservice
      strategy: {}
      template:
        metadata:
          creationTimestamp: null
          labels:
            app: restservice
        spec:
          containers:
          - name: restservice
            image: restservice
            imagePullPolicy: Never
    status: {}
    --- 
    apiVersion: v1
    kind: Service
    metadata:
      creationTimestamp: null
      labels:
        app: restservice
      name: restservice
    spec:
      ports:
      - name: 8080-8080
        port: 8080
        protocol: TCP
        targetPort: 8080
      selector:
        app: restservice
      type: ClusterIP
    status:
      loadBalancer: {}
    apiVersion: v1
    kind: Service
    metadata:
      creationTimestamp: null
      labels:
        app: restservice
      name: restservice
    spec:
      ports:
      - name: 8080-8080
        port: 8080
        protocol: TCP
        targetPort: 8080
      selector:
        app: restservice
      type: ClusterIP
    status:
      loadBalancer: {}

这是我的前端应用程序的 YAML 配置,除了这里我现在使用 LoadBalancer 作为服务类型之外,它基本上是相同的配置。

Vue pod + 服务配置 YAML:

    apiVersion: apps/v1 kind: Deployment metadata:   creationTimestamp: null   labels:
        app: vuejs   name: vuejs spec:   replicas: 1   selector:
        matchLabels:
          app: vuejs   strategy: {}   template:
        metadata:
          creationTimestamp: null
          labels:
            app: vuejs
        spec:
          containers:
          - name: vuejs
            image: vuejs
            env:
            - name: RESTSERVICE_API_URL
              value: "restservice:8080"
            imagePullPolicy: Never status: {}
    ---  apiVersion: v1 kind: Service metadata:   creationTimestamp: null   labels:
        app: vuejs   name: vuejs spec:   ports:
      - name: 8082-8082
        port: 8082
        protocol: TCP
        targetPort: 8082   selector:
        app: vuejs   type: LoadBalancer status:   loadBalancer: {} apiVersion: v1 kind: Service metadata:   creationTimestamp: null   labels:
        app: vuejs   name: vuejs spec:   ports:
      - name: 8082-8082
        port: 8082
        protocol: TCP
        targetPort: 8082   selector:
        app: vuejs   type: LoadBalancer status:   loadBalancer: {}

我在 Vue 中通过 Axios 调用只是一个常规的 GET 请求。如果需要,我可以提供它,但就像我说的,它在本地运行应用程序时有效,只是在 Kubernetes 集群中不起作用。

0 个答案:

没有答案