React+Symfony6+Docker环境下build/app.js 404错误排查求助

1. Nginx挂载路径与Root配置不匹配（核心问题） #

你的docker-compose.yaml中Nginx的挂载配置存在逻辑错误：

volumes:
  - './app/public/:/var/www/app'

该配置将本地app/public目录挂载到容器的/var/www/app，但Nginx配置的root为/var/www/app/public，这意味着容器内实际要查找的静态文件路径是/var/www/app/public/build/app.js——但挂载后/var/www/app目录下已经是本地app/public的内容，/var/www/app/public这个路径根本不存在，导致静态资源无法被访问。

解决方法：
修改docker-compose.yaml中Nginx的挂载配置，将本地app目录完整挂载到容器/var/www/app：

volumes:
  - './app/:/var/www/app'  # 替换原有的./app/public/:/var/www/app
  - './docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro'

修改后，Nginx的root /var/www/app/public会正确指向容器内的/var/www/app/public目录（对应本地app/public），build下的静态资源即可正常访问。

2. 确认Twig模板正确引入Webpack资源 #

需确保Twig模板（如templates/base.html.twig或页面模板）中正确引入Webpack Encore生成的资源，并存在React渲染的根容器：

{# 在<head>内引入样式 #}
{{ encore_entry_link_tags('styles') }}

{# 页面中添加React根容器 #}
<div id="root"></div>

{# 在</body>结束前引入脚本 #}
{{ encore_entry_script_tags('app') }}

3. 验证React入口文件代码正确性 #

检查assets/react/index.js是否正确将组件渲染到根容器（React 18+推荐使用createRoot）：

import React from 'react';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Root container not found in DOM');

const root = createRoot(rootElement);
root.render(<h1>Hello world</h1>);

4. 清除缓存并重新构建 #

执行以下步骤确保所有资源为最新状态：

1. 清除Webpack构建缓存：npm run build -- --clean
2. 清除Symfony缓存（生产环境）：php bin/console cache:clear --env=prod
3. 重启Docker容器：docker-compose down && docker-compose up -d

5. 查看Nginx日志定位细节 #

若问题仍存在，通过Nginx错误日志排查具体路径问题：

# 进入Nginx容器
docker exec -it <你的Nginx容器名称> /bin/bash
# 查看错误日志
cat /var/log/nginx/error.log

日志会明确提示文件找不到的具体路径，帮助进一步定位问题。

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