如何将React微前端部署到Minikube并解决加载异常问题？

核心问题：端口配置不匹配 #

你的Deployment里声明容器暴露的端口是80，但Service的targetPort设成了3000——这直接导致Service无法把流量转发到容器内的应用端口，所以页面能加载标题（可能是静态HTML），但主JS文件因为请求不到而报错。

修复步骤 #

1. 修正Service的端口配置
   把Service的targetPort改成容器实际监听的80端口，port（集群内部访问端口）可以设为80，保持和容器端口一致更直观：

   apiVersion: v1
   kind: Service
   metadata:
     name: mf1-service
   spec:
     type: NodePort
     selector:
       app: mf1
     ports:
       - protocol: TCP
         port: 80
         targetPort: 80
         nodePort: 31000
   

2. 重新应用配置
   执行命令更新Service：

   kubectl apply -f service.yaml
   

3. 验证配置有效性

   • 检查Pod状态是否正常运行：

     kubectl get pods -l app=mf1
     

   • 查看Service是否正确关联Pod端点：

     kubectl describe service mf1-service
     

     确认Endpoints字段显示Pod的IP地址和80端口。

额外排查方向 #

如果端口修正后仍有问题，试试这些操作：

• 查看容器日志，确认应用在容器内是否正常启动并监听80端口：

  kubectl logs <你的Pod名称>
  

• 直接在Minikube节点内测试Pod访问：

  minikube ssh
  curl http://<Pod的IP地址>:80
  

• 检查React应用的静态资源路径：确保构建时使用相对路径，避免因为部署环境的域名/端口变化导致资源加载失败。

内容的提问来源于stack exchange，提问作者Furkan Öztürk