Docker容器运行React应用时为什么无法访问静态资源？

文明提问于 2026-02-10 13:26:28 阅读 15

工具

我用Docker部署了一个React应用，但访问时图片和CSS都显示404。本地开发时正常，构建后的容器却加载不了静态资源。检查过路径没问题，重启容器也不行…

这是我的React组件代码：


import logo from './logo.png';

function App() {
  return (
    <div>
      <img src={logo} alt="Logo" />
      <h1 className="text-3xl">Hello Docker!</h1>
    </div>
  );
}

export default App;

Dockerfile用了nginx镜像，相关配置是：


FROM nginx:alpine
COPY ./build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose里设置了端口映射，但访问http://localhost/logo.png还是404，控制台报错显示路径找不到。是不是容器挂载有问题？

Docker

我来解答赞 4 收藏

反馈

1 条解答

江洁的笔记 Lv1

你这个问题不是挂载问题，是React构建后静态资源路径处理的坑。你用import引入logo.png，webpack会把图片打包进static目录，最终生成带hash的文件名，比如 static/media/logo.xxx.png。直接访问 /logo.png 当然404，因为根本没这路径。

第一个要改的是build上下文。你的Dockerfile看着没问题，但得确认build目录确实是通过npm run build生成的。先在本地跑一遍build，看看build/static/media下面有没有图片产出。

第二个关键是publicPath。React默认假设资源放在根目录，但如果你的容器前端挂在子路径下（比如 /app），就会出事。不过看你是直接扔nginx根目录，这块应该还好。检查package.json，别乱加homepage字段，如果是相对路径部署，就设"."或者删掉homepage。

最可能的问题出在nginx配置。默认的nginx镜像配置可能没配单页应用的fallback，导致刷新页面或直连静态资源路径时走index.html。你现在能访问/但资源404，说明路由转发有问题。加个nginx.conf：

server {

    listen 80;

    location / {

        root /usr/share/nginx/html;

        index index.html;

        try_files $uri $uri/ /index.html;

    }

}

然后Dockerfile改成：

FROM nginx:alpine

COPY ./build /usr/share/nginx/html

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

EXPOSE 80

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

try_files这句最关键，保证所有前端路由都回落到index.html，让React Router接手。不然nginx找不到/logo.png这种路径就直接返回404了。

最后验证：进容器docker exec -it 容器id sh，看看/usr/share/nginx/html下面有没有static目录，图片在不在。不在就是build没搞好，在的话就是nginx没转发对。

数据库层面倒是没啥事，纯前端构建+服务配置问题。

2026-02-10 14:02