我有一个 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'
时进行的。在这种情况下,构建目录如下所示:
最佳答案
您是否尝试过从 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
关于reactjs - 如何在 Azure 静态 Web 应用中手动部署 NextJS SPA,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/76298546/