React-Express应用部署Azure Static Web App后仅显示默认页问题排查

配置错误点 #

从你的项目结构和Workflow配置来看，主要有以下几个问题导致部署后显示默认页面：

1. 前端路径与构建配置错误 #

你的React代码在client目录，但当前Workflow的app_location设为了根目录/，且output_location设为public——这不符合React项目的构建逻辑：

• React项目执行npm run build后，产物会生成在client/build目录，而非根目录的public
• 需要将app_location改为client，output_location改为build，同时明确指定app_build_command: "npm run build"

2. 后端API配置缺失 #

Express服务在server目录，但Workflow里未配置api_location，Azure无法识别并部署后端服务。需要添加api_location: "server"，如果后端需要构建（比如TypeScript），还要补充api_build_command: "npm install && npm run build"，纯JS项目可简化为npm install。

3. Node.js版本未指定 #

你使用的是Node.js v18.19.0，但Workflow里没有指定版本，Azure可能使用较低的默认版本引发兼容性问题。需在构建步骤前添加Node版本配置：

- name: Setup Node.js 18
  uses: actions/setup-node@v4
  with:
    node-version: '18.19.0'

修正后的完整Workflow配置 #

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
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false
      - name: Setup Node.js 18
        uses: actions/setup-node@v4
        with:
          node-version: '18.19.0'
      - name: Build and Deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LEMON_DUNE_05F7FBE03 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "client"
          api_location: "server"
          output_location: "build"

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

后续检查 #

• 确认client/package.json中存在"build": "react-scripts build"命令，运行后能生成client/build目录
• 确认server/package.json的start命令能正常启动Express服务
• 查看GitHub Actions的Workflow运行日志，排查是否有构建失败的具体报错

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