Connecting to API with Angular Webapp using Minikube and Kubernetes

问题

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.

Currently I have the following in my Angular app:

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

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

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

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.

回答1:

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

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

And use SERVER_URI as

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

来源：https://stackoverflow.com/questions/60199482/connecting-to-api-with-angular-webapp-using-minikube-and-kubernetes

标签

angular

Docker

Kubernetes

.net-core

Minikube