Question

尝试将React前端Web连接到nodejs时出现错误，将api服务器连接到kubernetes集群中。

可以在浏览器中导航到http:localhost:3000，并且网站正常。

但是无法按预期导航至http:localhost:3008（不应公开）

我的目标是将 REACT_APP_API_URL 环境变量传递给前端，以便设置axios baseURL并能够在front和它的api服务器之间建立通信。

deploy-front.yml

apiVersion: apps/v1 # for versions before 1.9.0 use apps/v1beta2
kind: Deployment
metadata:
  name: gbpd-front
spec:
  selector:
    matchLabels:
      app: gbpd-api
      tier: frontend
      track: stable
  replicas: 2
  template:
    metadata:
      labels:
        app: gbpd-api
        tier: frontend
        track: stable
    spec:
      containers:
        - name: react
          image: binomio/gbpd-front:k8s-3
          ports:
            - containerPort: 3000
          resources:
            limits:
              memory: "150Mi"
            requests:
              memory: "100Mi"
          imagePullPolicy: Always

service-front.yaml

apiVersion: v1
kind: Service
metadata:
  name: gbpd-front
spec:
  selector:
    app: gbpd-api
    tier: frontend
  ports:
  - protocol: "TCP"
    port: 3000
    targetPort: 3000
  type: LoadBalancer

Deploy-back.yaml

apiVersion: apps/v1 # for versions before 1.9.0 use apps/v1beta2
kind: Deployment
metadata:
  name: gbpd-api
spec:
  selector:
    matchLabels:
      app: gbpd-api
      tier: backend
      track: stable
  replicas: 3 # tells deployment to run 2 pods matching the template
  template:
    metadata:
      labels:
        app: gbpd-api
        tier: backend
        track: stable
    spec:
      containers:
        - name: gbpd-api
          image: binomio/gbpd-back:dev
          ports:
            - name: http
              containerPort: 3008

service-back.yaml

apiVersion: v1
kind: Service
metadata:
  name: gbpd-api
spec:
  selector:
    app: gbpd-api
    tier: backend
  ports:
  - protocol: "TCP"
    port: 3008
    targetPort: http

我尝试了很多组合，还尝试将“ LoadBalancer”添加到backservice中，但是什么也没有...

我可以将perfecto连接到localhost：3000并使用前端，但是前端无法连接到后端服务。

问题1 ：要通过REACT_APP_API_URL正确进行设置，要使用的IP /名称是什么？ 问题2 ：为什么curl localhost：3008没有回答？

经过2天的尝试，几乎可以尝试k8s官方文档中的所有内容...无法弄清这里发生了什么，因此任何帮助将不胜感激。

kubectl描述svc gbpd-api 响应：

