Azure Windows React 部署遇到错误

Question

我正在尝试将我的 React 应用程序部署到新创建的 Azure 服务中。我遵循了此指南，但在尝试上传构建文件夹后，我收到此错误消息：

4:29:02 PM 1001GoldService: Deployment Failed. deployer = ms-azuretools-vscode deploymentPath = ZipDeploy. Extract zip. Remote build.
4:29:09 PM 1001GoldService: Deployment failed.

由于这是我第一次使用 Azure，所以我发现它有点令人困惑，特别是当我尝试搜索该错误的修复方法时。我的猜测是 package.json 的某些内容不正确，所以这里是文件：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.1",
    "react-scripts": "5.0.1",
    "sfcookies": "^1.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我真的希望有人指出我的问题所在并帮助我部署React应用程序。

完整输出：

4:28:54 PM 1001GoldService: Starting deployment...
4:28:54 PM 1001GoldService: Creating zip package...
4:28:55 PM 1001GoldService: Zip package size: 2.2 MB
4:28:54 PM 1001GoldService: Fetching changes.
4:28:55 PM 1001GoldService: Cleaning up temp folders from previous zip deployments and extracting pushed zip file /tmp/zipdeploy/2834e240-ff72-469e-9de0-c8114be6ebc3.zip (2.10 MB) to /tmp/zipdeploy/extracted
4:28:57 PM 1001GoldService: Updating submodules.
4:28:58 PM 1001GoldService: Preparing deployment for commit id 'e8191abd-2'.
4:28:59 PM 1001GoldService: PreDeployment: context.CleanOutputPath False
4:28:59 PM 1001GoldService: PreDeployment: context.OutputPath /home/site/wwwroot
4:28:59 PM 1001GoldService: Repository path is /tmp/zipdeploy/extracted
4:28:59 PM 1001GoldService: Running oryx build...
4:28:59 PM 1001GoldService: Command: oryx build /tmp/zipdeploy/extracted -o /home/site/wwwroot --platform nodejs --platform-version 18 -p virtualenv_name= --log-file /tmp/build-debug.log  -i /tmp/8dc37a8d19f24d9 -p compress_node_modules=tar-gz | tee /tmp/oryx-build.log
4:29:00 PM 1001GoldService: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
4:29:00 PM 1001GoldService: You can report issues at https://github.com/Microsoft/Oryx/issues
4:29:00 PM 1001GoldService: Oryx Version: 0.2.20230508.1, Commit: 7fe2bf39b357dd68572b438a85ca50b5ecfb4592, ReleaseTagName: 20230508.1
4:29:00 PM 1001GoldService: Build Operation ID: 01877ae608ca5bb9
4:29:00 PM 1001GoldService: Repository Commit : e8191abd-253a-4dd7-8bc3-cccc87557b95
4:29:00 PM 1001GoldService: OS Type           : bullseye
4:29:00 PM 1001GoldService: Image Type        : githubactions
4:29:00 PM 1001GoldService: Detecting platforms...
4:29:00 PM 1001GoldService: Could not detect any platform in the source directory.
4:29:00 PM 1001GoldService: Error: Couldn't detect a version for the platform 'nodejs' in the repo.
4:29:01 PM 1001GoldService: /bin/bash -c "oryx build /tmp/zipdeploy/extracted -o /home/site/wwwroot --platform nodejs --platform-version 18 -p virtualenv_name= --log-file /tmp/build-debug.log  -i /tmp/8dc37a8d19f24d9 -p compress_node_modules=tar-gz | tee /tmp/oryx-build.log ; exit $PIPESTATUS "
4:29:01 PM 1001GoldService: Generating summary of Oryx build
4:29:01 PM 1001GoldService: Parsing the build logs
4:29:01 PM 1001GoldService: Found 0 issue(s)
4:29:01 PM 1001GoldService: Build Summary :
4:29:01 PM 1001GoldService: ===============
4:29:02 PM 1001GoldService: Errors (0)
4:29:02 PM 1001GoldService: Warnings (0)
4:29:02 PM 1001GoldService: Deployment Failed. deployer = ms-azuretools-vscode deploymentPath = ZipDeploy. Extract zip. Remote build.
4:29:09 PM 1001GoldService: Deployment failed.

Answer 1

我尝试按照您提到的指南进行操作。在您的情况下，错误可能与 Node.js 版本有关。

尝试更新节点版本，然后将其相应地映射到 Azure Web 应用程序的运行时堆栈中。

使用以下命令更新节点版本：

npm install -g node@latest

我使用的是 Node 版本 20。

创建一个React应用程序： 第 1 步：

npx create-react-app your-app-name

第2步：

cd your-app-name

第3步：

npm start

第4步：准备好将 Web 应用程序部署到 Azure 后，您需要构建该应用程序。

npm run build

在 Visual Studio Code 中，选择任务栏中的 Azure 徽标以打开 Azure 窗口。

步骤如下：

选择您的 Azure 订阅。
然后，选择您创建的网络应用程序。
右键单击网络应用程序；您可以看到“部署到 Web 应用程序”选项。

enter image description here

单击“浏览”而不是选择整个应用程序，然后选择要部署的构建文件夹。

enter image description here

10:59:34 AM Sreactweb: Starting deployment...
10:59:34 AM Sreactweb: Creating zip package...
10:59:35 AM Sreactweb: Zip package size: 188 kB
10:59:33 AM Sreactweb: Updating submodules.
10:59:33 AM Sreactweb: Preparing deployment for commit id '4f37422d1f'.
10:59:33 AM Sreactweb: Generating deployment script.
10:59:33 AM Sreactweb: Using the following command to generate deployment script: 'azure site deploymentscript -y --no-dot-deployment -r "C:\local\Temp\zipdeploy\extracted" -o "C:\home\site\deployments\tools" --basic --sitePath "C:\local\Temp\zipdeploy\extracted"'.
10:59:35 AM Sreactweb: AppInsightsAgent: ETW could not be loaded
10:59:48 AM: Deployment to "Sreactweb" completed.

检查azure中部署的文件

1.打开您的Azure应用程序服务。 2. 搜索高级工具并单击它。 3. 然后，单击“开始”。

enter image description here