部署至Azure Web App的React应用出现MODULE_NOT_FOUND错误求助

问题分析 #

从错误日志可以看到，/home/site/wwwroot/node_modules/.bin/react-scripts找不到../scripts/start模块，核心原因有两个：

1. 部署过程中node_modules内的react-scripts包未完整安装，缺失依赖文件；
2. 错误使用了开发环境的启动命令react-scripts start，该命令不适合Azure生产环境部署。

解决步骤 #

1. 切换为静态文件部署（推荐方案） #

React应用生产环境应该部署构建后的静态资源，而非直接运行开发服务：

• 在本地项目根目录执行构建命令：

  npm run build
  

  这会生成build文件夹，包含所有静态HTML、CSS、JS文件。
• 修改Azure Web App的部署配置：
  • 如果用GitHub Actions部署，确保部署步骤指向build文件夹；
  • 如果用Azure门户部署，上传build文件夹内的所有文件到/home/site/wwwroot。
• Azure Linux环境会自动识别静态文件，无需额外启动命令。

2. 用serve托管静态文件（备选方案） #

如果需要用Node.js服务托管静态文件，可使用serve包替代react-scripts start：

• 安装依赖：

  npm install serve --save-dev
  

• 修改package.json的scripts：

  {
    "scripts": {
      "start": "serve -s build",
      "build": "react-scripts build"
    }
  }
  

• 重新部署代码，Azure会执行npm start启动静态文件服务，端口自动适配环境变量PORT。

3. 清理并重新安装依赖 #

如果确认要继续使用react-scripts（不推荐生产环境），需确保依赖完整：

• 删除Azure Web App内的node_modules文件夹和package-lock.json；
• 重新触发部署，确保部署过程中npm install命令完整执行，无报错；
• 检查部署日志，确认react-scripts包被正确安装到node_modules中。

错误日志 #

2023-08-26T21:22:06.717089653Z    _____                               
2023-08-26T21:22:06.717127133Z   /  _  \ __________ _________   ____   
2023-08-26T21:22:06.717136631Z  /  /_\  \\___   /  |  \_  __ \_/ __ \ 
2023-08-26T21:22:06.717140979Z /    |    \/    /|  |  /|  | \/\  ___/ 
2023-08-26T21:22:06.717145377Z \____|__  /_____ \____/ |__|    \___  >
2023-08-26T21:22:06.717149796Z         \/      \/                  \/ 
2023-08-26T21:22:06.717153343Z A P P   S E R V I C E   O N   L I N U X
2023-08-26T21:22:06.717156809Z 
2023-08-26T21:22:06.717160115Z Documentation: http://aka.ms/webapp-linux
2023-08-26T21:22:06.717161989Z NodeJS quickstart: https://aka.ms/node-qs
2023-08-26T21:22:06.717163812Z NodeJS Version : v18.16.1
2023-08-26T21:22:06.717165585Z Note: Any data outside '/home' is not persisted
2023-08-26T21:22:06.717167419Z 
2023-08-26T21:22:07.244829379Z Starting OpenBSD Secure Shell server: sshd.
2023-08-26T21:22:07.394588279Z Starting periodic command scheduler: cron.
2023-08-26T21:22:07.609497822Z Could not find build manifest file at '/home/site/wwwroot/oryx-manifest.toml'
2023-08-26T21:22:07.609529071Z Could not find operation ID in manifest. Generating an operation id...
2023-08-26T21:22:07.609535893Z Build Operation ID: f88a9047-884b-4267-95d9-2085b8a5e06d
2023-08-26T21:22:07.828483725Z Environment Variables for Application Insight's IPA Codeless Configuration exists..
2023-08-26T21:22:07.867662678Z Writing output script to '/opt/startup/startup.sh'
2023-08-26T21:22:07.928152795Z Running #!/bin/sh
2023-08-26T21:22:07.928182200Z 
2023-08-26T21:22:07.928189413Z # Enter the source directory to make sure the script runs where the user expects
2023-08-26T21:22:07.928216364Z cd "/home/site/wwwroot"
2023-08-26T21:22:07.928221193Z 
2023-08-26T21:22:07.928225651Z export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
2023-08-26T21:22:07.928230240Z if [ -z "$PORT" ]; then
2023-08-26T21:22:07.928234648Z      export PORT=8080
2023-08-26T21:22:07.928238776Z fi
2023-08-26T21:22:07.928242313Z 
2023-08-26T21:22:07.928245759Z npm start
2023-08-26T21:22:15.473095058Z npm info using npm@9.6.4
2023-08-26T21:22:15.476135731Z npm info using node@v18.16.1
2023-08-26T21:22:15.769149040Z 
2023-08-26T21:22:15.769177904Z > poll-ui@0.1.0 start
2023-08-26T21:22:15.769185007Z > react-scripts start
2023-08-26T21:22:15.769190357Z 
2023-08-26T21:22:15.996996292Z node:internal/modules/cjs/loader:1080
2023-08-26T21:22:15.997126006Z   throw err;
2023-08-26T21:22:15.997133580Z   ^
2023-08-26T21:22:15.997149409Z 
2023-08-26T21:22:15.997153848Z Error: Cannot find module '../scripts/start'
2023-08-26T21:22:15.997157745Z Require stack:
2023-08-26T21:22:15.997161462Z - /home/site/wwwroot/node_modules/.bin/react-scripts
2023-08-26T21:22:15.997165089Z     at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
2023-08-26T21:22:15.997168856Z     at Function.resolve (node:internal/modules/cjs/helpers:116:19)
2023-08-26T21:22:15.997172342Z     at Object.<anonymous> (/home/site/wwwroot/node_modules/.bin/react-scripts:31:23)
2023-08-26T21:22:15.997176330Z     at Module._compile (node:internal/modules/cjs/loader:1256:14)
2023-08-26T21:22:15.997179646Z     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
2023-08-26T21:22:15.997183453Z     at Module.load (node:internal/modules/cjs/loader:1119:32)
2023-08-26T21:22:15.997187000Z     at Module._load (node:internal/modules/cjs/loader:960:12)
2023-08-26T21:22:15.997190606Z     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
2023-08-26T21:22:15.997193993Z     at node:internal/main/run_main_module:23:47 {
2023-08-26T21:22:15.997197509Z   code: 'MODULE_NOT_FOUND',
2023-08-26T21:22:15.997201337Z   requireStack: [ '/home/site/wwwroot/node_modules/.bin/react-scripts' ]
2023-08-26T21:22:15.997205474Z }
2023-08-26T21:22:15.997768208Z 
2023-08-26T21:22:15.997777886Z Node.js v18.16.1

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