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 部署

更多選項