如何使用 Create React App 和 React router v6 正确配置 Azure 静态 Web 应用程序

Question

我有一个React应用程序，它使用create React App和React Router v6。它正在通过 github 操作部署到 Azure 静态 Web 应用程序。

操作的 .yml 文件如下所示

name: Azure Static Web Apps CI/CD

on:
    push:
        branches:
            - feature/*

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
            - name: Build And Deploy
              id: builddeploy
              uses: Azure/static-web-apps-deploy@v1
              with:
                  azure_static_web_apps_api_token: ${{ secrets.TOKEN }}
                  repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
                  action: 'upload'
                  ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
                  # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
                  app_location: '/' # App source code path
                  api_location: 'api' # Api source code path - optional
                  output_location: 'build' # Built app content directory - optional
                  ###### End of Repository/Build Configurations ######
              env:
                  ...

    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.TOKEN }}
                  action: 'close'

至于应用程序本身，目前相当简单，到目前为止只有少数路线：

const AppRoutes = () => {
    return (
                <Routes>
                    <Route element={<GlobalLayout />}>
                        <Route index element={<Home />} />
                        <Route path="/profile" element={<Profile />} />
                        <Route path="/orders" element={<Orders />} />
                        <Route path="/orders/:oid" element={<ProjectDetails />} />
                        <Route path="/helpcenter" element={<HelpCenter />} />

                        <Route path="*" element={<NotFound />} />
                    </Route>
                    {/* <Route index element={<Home />} /> */}
                </Routes>
    );
};

在本地，一切正常。此外，当从根域访问应用程序时，部署到 Azure 一切正常，即

myapp.com

当我尝试通过

myapp.com/orders/3

访问它时，就会出现问题。然后它抛出页面未找到404。

然后我意识到我需要

staticwebapp.config.json

文件来告诉 Azure 让我的应用程序处理路由。

位于我的应用程序根文件中的

staticwebapp.config.json

内容如下所示：

{
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": ["/images/*.{png,jpg,gif}", "/static/*"]
    }
}

添加后，它加载我的应用程序，但显示空白页面。在控制台中显示以下错误：

Refused to apply style from 'https://myaapp.com/orders/static/css/main.d7af2528.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'https://myapp.com/orders/static/js/main.4af7cbd5.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

很明显，它正在相对访问 js 和 css 文件。

我的配置中缺少什么？

Answer 1

请尝试以下

staticwebapp.config.json

：

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/static/media/*.{png,jpg,jpeg,gif,bmp}",   "/static/css/*"]
  },
  "mimeTypes": {
    ".json": "text/json"
  }
}

我有确切的设置，当我使用

SWA CLI

部署应用程序时，它会自动创建上述文件并将其放置在应用程序的根文件夹中。

那么这个配置json文件应该放在哪里呢？

https://medium.com/@elnoor/react-client-side-routing-in-azure-static-web-app-299c8ba96fb8

由于您部署了 React 应用程序的生产版本，因此此 json 文件将需要成为 build.gradle 文件的一部分。假设使用 React-App 来创建 React 应用程序，文件必须放置在 public 文件夹中。在构建应用程序时，公共文件夹中的所有内容也将位于构建文件夹中。因此 staticwebapp.config.json 文件将位于构建的应用程序根目录中的 index.html 文件旁边。