Azure

将您的 Nuxt 应用程序部署到 Azure 基础设施。

Azure 静态 Web 应用

零配置 ✨
可以零配置集成 Azure 静态 Web 应用提供程序。了解更多.

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

本地预览

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

终端

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`
路由	所有预渲染路由都会添加。此外，如果您没有 `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'
        }
      }
    }
  }
})

自定义路由将被添加并首先匹配。如果发生冲突（由对象是否具有相同的路由属性决定），自定义路由将覆盖生成的路由。

通过 GitHub Actions 从 CI/CD 部署

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

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

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

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

.github/workflows/azure-static-web-apps-<RANDOM_NAME>.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 部署

更多选项