本地正常运行的React Docker镜像部署到docker-desktop K8s后无法访问

问题原因 #

1. React开发服务器默认监听地址错误：create-react-app 自带的开发启动命令（npm start）启动的dev server默认仅监听容器内的127.0.0.1:3000，不会响应来自容器外部的请求，这是导致访问超时的核心原因。
2. Deployment端口配置不匹配：你的Deployment yaml里containerPort写的是80，但是React服务实际监听的是3000端口，虽然当前你直接做Pod端口转发暂时没触发这个问题，但配置本身是错误的，后续会导致Service无法正常转发流量。
3. 额外优化提示：生产环境不要用dev server运行React应用，性能、稳定性都极差，建议把构建出来的静态文件用Nginx这类专业Web服务托管。

修复步骤 #

第一步：调整React服务监听地址 #

任选一种方法修改即可，修改完成后重新构建reactdemo镜像：

• 方法1：直接修改Dockerfile的启动命令，添加监听0.0.0.0的参数

# 把原来的CMD替换成下面这行
CMD ["npm", "start", "--", "--host", "0.0.0.0"]

• 方法2：修改React项目package.json里的scripts配置

"start": "react-scripts start --host 0.0.0.0"

第二步：修正Deployment的端口配置 #

把Deployment中的containerPort: 80改成containerPort: 3000，修正后的容器配置片段如下：

containers:
- name: reactdemo
  image: reactdemo:latest
  imagePullPolicy: Never
  ports:
    - containerPort: 3000             

第三步：重新部署资源 #

删除原有资源后重新应用修改后的yaml：

kubectl delete -f <你的yaml文件名>.yaml
kubectl apply -f <你的yaml文件名>.yaml

第四步：访问验证 #

你配置了NodePort为31000，部署完成后直接访问localhost:31000即可，不需要额外做端口转发。如果需要用端口转发，也可以直接转发到Service更方便：

kubectl port-forward service/demo 31000:3000

此时访问localhost:31000就能正常看到React首页。

生产环境优化方案（推荐） #

直接用Nginx托管React构建后的静态资源，镜像体积更小、性能更高、稳定性更强，参考Dockerfile如下：

# 构建阶段：仅负责编译出静态资源
FROM node as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# 运行阶段：只保留nginx和静态资源
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

对应修改Deployment的containerPort为80，Service的targetPort为80即可。

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