kubectl describe svc gbpd-api
Name:                     gbpd-api
Namespace:                default
Labels:                   <none>
Annotations:              kubectl.kubernetes.io/last-applied-configuration:
                            {"apiVersion":"v1","kind":"Service","metadata":{"annotations":{},"name":"gbpd-api","namespace":"default"},"spec":{"ports":[{"port":3008,"p...
Selector:                 app=gbpd-api,tier=backend
Type:                     LoadBalancer
IP:                       10.107.145.227
LoadBalancer Ingress:     localhost
Port:                     <unset>  3008/TCP
TargetPort:               http/TCP
NodePort:                 <unset>  31464/TCP
Endpoints:                10.1.1.48:3008,10.1.1.49:3008,10.1.1.50:3008
Session Affinity:         None
External Traffic Policy:  Cluster
Events:                   <none>

Answer 1

我测试了您的环境，并且在使用Nginx图像时它可以正常工作，让我们回顾一下环境：

正确描述了前端部署。
前端服务将其公开为loadbalancer，这意味着您可以从外部完美访问前端。
还正确描述了后端部署。
后端服务与ClusterIP一起使用，以便只能从群集内部访问。

下面，我将演示前端和后端之间的通信。

我使用的是您提供的相同Yaml，出于示例目的，仅将图像更改为Nginx，并且由于它是http服务器，因此我将Containerport更改为80。

问题1：为了传递REACT_APP_API_URL正确进行前端访问，要使用的IP /名称是什么？

我已根据请求将ENV变量添加到前端部署中，并且还将使用它进行演示。您必须使用服务名称进行卷曲，而我使用的是简短版本，因为我们使用的是同一名称空间。您也可以使用全名：http://gbpd-api.default.svc.cluster.local:3008

复制：

创建Yamls并将其应用：

$ cat deploy-front.yaml 
apiVersion: apps/v1
kind: Deployment
metadata:
  name: gbpd-front
spec:
  selector:
    matchLabels:
      app: gbpd-api
      tier: frontend
      track: stable
  replicas: 2
  template:
    metadata:
      labels:
        app: gbpd-api
        tier: frontend
        track: stable
    spec:
      containers:
        - name: react
          image: nginx
          env:
            - name: REACT_APP_API_URL
              value: http://gbpd-api:3008
          ports:
            - containerPort: 80
          resources:
            limits:
              memory: "150Mi"
            requests:
              memory: "100Mi"
          imagePullPolicy: Always

$ cat service-front.yaml 
cat: cat: No such file or directory
apiVersion: v1
kind: Service
metadata:
  name: gbpd-front
spec:
  selector:
    app: gbpd-api
    tier: frontend
  ports:
  - protocol: "TCP"
    port: 3000
    targetPort: 80
  type: LoadBalancer

$ cat deploy-back.yaml 
apiVersion: apps/v1
kind: Deployment
metadata:
  name: gbpd-api
spec:
  selector:
    matchLabels:
      app: gbpd-api
      tier: backend
      track: stable
  replicas: 3
  template:
    metadata:
      labels:
        app: gbpd-api
        tier: backend
        track: stable
    spec:
      containers:
        - name: gbpd-api
          image: nginx
          ports:
            - name: http
              containerPort: 80

$ cat service-back.yaml 
apiVersion: v1
kind: Service
metadata:
  name: gbpd-api
spec:
  selector:
    app: gbpd-api
    tier: backend
  ports:
  - protocol: "TCP"
    port: 3008
    targetPort: http

$ kubectl apply -f deploy-front.yaml 
deployment.apps/gbpd-front created
$ kubectl apply -f service-front.yaml 
service/gbpd-front created
$ kubectl apply -f deploy-back.yaml 
deployment.apps/gbpd-api created
$ kubectl apply -f service-back.yaml 
service/gbpd-api created

请记住，在Kubernetes中通信是designed to be made between services，因为在部署发生更改或Pod发生故障时，总是会重新创建Pod。

$ kubectl get all
NAME                              READY   STATUS    RESTARTS   AGE
pod/gbpd-api-dc5b4b74b-kktb9      1/1     Running   0          41m
pod/gbpd-api-dc5b4b74b-mzpbg      1/1     Running   0          41m
pod/gbpd-api-dc5b4b74b-t6qxh      1/1     Running   0          41m
pod/gbpd-front-66b48f8b7c-4zstv   1/1     Running   0          30m
pod/gbpd-front-66b48f8b7c-h58ds   1/1     Running   0          31m

NAME                 TYPE           CLUSTER-IP    EXTERNAL-IP    PORT(S)          AGE
service/gbpd-api     ClusterIP      10.0.10.166   <none>         3008/TCP         40m
service/gbpd-front   LoadBalancer   10.0.11.78    35.223.4.218   3000:32411/TCP   42m

这些Pod是工人，由于它们可以自然替换，因此我们将连接到前端Pod以模拟他的行为，并尝试连接到后端服务（该网络层会将流量定向到其中一个后端窗格）。
nginx映像未预安装curl，因此出于演示目的，我将必须安装它：

$ kubectl exec -it pod/gbpd-front-66b48f8b7c-4zstv -- /bin/bash
root@gbpd-front-66b48f8b7c-4zstv:/# apt update && apt install curl -y
done.

root@gbpd-front-66b48f8b7c-4zstv:/# curl gbpd-api:3008
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
...

现在让我们尝试使用定义的环境变量：

root@gbpd-front-66b48f8b7c-4zstv:/# printenv | grep REACT
REACT_APP_API_URL=http://gbpd-api:3008
root@gbpd-front-66b48f8b7c-4zstv:/# curl $REACT_APP_API_URL
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
...

注意事项：

问题2：为什么curl localhost：3008没有回答？

由于正确描述了所有Yaml，因此必须检查image: binomio/gbpd-back:dev是否正确地在端口3008上正常服务。
由于它不是公共图像，因此我无法对其进行测试，因此将为您提供故障排除步骤：
- 就像我们登录前端窗格一样，您必须登录到此后端窗格并测试curl localhost:3008。
- 如果它基于带有apt-get的linux发行版，则可以像在演示中一样运行命令：
- 从后端部署获取容器名称（例如：gbpd-api-6676c7695c-6bs5n）
- 运行kubectl exec -it pod/<POD_NAME> -- /bin/bash
- 然后运行apt update && apt install curl -y
- 并测试curl localhost:3008
- 如果没有答案，请运行apt update && apt install net-tools
- 并测试netstat -nlpt，它必须向您显示正在运行的服务的输出以及相应的端口，例如：

root@gbpd-api-585df9cb4d-xr6nk:/# netstat -nlpt
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      1/nginx: master pro

如果即使采用这种方法，吊舱也没有返回任何内容，则您将不得不检查图像中的代码。

让我知道之后是否需要帮助！

如何在K8S集群内部中前后连接（拒绝连接）

1 个答案: