如何手动部署 NextJS 单页应用到 Azure 静态 Web 应用

huangapple go评论81阅读模式
英文:

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:

如何手动部署 NextJS 单页应用到 Azure 静态 Web 应用

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:

如何手动部署 NextJS 单页应用到 Azure 静态 Web 应用

英文:

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:

如何手动部署 NextJS 单页应用到 Azure 静态 Web 应用

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:

如何手动部署 NextJS 单页应用到 Azure 静态 Web 应用

答案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 &lt;token&gt; ./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

huangapple
  • 本文由 发表于 2023年5月21日 14:18:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76298546.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定