Kubernetes环境下React前端无法连接Go后端问题求助

一、端口转发3000:80失败的原因 #

你的前端容器监听的是3000端口（Deployment中配置了containerPort:3000），但你尝试转发到容器的80端口，而容器内没有进程监听80端口，导致连接被拒绝。直接使用以下命令即可正常访问前端：

kubectl port-forward <frontend-pod-name> 3000:3000

二、前端无法连接后端的问题 #

1. 先验证K8s内部网络连通性 #

在前端Pod内直接测试后端Service的可达性：

kubectl exec -it <frontend-pod-name> -- curl http://backend-service:8080/links

• 如果返回后端数据：说明K8s内部网络正常，问题出在前端的环境变量配置或打包逻辑
• 如果连接失败：检查以下几点
  • 后端Service的selector是否与后端Pod的labels完全匹配（你的后端Service selector为app: backend，确认后端Pod的labels包含该键值对）
  • 后端Pod是否正常运行：kubectl get pods -l app=backend，确保状态为Running
  • 后端容器是否在8080端口监听：kubectl exec -it <backend-pod-name> -- netstat -tulpn

2. React环境变量的核心坑 #

React的REACT_APP_*前缀环境变量需要在构建阶段注入，如果你是先构建镜像再部署到K8s，然后在Deployment中设置env，这种方式完全无效——因为React会在构建时把环境变量硬编码到静态文件中，运行时设置的环境变量不会被读取。

解决方式（二选一）

方式一：构建镜像时注入环境变量

修改Dockerfile，通过ARG传递环境变量：

FROM node:18-alpine as build
# 定义构建参数
ARG REACT_APP_BACKEND_URL
# 注入环境变量供构建使用
ENV REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 用Nginx托管静态文件（生产环境标准做法）
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80

构建镜像时传入参数：

docker build --build-arg REACT_APP_BACKEND_URL=http://backend-service:8080/links -t kamloic/tl-frontend:latest .

此时容器内Nginx监听80端口，需要把Deployment中的containerPort改成80，端口转发命令改为：

kubectl port-forward <frontend-pod-name> 3000:80

方式二：运行时动态替换变量（适合需动态配置的场景）

在Dockerfile中添加启动脚本，替换静态文件里的占位符：

FROM nginx:alpine
COPY build /usr/share/nginx/html
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

创建entrypoint.sh脚本：

#!/bin/sh
# 替换静态JS文件中的占位符
sed -i "s|REACT_APP_BACKEND_URL_PLACEHOLDER|$REACT_APP_BACKEND_URL|g" /usr/share/nginx/html/static/js/*.js
# 执行原启动命令
exec "$@"

构建前先把前端代码中的process.env.REACT_APP_BACKEND_URL替换为REACT_APP_BACKEND_URL_PLACEHOLDER，构建镜像后，在Deployment的env中正常设置REACT_APP_BACKEND_URL即可。

三、外部IP访问时/links返回前端index.html的问题 #

这是React单页应用（SPA）的典型问题：Nginx默认会把所有请求都转发到index.html。解决方法是配置Nginx区分静态资源和API请求：

方案：配置Nginx反向代理 #

在Nginx配置文件中添加规则，将API请求转发到后端Service：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # 静态资源直接返回
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # API请求转发到后端
    location /links {
        proxy_pass http://backend-service:8080/links;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 其他请求返回index.html（SPA路由需要）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

此时前端代码中的REACT_APP_BACKEND_URL可以设为/links，无论内部端口转发还是外部IP访问，都能正常转发到后端。

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