將 Nuxt 部署到 Azure

Azure Static Web Apps

零配置 ✨
與 Azure Static Web Apps 提供者的整合可以透過零配置完成，了解更多。

Azure Static Web Apps 設計為在 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 Static Web Apps 使用 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 Static Web Apps 時，工作流程檔案會被新增到儲存庫中。

當您被要求選擇您的框架時，請選擇自訂並提供以下資訊

輸入	值
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 Static Web Apps 將在推送時自動部署您的 Nitro 驅動應用程式。

如果您正在使用 runtimeConfig，您可能需要設定 Azure 上的相應環境變數。

Azure

Azure Static Web Apps

本機預覽

配置

自訂配置

透過 GitHub Actions 從 CI/CD 部署

更多選項