使用 Minikube 和 Kubernetes 通过 Angular Webapp 连接到 API答案

【问题标题】：Connecting to API with Angular Webapp using Minikube and Kubernetes使用 Minikube 和 Kubernetes 通过 Angular Webapp 连接到 API
【发布时间】：2020-05-28 16:02:46
【问题描述】：

我正在尝试学习 Kubernetes，并希望在 Docker 容器中创建一个简单的 Angular 前端示例，该示例连接到也在 Docker 容器上的 .NET Core API。我能够成功地创建 API 和前端，并且可以在浏览器上看到结果，但很难从前端的 API 中检索信息。随着 API 的 IP 更改，我无法在构建图像之前在 Angular 应用程序中对这些值进行硬编码，但使用 DNS 名称似乎也不起作用。

目前我的 Angular 应用中有以下内容：

SERVER_URI: 'http://budgetlist-api:50605/'

后端-api.service.yaml

apiVersion: v1
kind: Service
metadata:
  name: bucketlist-api
spec:
  selector:
    app: bucketlist-api
  ports:
    - protocol: TCP
      port: 50605
  type: ClusterIP

前端-app.service.yaml

apiVersion: v1
kind: Service
metadata:
  name: bucketlist-app
spec:
  selector:
    app: bucketlist-app
  ports:
    - protocol: TCP
      port: 4200
      targetPort: 4200
  type: NodePort

我的 Angular 应用程序的 Dockerfile 是：

FROM node:12.2.0
WORKDIR /app

COPY package.json ./

RUN npm install
RUN npm install -g @angular/cli

COPY . .

CMD ng serve --host 0.0.0.0

我不确定还需要什么，但如果需要，我很乐意添加更多信息。感谢任何帮助，因为我一直在努力解决这个问题。

【问题讨论】：

我认为问题是您在 minikube 上有 2 个部署和 2 个服务，您可以使用 ip 而不是 dns 名称进行连接？您可以exec 进入您的其中一个部署并卷曲另一个 dns 服务吗？例如，我有一些 ubuntu pod 和 nginx pod，两者都有服务，我执行到 ubuntu pod 并使用curl -v my-nginx（nginx 服务），响应是http/1.1 200 OK。你能做这样的事情，让我知道它是否适合你，或者你只能卷曲端点（IP）？
您好，这是正确的。所以我为我的后端 API 提供了一个部署/服务，我为我的 Angular 应用程序提供了一个部署/服务。我按照你的建议做了。 kubectl exec -it frontend-app -- /bin/bash 然后 curl -v backend-api 这返回了相同的集群 IP 地址，就好像我要执行 kubectl get service
因此，如果我正确理解了您并且它们之间的连接很好，那么这将是我不熟悉的角度代码本身，从 kubernetes 方面我可以建议使用 nginx 作为容器将代理传递到后端，更多关于它here.

标签： angular docker kubernetes .net-core minikube

【解决方案1】：

您的后端服务是 ClusterIP，因此只能从 Minikube 集群内部访问 Angular 正在从外部集群（从您的浏览器）运行

您应该将后端服务类型更改为 NodePort 或 LoadBalancer。或者使用入口控制器。

apiVersion: v1
kind: Service
metadata:
  name: bucketlist-api
spec:
  selector:
    app: bucketlist-api
  ports:
    - protocol: TCP
      port: 50605
      nodePort: 30100
  type: NodePort

并使用 SERVER_URI 作为

SERVER_URI: 'http://budgetlist-api:30100/'

【讨论】：