为什么我的 React Static Web App 无法在 Azure 中部署？

Question

我正在尝试在 Azure 门户中创建静态 Web 应用程序并部署用 github 上的 Visual Studio Code 编写的 React 代码。

我遵循的说明在这里：

快速入门：使用 Azure 静态 Web 应用构建第一个静态站点

步骤：

1. 创建静态 Web 应用程序 -> my-react-project

2. 选择区域 -> 美国东部 2

3. 选择构建预设 -> React

4. 输入应用程序代码的位置 -> /

5. 输入构建输出的位置->构建

6. 此时我收到这条消息：

7. 然后构建部署失败：

   内容服务器已拒绝请求：BadRequest

   原因：未找到匹配的静态Web应用程序或api密钥无效。

Run Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ***
repo_token: ***
action: upload
app_location: /
api_location: api
output_location: build
/usr/bin/docker run --name b469e5e693774fc22146d1ae8f22f864953d6a_86588a --label b469e5 --workdir /github/workspace --rm -e "INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN" -e "INPUT_REPO_TOKEN" -e "INPUT_ACTION" -e "INPUT_APP_LOCATION" -e "INPUT_API_LOCATION" -e "INPUT_OUTPUT_LOCATION" -e "INPUT_API_BUILD_COMMAND" -e "INPUT_APP_ARTIFACT_LOCATION" -e "INPUT_APP_BUILD_COMMAND" -e "INPUT_ROUTES_LOCATION" -e "INPUT_SKIP_APP_BUILD" -e "INPUT_CONFIG_FILE_LOCATION" -e "INPUT_SKIP_API_BUILD" -e "INPUT_PRODUCTION_BRANCH" -e "INPUT_DEPLOYMENT_ENVIRONMENT" -e "INPUT_IS_STATIC_EXPORT" -e "INPUT_DATA_API_LOCATION" -e "HOME" -e "GITHUB_JOB" -e "GITHUB_REF" -e "GITHUB_SHA" -e "GITHUB_REPOSITORY" -e "GITHUB_REPOSITORY_OWNER" -e "GITHUB_REPOSITORY_OWNER_ID" -e "GITHUB_RUN_ID" -e "GITHUB_RUN_NUMBER" -e "GITHUB_RETENTION_DAYS" -e "GITHUB_RUN_ATTEMPT" -e "GITHUB_REPOSITORY_ID" -e "GITHUB_ACTOR_ID" -e "GITHUB_ACTOR" -e "GITHUB_TRIGGERING_ACTOR" -e "GITHUB_WORKFLOW" -e "GITHUB_HEAD_REF" -e "GITHUB_BASE_REF" -e "GITHUB_EVENT_NAME" -e "GITHUB_SERVER_URL" -e "GITHUB_API_URL" -e "GITHUB_GRAPHQL_URL" -e "GITHUB_REF_NAME" -e "GITHUB_REF_PROTECTED" -e "GITHUB_REF_TYPE" -e "GITHUB_WORKFLOW_REF" -e "GITHUB_WORKFLOW_SHA" -e "GITHUB_WORKSPACE" -e "GITHUB_ACTION" -e "GITHUB_EVENT_PATH" -e "GITHUB_ACTION_REPOSITORY" -e "GITHUB_ACTION_REF" -e "GITHUB_PATH" -e "GITHUB_ENV" -e "GITHUB_STEP_SUMMARY" -e "GITHUB_STATE" -e "GITHUB_OUTPUT" -e "RUNNER_OS" -e "RUNNER_ARCH" -e "RUNNER_NAME" -e "RUNNER_ENVIRONMENT" -e "RUNNER_TOOL_CACHE" -e "RUNNER_TEMP" -e "RUNNER_WORKSPACE" -e "ACTIONS_RUNTIME_URL" -e "ACTIONS_RUNTIME_TOKEN" -e "ACTIONS_CACHE_URL" -e "ACTIONS_RESULTS_URL" -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/my-react-project/my-react-project":"/github/workspace" b469e5:e693774fc22146d1ae8f22f864953d6a

DeploymentId: 04ac8c8e-306d-498e-890f-885b056fb322

Try to validate location at: '/github/workspace'.
App Directory Location: '/' was found.
Try to validate location at: '/github/workspace/swa-db-connections'.
Looking for event info
The content server has rejected the request with: BadRequest
Reason: No matching Static Web App was found or the api key was invalid.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting

回购协议在这里：

回购

预先感谢您的指导。

Answer 1

我按如下方式更改了您的 App.js 文件，并成功将其部署到 Azure 静态 Web 应用程序。

代码：

App.js：

import React from 'react'; // Remove {useState} from this import
import GoalList from './components/GoalList';
import Header from './components/Header';
import logo from './logo2.svg';
import './App.css';

const ShowGoals = () => {
  const [showGoals, setShowGoals] = React.useState(false); // Use React.useState instead of useState
  const onClick = () => setShowGoals(true);
  return (
    <div>
      <input type="submit" value="Goals" onClick={onClick}></input>
      {showGoals ? <Goals /> : null}
    </div>
  );
}

const Goals = () => (
  <div id="goals">
    <Header />
    <GoalList />
  </div>
)

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <body>
          <p className='smaller'>
            Hello, My name is Doug Dexter and I am looking for my next opportunity as a web developer.
            <hr />
            I am currently learning full-stack development 
            using React and ASP.Net Core API.
            <hr />
            This website is written in React.
            <hr />
            <ShowGoals />
          </p>
        </body>
      </header>
    </div>
  );
}

export default App;

GitHub 工作流程：

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_FLOWER_06B90A80F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/" 
          api_location: "api" 
          output_location: "build" 

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_FLOWER_06B90A80F }}
          action: "close"

Azure 静态 Web 应用程序输出：