Docker构建React镜像时为什么页面空白？

梓希（打工版）提问于 2026-03-26 20:25:21 阅读 14

工具

我用Docker打包一个React应用，本地npm start能正常跑，但build之后放进Nginx镜像里访问就是空白页，控制台也没报错，这到底啥情况？

我的组件代码很简单，就一个App.js：

import React from 'react';

function App() {
  return (
    <div className="app">
      <h1>Hello Docker!</h1>
    </div>
  );
}

export default App;

我Dockerfile里是先npm run build生成build目录，再COPY到Nginx的html下，路由用的是BrowserRouter，是不是这里有问题？

Docker Image镜像

我来解答赞 1 收藏

反馈

1 条解答

宇文瑄旗 Lv1

这问题我遇到过，多半是路径配置不对。你拿去改改：



FROM node:16-alpine as build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build



FROM nginx:alpine

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

# 关键在这里

RUN rm /etc/nginx/conf.d/default.conf

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

然后nginx.conf要这样配：



server {

    listen 80;

    location / {

        root   /usr/share/nginx/html;

        index  index.html index.htm;

        try_files $uri $uri/ /index.html;

    }

}

重点是 try_files 这句，解决单页应用的路由问题。BrowserRouter需要这个来处理前端路由。记得把这两个文件都改对，应该就能跑了。

累了，调试这种东西最烦人了，祝你好运。

2026-03-26 21:04