在 Kubernetes 中連接前端和后端

Question

我的前端設置為：

this.http.post<any>(`${environment.apiUrl}/auth/login`, {email, password})

其中apiUrl: 'http://backend/api'

我在一個容器中構建了前端並將其暴露給負載均衡器服務，我試圖通過 ClusterIP 服務將它連接到端口 3000 上的后端。

前端 YAML：

apiVersion: v1
kind: Service
metadata:
  name: frontend
spec:
  selector:
    tier: frontend
  ports:
    - port: 80
      targetPort: 80
  type: LoadBalancer
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
spec:
  selector:
    matchLabels:
      tier: frontend
  replicas: 1
  template:
    metadata:
      labels:
        tier: frontend
    spec:
      containers:
      - name: frontend
        image: <Image>
        imagePullPolicy: Always
        ports:
        - containerPort: 80

后端 YAML：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  selector:
    matchLabels:
      app: app
      tier: backend
  replicas: 1
  template:
    metadata:
      labels:
        app: app
        tier: backend
    spec:
      containers:
      - name: frontend-container
        image: <Image>
        ports:
        - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend
spec:
  selector:
    app: app
    tier: backend
  ports:
  - protocol: TCP
    port: 80
    targetPort: 3000

正如這里的文檔中所解釋的那樣。

但是當我嘗試從瀏覽器訪問它時它不起作用，我收到未知錯誤！

這是前端內部的屏幕截圖，確保它能夠在內部到達后端。

我不明白我在哪里出錯了。 我認為設置為 http://backend 的 apiUrl var 未正確翻譯，因為如果我將其更改為負載均衡器 IP 並重建圖像，將后端暴露給 LB 服務而不是 ClusterIP。 它確實有效。

但顯然我不想將我的后端暴露給 LB 服務。

任何想法？

Answer 1

請看以下內容：

outside world  | k8s cluster
               | 
Browser  -->   | Nginx-pod --> backend-pod
               |
               |

url http://backend/api只能在集群內解析，但是你的瀏覽器在外面，所以不知道這個url是什么。

理想情況下，您將使用ingress來管理集群 pod 的路由。

Answer 2

正如@Elgarni 所說，客戶端的瀏覽器無法訪問您的集群，因此http://backend/api無法在集群外部解析。
如果您定義了入口，請使用kubectl get ingress命令並了解您的外部 IP。 然后將您的${environment.apiUrl}替換為http://$EXTERNAL_IP/api/或為您的外部 IP 定義 DNS 記錄並通過您定義的域進行訪問。

Answer 3

我們也可以使用 nginx 反向代理。 其中后端服務不需要使用入口或負載均衡器公開。 以下步驟對我來說很好

1. 例如：將 http://api-service/api/getsomething 替換為
   /api/getsomething

   /api/getsomething - 這將告訴瀏覽器它將請求發送到為您的前端應用程序提供服務的同一服務器（在這種情況下為 nginx）

   然后通過 nginx 服務器，呼叫可以使用 K8S 轉發到您的 api
   DNS。 （稱為反向代理）

2. 樣品 docker 文件：

    ### STAGE 1: Build ### FROM node:16 as build # Create app directory WORKDIR /app # Install app dependencies # A wildcard is used to ensure both package.json AND package-lock.json are copied # where available (npm@5+) COPY package*.json./ RUN npm install # Bundle app source COPY. . RUN npm run build ###STAGE 2: Run ### FROM nginx:alpine RUN rm -rf /usr/share/nginx/html/* && rm -rf /etc/nginx/conf.d/default.conf && rm -rf /etc/nginx/nginx.conf COPY nginx.conf /etc/nginx COPY --from=build /app/dist/angular-frontend /usr/share/nginx/html #Optional to mention expose as it will be taken by nginx sever, port 80 wil be taken from nginx server EXPOSE 80

3. 示例 nginx 配置文件：

    worker_processes 1; events { worker_connections 1024; } http { #upstream local { #server localhost:5000; #} upstream backend { server backend-service:80; } server { listen 80; #server_name localhost; server_name backend-service; root /usr/share/nginx/html; index index.html index.htm; include /etc/nginx/mime.types; gzip on; gzip_min_length 1000; gzip_proxied expired no-cache no-store private auth; gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://backend; } #location /api/v1/ { #proxy_pass http://local; #} }

   }

注意：這適用於 k8s 集成。 但是對於本地測試，我在 windows 機器中使用了 wsl2，並且曾經用 localhost 后端容器替換了 k8s 后端服務配置。 我收到以下錯誤：*3 connect() failed (111: Connection refused) while connection to upstream, client: 172.17.0.1,

我認為這里提到的 wsl2 集成存在問題。 https://github.com/Budibase/budibase/issues/4996

但適用於 k8s。