部署 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'
        }
      }
    }
  }
})

自訂路由將會先被新增和比對。如果發生衝突（如果物件具有相同的路由屬性），自訂路由將會覆蓋產生的路由。

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

更多選項