从VS Code部署React应用到Azure App Service时Node.js版本检测失败

问题描述 #

通过VS Code的Azure App Service扩展部署简单React应用到Azure App Service时失败，报错：Couldn't detect a version for the platform 'nodejs' in the repo。本地机器和Azure Web App的Node.js版本均为16，部署日志如下：

9:10:47 pm spa1234: Command: oryx build /tmp/zipdeploy/extracted -o /home/site/wwwroot --platform nodejs --platform-version 16 -p virtualenv_name= --log-file /tmp/build-debug.log -i /tmp/8dab4f80016b776 -p compress_node_modules=tar-gz | tee /tmp/oryx-build.log
9:10:53 pm spa1234: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
9:10:53 pm spa1234: You can report issues at https://github.com/Microsoft/Oryx/issues
9:10:53 pm spa1234: Oryx Version: 0.2.20220812.1, Commit: cdf6b1b, ReleaseTagName: 20220812.1
9:10:53 pm spa1234: Build Operation ID: |75RCaacLtWg=.52a37c81_
9:10:53 pm spa1234: Repository Commit : 745ee158-98c2-4cb4-8cba-c067ab33681a
9:10:53 pm spa1234: Detecting platforms...
9:10:53 pm spa1234: Could not detect any platform in the source directory.
9:10:53 pm spa1234: Error: Couldn't detect a version for the platform 'nodejs' in the repo.
9:10:56 pm spa1234: /bin/bash -c "oryx build /tmp/zipdeploy/extracted -o /home/site/wwwroot --platform nodejs --platform-version 16 -p virtualenv_name= --log-file /tmp/build-debug.log -i /tmp/8dab4f80016b776 -p compress_node_modules=tar-gz | tee /tmp/oryx-build.log ; exit $PIPESTATUS "
9:10:56 pm spa1234: Generating summary of Oryx build
9:10:56 pm spa1234: Parsing the build logs
9:10:56 pm spa1234: Found 0 issue(s)
9:10:56 pm spa1234: Build Summary :

解决方法 #

• 在项目根目录的package.json中指定Node.js版本
  添加engines字段明确版本，让Oryx能识别：

  {
    "engines": {
      "node": "16.x"
    }
  }
  

• 确认部署路径为项目根目录
  检查VS Code的Azure App Service扩展部署配置，确保选中的是包含package.json的React项目根目录，避免部署子目录导致关键文件缺失。

• 在Azure门户强制指定Node.js版本
  进入Web App的「配置」>「通用设置」，设置启动命令为npm start；再到「应用程序设置」添加环境变量：

  • WEBSITE_NODE_DEFAULT_VERSION：值设为16.xx（具体版本号）

• 预构建后部署静态文件
  本地执行npm run build生成静态资源（默认在build目录），然后通过VS Code的Azure扩展直接部署build目录，跳过Oryx的构建步骤。

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