使用serve.js为React静态文件添加自定义头时出现Module not found错误

问题逐一解答 #

1. 操作流程是否正确？ #

整体方向正确，但存在三处关键疏漏：

• 未正确将serve-handler依赖安装到serve.js运行时可读取的路径
• 现有serve.js未匹配原有serve命令的静态资源路径、端口配置，也未实际添加CSP头规则
• Dockerfile的依赖安装、启动命令存在语法和逻辑错误

2. 问题是否和路径有关，还是serve.js无法找到对应依赖包？ #

二者都存在：

• 你使用的是monorepo项目结构，直接执行yarn add serve-handler时，yarn会默认阻止依赖安装到工作区根目录，触发错误2的报错
• 即使强制安装到根目录或全局，serve.js运行时的工作目录是/packages/app-fe-webapp/，默认只在当前目录的node_modules下查找依赖，找不到全局/根目录的依赖就会触发错误1的MODULE_NOT_FOUND报错
• 错误3的警告是因为全局安装的serve本身已经内置了对应版本的serve-handler，重复安装同包不同版本会触发冲突提示

3. 用自定义serve.js覆写原生serve时，是否需要额外指定参数来启用该文件？ #

不需要额外参数启用，但你的serve.js缺少必要配置，和原有serve逻辑不匹配，修改后的完整serve.js示例如下：

const handler = require('serve-handler');
const http = require('http');

const server = http.createServer((request, response) => {
  // 第三个参数传入配置，匹配原有serve命令的规则+添加CSP头
  return handler(request, response, {
    public: './dist', // 指定静态资源根目录为dist
    headers: [
      {
        source: '**/*', // 所有请求都添加该头
        headers: [
          {
            key: 'Content-Security-Policy',
            value: '替换为你实际需要的CSP规则'
          }
          // 可添加其他自定义响应头
        ]
      }
    ]
  });
})

// 监听8080端口，和原有serve命令端口一致
server.listen(8080, () => {
  console.log('Running at http://localhost:8080');
});

4. Dockerfile中使用的命令是否正确？ #

原有新命令存在语法错误，依赖安装步骤也需要调整，正确的Dockerfile配置示例如下：

# 先切换到应用对应的工作目录
WORKDIR /packages/app-fe-webapp
# 安装依赖，添加-W参数允许monorepo根目录安装依赖
RUN yarn global add serve
RUN yarn add serve-handler -W
# 修正启动命令的引号问题
CMD ["node", "serve.js"]

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