使用Minikube和Kubernetes使用Angular Webapp连接到API [英] Connecting to API with Angular Webapp using Minikube and Kubernetes

问题描述

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

I'm trying to learn Kubernetes and would like to create a simple example of an Angular frontend in a Docker container connecting to a .NET Core API also on a Docker container. I am able to successfully create both the API and the frontend and can see the result on the browse but struggle to retrieve information from the API on the frontend. As the IP of the API changes I can't hardcode those values in the Angular app before building the image but using the DNS name doesn't seem to work either.

目前，我的Angular应用中具有以下内容:

Currently I have the following in my Angular app:

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

backend-api.service.yaml

backend-api.service.yaml

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

frontend-app.service.yaml

frontend-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是:

The Dockerfile for my Angular app is:

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

我不确定还需要什么，但很高兴在需要时添加更多信息.感谢您的协助，因为我一直在努力寻找解决方法.

I'm not sure what else is needed but I'm happy to add more information if required. Any help is appreciated as I've been pulling my hair out trying to figure it out.

推荐答案

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

Your backend service is ClusterIP, so it can only be accessed from inside Minikube cluster Angular is running from outside cluster (from your browser)

您应该将后端服务类型更改为NodePort或LoadBalancer.或使用Ingress Controller.

You should change backend service type to NodePort or LoadBalancer. Or use Ingress Controller.

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

并使用SERVER_URI作为

And use SERVER_URI as

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

这篇关于使用Minikube和Kubernetes使用Angular Webapp连接到API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！