将 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` 的请求也将重定向到由 `/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-<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 部署

更多选项