英文:
How to manually deploy a NextJS SPA in Azure Static Web Apps
问题
I have this NextJS SPA that I want to deploy in Azure Static Web Apps. It's a fairly simple app with some dynamic routes (e.g. /pages/requests/[id]/*
). Data in my components/routes is fetched through client-side only (no SSR or SSG).
At first, I tried to do a static export by setting output: 'export'
in next.config.js
and that worked well for static routes (e.g. https://myapp.azurestaticapps.net/requests/
) however it gave me a 404 error on dynamic routes (e.g. https://myapp.azurestaticapps.net/requests/7ecf58774844
). I thought this has something to do with static exports and since I do not have a file called 7ecf58774844
(or 7ecf58774844.html
) in requests
folder, I am getting this error. I am wondering if routes
in staticwebapp.config.json
can help me here.
So I removed output: 'export'
in next.config.js
and tried to rebuild the application. The build directory looks something like the following:
What I am not sure about is how to deploy this application manually using SWA CLI
.
When I do something like:
swa deploy --deployment-token my-deployment-token ./build --env production
I get the following error messages:
✖ 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.
I believe I am missing something really trivial but I am at a complete loss here. All the examples I have seen are for SSG and make use of GitHub/Azure DevOps which is not my case. Mine is a completely static application and I have to deploy it manually using SWA CLI.
UPDATE
Here's 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: /\.(j|t)sx?$/,
use: ['@svgr/webpack'],
});
return config;
},
};
and here's staticwebapp.config.json:
{
"routes": [
{
"route": "/requests/[id]",
"rewrite": "/requests/[id]/index.html"
}
],
"mimeTypes": {
".json": "text/json"
}
}
Tried different combination of routes but to no avail. For example, these are the route settings I tried:
{
"route": "/requests/:id",
"rewrite": "/requests/[id]/index.html"
}
{
"route": "/requests/:id",
"rewrite": "/requests/:id/index.html"
}
Please note that above settings are when output: 'export'
in next.config.js
. In this case, the build directory looks something like the following:
英文:
I have this NextJS SPA that I want to deploy in Azure Static Web Apps. It's a fairly simple app with some dynamic routes (e.g. /pages/requests/[id]/*
). Data in my components/routes is fetched through client-side only (no SSR or SSG).
At first, I tried to do a static export by setting output: 'export'
in next.config.js
and that worked well for static routes (e.g. https://myapp.azurestaticapps.net/requests/
) however it gave me a 404 error on dynamic routes (e.g. https://myapp.azurestaticapps.net/requests/7ecf58774844
). I thought this has something to do with static exports and since I do not have a file called 7ecf58774844
(or 7ecf58774844.html
) in requests
folder, I am getting this error. I am wondering if routes
in staticwebapp.config.json
can help me here.
So I removed output: 'export'
in next.config.js
and tried to rebuild the application. The build directory looks something like the following:
What I am not sure about is how to deploy this application manually using SWA CLI
.
When I do something like:
swa deploy --deployment-token my-deployment-token ./build --env production
I get the following error messages:
✖ 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.
I believe I am missing something really trivial but I am at a complete loss here. All the examples I have seen are for SSG and make use of GitHub/Azure DevOps which is not my case. Mine is a completely static application and I have to deploy it manually using SWA CLI.
UPDATE
Here's 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;
},
};
and here's staticwebapp.config.json:
{
"routes": [
{
"route": "/requests/[id]",
"rewrite": "/requests/[id]/index.html"
}
],
"mimeTypes": {
".json": "text/json"
}
}
Tried different combination of routes but to no avail. For example, these are the route settings I tried:
{
"route": "/requests/:id",
"rewrite": "/requests/[id]/index.html"
}
{
"route": "/requests/:id",
"rewrite": "/requests/:id/index.html"
}
Please note that above settings are when output: 'export'
in next.config.js
. In this case, the build directory looks something like the following:
答案1
得分: 1
我明白你的要求。以下是翻译好的部分:
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
英文:
Have you tried building the application from the SWA
CLI before deploying the application?
swa build --auto
- This generates a default out folder with the application build.swa deploy --deployment-token <token> ./out --env production
- like you did but here with the out folder.
Of course you can rename the output of the build, take a look at: https://azure.github.io/static-web-apps-cli/docs/cli/swa-build
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论