从Azure DevOps部署React前端至Azure AppService遇npm报错排查

问题根源 #

你部署的是React构建后的build静态目录，但Azure App Service的Node.js运行时栈默认会尝试在站点根目录寻找package.json并执行npm start启动应用——而build目录里没有这个文件，所以触发了找不到文件的错误。

解决办法 #

办法1：修改App Service启动命令 #

直接指定静态文件托管命令，让App Service无需依赖package.json：

• 进入Azure门户，打开你的App Service
• 转到配置 > 常规设置
• 在启动命令中填入：npx serve -s .
  这个命令会用serve工具托管当前目录（即你部署的build目录）下的静态文件，适配React的单页应用路由
• 保存配置并重启App Service

办法2：添加简易Node服务并部署完整项目 #

如果需要更灵活的控制（比如自定义路由、中间件），可以在项目根目录添加一个简单的Express服务：

1. 在项目根目录创建server.js，内容如下：

const express = require('express');
const path = require('path');
const app = express();

// 托管build目录下的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 处理React单页应用的路由 fallback
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 监听App Service分配的端口
app.listen(process.env.PORT || 3000);

2. 在项目根目录的package.json中添加依赖和启动命令：
   • 安装依赖：npm install express --save
   • 修改scripts字段：

     "scripts": {
       "start": "node server.js",
       "build": "react-scripts build",
       // 保留其他原有命令
     }
     

3. 修改Azure DevOps流水线，部署项目根目录（而非仅build目录），确保package.json、server.js和build目录都被部署到App Service
4. 重启App Service，此时它会自动执行npm start启动Express服务，托管静态文件

补充说明 #

React的build目录是纯静态资源，本身不需要Node.js运行时——但你选择了Node.js栈的App Service，所以必须告诉它如何处理这些静态文件。上述两种办法都能解决找不到package.json的问题，根据你的需求选择即可。

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