部署React+Flask应用至K8s遇请求超时错误求助

你遇到的核心问题是混淆了前端代码的运行环境：React作为前端应用，代码最终是在用户的浏览器中执行的，而非Kubernetes的React Pod内部。你在Pod里用curl能访问Flask的ClusterIP地址，是因为Pod处于K8s集群内部网络，但用户浏览器不在集群范围内，根本无法解析和访问flask-service.default.svc.cluster.local这个集群内部地址，直接导致请求超时。

另外需要注意：React的REACT_APP_*环境变量是构建时注入的，如果你是先构建好React镜像再部署到K8s，那么部署时在Pod里设置的REACT_APP_BACKEND_HOST不会生效——这个变量的值已经在构建阶段被嵌入到静态文件里了。

具体解决方案 #

1. 暴露Flask服务到外部网络 #

给Flask的Service配置NodePort或LoadBalancer类型，让外部可以访问：

• 若用NodePort类型，Service配置示例：

apiVersion: v1
kind: Service
metadata:
  name: flask-service
spec:
  type: NodePort
  selector:
    app: flask
  ports:
    - port: 5000
      targetPort: 5000
      nodePort: 30001 # 可选，需在30000-32767端口范围内

随后将React的后端地址设置为http://<你的K8s节点IP>:30001，同时要确保该端口已通过防火墙/安全组开放外部访问权限。

• 若在云环境部署，使用LoadBalancer类型更便捷，Service会自动分配外部IP，直接用该IP+端口作为后端地址即可。

2. 使用Ingress统一转发（推荐） #

配置Ingress将前端和后端的请求统一路由，前端用相对路径请求后端，避免硬编码外部地址：

1. 先部署Ingress Controller（比如NGINX Ingress）
2. 配置Ingress规则：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  rules:
  - host: your-domain.com # 也可直接使用集群节点IP
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: react-service
            port:
              number: 3000
      - path: /api/(.*)
        pathType: Prefix
        backend:
          service:
            name: flask-service
            port:
              number: 5000

3. 修改React的请求路径为相对路径/api/xxx，浏览器发起的请求会被Ingress自动转发到Flask服务。同时确保React构建时无需硬编码后端地址，或把REACT_APP_BACKEND_HOST设置为/api。

3. 确认React环境变量的注入方式 #

如果你的React镜像是预先构建的，要确保REACT_APP_BACKEND_HOST是在构建时传入的，比如Docker构建命令：

docker build --build-arg REACT_APP_BACKEND_HOST=http://your-external-backend-url -t react-app:latest .

不要在K8s Deployment的env字段里设置该变量——部署时的env变量对已构建完成的静态前端代码完全无效。

内容的提问来源于stack exchange，提问作者Avi Kraft