Vite React App部署至Azure App Service失败问题求助

我尝试将Vite React应用部署到Azure App Service，但部署后始终显示默认页面（见附图）。我已尝试通过VS Code手动部署，也创建了如下GitHub Actions的YAML文件，流水线运行成功但问题仍存在。我的React应用位于./LOL_Contest/frontend目录，希望部署该文件夹内容，文件夹结构如下，求解决方案：

现有GitHub Actions配置：

name: Build and deploy Node.js app to Azure Web App - lolcontest-fe

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:        
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
        working-directory: ./LOL_Contest/frontend

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'lolcontest-fe'
          slot-name: 'Production'
          publish-profile: ${{ ... }}
          package: ./LOL_Contest/frontend

文件夹结构：

- DataAccess
- LOL_Contest
  -- frontend

1. 修正GitHub Actions的构建产物上传路径 #

当前构建步骤上传的是整个仓库根目录，实际需要上传的是Vite构建后的dist文件夹。修改build阶段的上传步骤：

- name: Upload artifact for deployment job
  uses: actions/upload-artifact@v2
  with:
    name: node-app
    path: ./LOL_Contest/frontend/dist

2. 修正部署阶段的包路径 #

下载产物后，部署目标应为整个dist文件夹内容，而非原frontend目录。修改deploy阶段的部署步骤：

- name: 'Deploy to Azure Web App'
  id: deploy-to-webapp
  uses: azure/webapps-deploy@v2
  with:
    app-name: 'lolcontest-fe'
    slot-name: 'Production'
    publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
    package: .

3. 配置Azure App Service静态网站支持 #

Azure App Service默认不自动识别静态文件，需添加配置：

• 进入Azure门户，打开目标App Service
• 导航至配置 > 常规设置，将启动命令设置为：npx serve -s dist
• 或在frontend/dist目录下创建web.config文件（处理路由重写），内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

4. 验证VS Code手动部署路径 #

用VS Code手动部署时，先在本地执行npm run build生成dist文件夹，再选择frontend/dist作为部署目标文件夹，而非整个frontend目录。

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