使用React App与Go后端的API进行通信

在Kubernetes环境中，开发人员通常需要在React前端应用程序和Go后端服务之间进行通信。为了实现这一点，可以使用NodePort服务类型，它会为后端服务分配一个外部可见端口。然而，手动查找和配置这个端口号可能会很繁琐。更好的方法是设置Ingress，它可以将特定主机名和路径映射到后端服务，从而简化了通信过程。

我有一个前端 react 应用程序和一个 go 后端服务作为前端的 api。两者都是同一命名空间中的 kubernetes 服务。如何在不使用外部ip的情况下与go后端服务通信？我让它可以与外部 ip 一起使用，但是，我无法让 fqdn 像它应该的那样正确解析。前端服务是从 nginx:1.15.2-alpine docker 镜像构建的。如何让前端 react 应用程序与后端 go 服务器通信？

前端service.yaml：

apiversion: v1
kind: service
metadata:
  name: ui
  namespace: client
  labels:
    app: ui
spec:
  type: nodeport
  ports:
    - name: http
      port: 80
      targetport: http
    - name: https
      port: 443
      targetport: https
  selector:
    app: ui

前端部署.yaml：

apiversion: extensions/v1beta1
kind: deployment
metadata:
  name: ui
  namespace: client
spec:
  replicas: 1
  strategy:
    type: rollingupdate
    rollingupdate:
      maxunavailable: 0
      maxsurge: 2
  template:
    metadata:
      labels:
        app: ui
    spec:
      containers:
        - name: ui
          image: #######
          imagepullpolicy: ifnotpresent
          ports:
            - name: http
              containerport: 80

后端服务.yaml：

apiversion: v1
kind: service
metadata:
  name: api
  namespace: client
  labels:
    app: api
spec:
  type: nodeport
  ports:
    - port: 8001
      protocol: tcp
      targetport: http
      name: http
  selector:
    app: api

后端部署.yaml：

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: api
  namespace: client
  labels:
    name: api
spec:
  replicas: 1
  revisionHistoryLimit: 2
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxUnavailable: 0
      maxSurge: 1
  template:
    metadata:
      labels:
        app: api
    spec:
      containers:
        - name: api
          image: ####
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: 8001

解决方案

react 应用程序不在 kubernetes 中运行。也许您有一个在 kubernetes 中运行的开发服务器，但它只是向集群外部运行的浏览器提供 html 和 javascript 文件。浏览器中的应用程序不知道这个“kubernetes”事物，并且无法解析 kubernetes 内部 ...svc.cluster.local 主机名；它需要一种与集群对话的方式。

由于您已将后端配置为 nodeport 类型服务，因此您可以查找后端的外部可见端口，然后将所提供服务的浏览器应用程序中的后端 url 配置为集群中某个节点上的该端口号。这有点混乱并且需要手动操作。

更好的方法是配置 ingress，以便 https://.../ 为您的浏览器应用程序提供服务，而 https://.../api 则转到您的后端。那么后端 url 可以只是裸路径 /api，并且它将使用与 ui 相同的主机名和方案进行解释。

yaml 存在很多问题。首先，在服务 yaml 中，targetport 应该是端口号（整数）而不是字符串。因此，更新后的配置将是，

apiversion: v1
kind: service
metadata:
  name: ui
  namespace: client
  labels:
    app: ui
spec:
  type: nodeport
  ports:
    - name: http
      port: 80
      targetport: 80
    - name: https
      port: 443
      targetport: 443
  selector:
    app: ui

和

apiversion: v1
kind: service
metadata:
  name: api
  namespace: client
  labels:
    app: api
spec:
  type: nodeport
  ports:
    - port: 8001
      protocol: tcp
      targetport: 8001
      name: http
  selector:
    app: api

更改服务 yaml 中的 targetport 后，我​​创建了一个 pod 来执行 nslookup，它按预期工作。

kubectl apply -f https://k8s.io/examples/admin/dns/busybox.yaml
kubectl exec -ti busybox -- nslookup api.client

产生输出

Defaulting container name to busybox.
Use 'kubectl describe pod/busybox -n default' to see all of the containers in this pod.
Server:    10.96.0.10
Address 1: 10.96.0.10 kube-dns.kube-system.svc.cluster.local

Name:      api.client
Address 1: 10.101.84.21 api.client.svc.cluster.local

本篇关于《使用React App与Go后端的API进行通信》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于Golang的相关知识，请关注golang学习网公众号！