reactjs - 如何在 Azure 静态 Web 应用中手动部署 NextJS SPA

Question

我有一个 NextJS SPA，我想将其部署在 Azure 静态 Web 应用中。这是一个相当简单的应用程序，具有一些动态路由(例如 /pages/requests/[id]/*)。我的组件/路由中的数据仅通过客户端获取(无 SSR 或 SSG)。

首先，我尝试通过在 next.config.js 中设置 output: 'export' 来进行静态导出，这对于静态路由效果很好(例如 https://myapp.azurestaticapps.net/requests/)，但是它在动态路由上给了我一个 404 错误(例如 https://myapp.azurestaticapps.net/requests/7ecf58774844)。我认为这与静态导出有关，因为我在 requests 文件夹中没有名为 7ecf58774844 (或 7ecf58774844.html)的文件，我收到此错误。我想知道 staticwebapp.config.json 中的 routes 是否可以帮助我。

因此，我删除了 next.config.js 中的 output: 'export' 并尝试重建应用程序。构建目录如下所示:

我不确定如何使用 SWA CLI 手动部署此应用程序。

当我做类似的事情时:

swa deploy --deployment-token my-deployment-token ./build --env production

我收到以下错误消息:

✖ Failed to find a default file in the app artifacts folder (build). Valid default files: index.html,Index.html.
✖ If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
✖ If your application requires build steps, please validate that a default file exists in the build output directory.

我相信我错过了一些非常微不足道的东西，但我在这里完全不知所措。我看到的所有示例都是针对 SSG 的，并使用 GitHub/Azure DevOps，但这不是我的情况。我的应用程序是一个完全静态的应用程序，我必须使用 SWA CLI 手动部署它。

<小时/>

更新

这是 next.config.json:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  distDir: 'build',
  output: 'export',//tried with and without the output attribute
  trailingSlash: true,
  images: { unoptimized: true },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

这是 staticwebapp.config.json:

{
  "routes": [
    {
      "route": "/requests/[id]",
      "rewrite": "/requests/[id]/index.html"
    }
  ],
  "mimeTypes": {
    ".json": "text/json"
  }
}

尝试了不同的路线组合，但没有成功。例如，这些是我尝试过的路线设置:

{
  "route": "/requests/:id",
  "rewrite": "/requests/[id]/index.html"
}

{
  "route": "/requests/:id",
  "rewrite": "/requests/:id/index.html"
}

请注意，以上设置是在next.config.js中output: 'export'时进行的。在这种情况下，构建目录如下所示:

Answer 1

您是否尝试过从 SWA 构建应用程序在部署应用程序之前使用 CLI？

• swa build --auto - 这会生成一个包含应用程序构建的默认 out 文件夹。
• swa deploy --deployment-token <token> ./out --env production - 就像您所做的那样，但这里是 out 文件夹。

当然你可以重命名构建的输出，看看:https://azure.github.io/static-web-apps-cli/docs/cli/swa-build