Docker部署React应用后，Kubernetes服务无法访问页面是怎么回事？

极客翌萌提问于 2026-03-14 14:52:21 阅读 8

工具

我用Docker打包了一个React应用，本地运行 docker run 能正常打开页面，但一部署到Kubernetes集群里，通过Service访问就一直报404。试过改Service类型为NodePort和LoadBalancer都不行，Ingress也配了，就是打不开。

前端代码很简单，就是一个App组件：

import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello from React!</h1>
    </div>
  );
}
export default App;

是不是Dockerfile或者K8s的配置哪里漏了？感觉像是路径没对上，但又不知道具体错在哪。

Docker

我来解答赞 1 收藏

反馈

1 条解答

令狐东慧 Lv1

这个问题很典型，十有八九是你的Dockerfile和Nginx配置没对上。

React应用构建后是静态文件，必须用Nginx来服务，而且Nginx必须配置SPA的路由 fallback。本地docker run能跑是因为你可能用的是开发模式或者node服务，但K8s里没配置对。

先检查你的Dockerfile，应该长这样：

# 构建阶段

FROM node:18 as builder

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build



# 运行阶段

FROM nginx:alpine

COPY --from=builder /app/build /usr/share/nginx/html

# 这里需要把自定义的nginx.conf复制进去

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

关键是nginx.conf里必须加上这个：

server {

    listen 80;

    server_name localhost;

    root /usr/share/nginx/html;

    index index.html;



    location / {

        try_files $uri $uri/ /index.html;

    }

}

try_files $uri $uri/ /index.html; 这行是核心，它让所有不存在的路径都fallback到index.html，这样React Router才能正常工作。

K8s那边基本配置对就行：

apiVersion: v1

kind: Service

metadata:

  name: my-react-app

spec:

  selector:

    app: my-react-app

  ports:

  - port: 80

    targetPort: 80

  type: ClusterIP

targetPort必须是80，因为Nginx监听80端口。

你本地docker run能打开说明前端代码没问题，问题就在Nginx配置这一块。加上try_files应该就能解决。

2026-03-14 15:02