将 Nuxt 部署到 Azure

Azure 静态 Web 应用

零配置 ✨
与 Azure 静态 Web 应用提供商的集成可以零配置实现，了解更多。

Azure 静态 Web 应用旨在通过 GitHub Actions 工作流进行持续部署。默认情况下，Nuxt 会检测到此部署环境以启用 azure 预设。

本地预览

如果要进行本地测试，请安装 Azure Functions Core Tools。

您可以调用开发环境以在部署前进行预览。

终端

npx nuxi build --preset=azure
npx @azure/static-web-apps-cli start .output/public --api-location .output/server

配置

Azure 静态 Web 应用使用 staticwebapp.config.json 文件进行配置。

当应用程序使用 azure 预设构建时，Nuxt 会自动生成此配置文件。

它会根据以下条件添加以下属性

属性	条件	默认
platform.apiRuntime	将根据您的软件包配置自动设置为 `node:16` 或 `node:14`。	`node:16`
navigationFallback.rewrite	始终为 `/api/server`	`/api/server`
routes	将添加所有预渲染的路由。此外，如果您没有 `index.html` 文件，则会为您创建一个空的 index.html 文件以实现兼容性，并且对 `/index.html` 的请求也会重定向到由 `/api/server` 处理的根目录。	`[]`

自定义配置

您可以使用 azure.config 选项更改生成的配置。例如，如果您想为您的 Azure Functions 指定一个 Node 运行时，请将您的 nuxt.config.ts 文件编辑为以下内容

nuxt.config.ts

export default defineNuxtConfig({
  // ...
  nitro: {
    azure: {
      config: {
        // ...
        platform: {
          apiRuntime: 'node:18'
        }
      }
    }
  }
})

自定义路由将首先被添加和匹配。如果发生冲突（如果对象具有相同的 route 属性则确定为冲突），自定义路由将覆盖生成的路由。

通过 GitHub Actions 从 CI/CD 部署

当您将 GitHub 存储库链接到 Azure 静态 Web 应用时，工作流文件会添加到存储库中。

当您被要求选择框架时，请选择自定义并提供以下信息

输入	值
app_location	'/'
api_location	'.output/server'
output_location	'.output/public'

如果您错过了此步骤，您始终可以在您的工作流中找到构建配置部分并更新构建配置

.github/workflows/azure-static-web-apps-<随机名称>.yml

###### Repository/Build Configurations ######
app_location: '/'
api_location: '.output/server'
output_location: '.output/public'
###### End of Repository/Build Configurations ######

就这样！现在，Azure 静态 Web 应用将在推送时自动部署您的 Nitro 驱动的应用程序。

如果您正在使用 runtimeConfig，您可能需要在 Azure 上配置相应的环境变量。

Azure

Azure 静态 Web 应用

本地预览

配置

自定义配置

通过 GitHub Actions 从 CI/CD 部署

更多选项