Docker容器中Symfony 6的Yarn/node_modules权限问题排查

核心问题分析 #

你遇到的Uncaught ReferenceError: $ is not set本质是前端依赖未被正确构建或加载，和权限的关联不大——毕竟已经用root权限执行了所有操作，777权限也排除了文件访问限制，重点要放在构建流程和文件映射上。

逐一排查修复步骤 #

1. 补全Docker多阶段构建的产物传递 #

你的Dockerfile定义了node_builder阶段，但完全没把这个阶段的依赖和构建产物复制到最终的PHP容器里，等于容器里的node_modules和public/build都是空的（如果没挂载本地卷的话）。修改Dockerfile：

• 先完善node_builder阶段的构建流程：

  FROM node:18.12.1-alpine3.15 as node_builder
  WORKDIR /var/www
  # 先复制依赖配置文件，利用Docker缓存
  COPY package.json yarn.lock ./
  RUN yarn install --frozen-lockfile
  # 复制项目代码
  COPY . .
  # 执行构建
  RUN yarn build:dev
  

• 然后在php_builder阶段添加复制指令：

  # 在COPY wkhtmltopdf相关指令之后添加
  COPY --from=node_builder /var/www/node_modules /var/www/node_modules
  COPY --from=node_builder /var/www/public/build /var/www/public/build
  

2. 检查Webpack Encore配置 #

• 打开webpack.config.js，确认是否启用了jQuery（如果$是指jQuery）：

  Encore.enablejQuery();
  

• 检查入口文件是否包含了需要的JS模块，比如是否在assets/app.js里导入了jQuery或相关依赖：

  import $ from 'jquery';
  global.$ = global.jQuery = $;
  

• 执行yarn encore dev --verbose，查看构建日志里有没有依赖缺失、路径错误的警告（之前的yarn build:dev可能没显示详细信息）。

3. 验证静态文件的Nginx访问配置 #

• 检查Nginx容器的配置，确保/build路径的请求直接返回静态文件，而不是交给PHP处理：

  location ^~ /build/ {
      alias /usr/share/nginx/html/build/;
      expires 1y;
      add_header Cache-Control "public, immutable";
  }
  

• 在浏览器里直接访问http://你的域名/build/app.js，如果返回404，说明文件没被正确挂载到Nginx的静态目录，需要调整docker-compose.yml里的卷挂载配置，比如：

  services:
    nginx:
      volumes:
        - ./app/public:/usr/share/nginx/html
  

4. 清理缓存干扰 #

• 进入应用容器，执行rm -rf public/build && yarn cache clean && yarn build:dev，彻底清理旧的构建产物和缓存；
• 如果本地开发用了Docker卷挂载public/build，先临时注释掉卷配置，测试容器内独立构建的结果是否正常。

验证方法 #

1. 进入应用容器，执行ls public/build，确认有app.js、runtime.js等构建产物；
2. 查看浏览器Network面板，确认JS文件加载状态为200，且文件内容不是空的；
3. 刷新页面，检查控制台是否还有未定义错误。

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