Изучите Nuxt с коллекцией из 100+ советов!
Развернуть

Azure

Разверните ваше приложение Nuxt на Azure инфраструктуре.

Azure Static Web Apps

Нулевая конфигурация ✨
Интеграция с провайдером Azure Static Web Apps возможна с нулевой настройкой, подробнее.

Статические веб-приложения Azure предназначены для постоянного развертывания в рамках рабочего процесса GitHub Actions. По умолчанию Nuxt определяет эту среду развертывания, чтобы включить предустановку azure.

Локальный предварительный просмотр

Установите Azure Functions Core Tools, если хотите протестировать локально.

Вы можете вызвать среду разработки для предварительного просмотра перед развертыванием.

Terminal
npx nuxi build --preset=azure
npx @azure/static-web-apps-cli start .output/public --api-location .output/server

Конфигурация

Статические веб-приложения Azure настраиваются с помощью файла staticwebapp.config.json.

Nuxt автоматически генерирует этот конфигурационный файл, когда приложение собирается с предустановкой azure.

Он добавляет следующие свойства, основываясь на следующих критериях:

СвойствоКритерииПо умолчанию
platform.apiRuntimeБудет автоматически установлен на node:16 или node:14 в зависимости от конфигурации вашего пакета.node:16
navigationFallback.rewriteВсегда /api/server/api/server
routesДобавляются все пререндеренные маршруты. Кроме того, если у вас нет файла index.html, то в целях совместимости будет создан пустой файл, а также запросы к /index.html будут перенаправлены в корневой каталог, который обрабатывается /api/server.[]

Пользовательская конфигурация

Вы можете изменить сгенерированную конфигурацию с помощью опции azure.config. Например, если вы хотите указать Node runtime для ваших Azure Functions, измените файл nuxt.config.ts следующим образом:

nuxt.config.ts
export default defineNuxtConfig({
  // ...
  nitro: {
    azure: {
      config: {
        // ...
        platform: {
          apiRuntime: 'node:18'
        }
      }
    }
  }
})

Пользовательские маршруты будут добавлены и сопоставлены первыми. В случае конфликта (определяется, если объект имеет одинаковое свойство route) пользовательские маршруты будут преобладать над сгенерированными.

Развертывание с помощью CI/CD через GitHub Actions

Когда вы связываете свой репозиторий GitHub с Azure Static Web Apps, в репозиторий добавляется файл workflow.

Когда вам будет предложено выбрать фреймворк, выберите пользовательский и укажите следующую информацию:

Входные данныеЗначение
app_location'/'
api_location'.output/server'
output_location'.output/public'

Если вы пропустите этот шаг, вы всегда можете найти раздел конфигурации сборки в своем рабочем процессе и обновить конфигурацию сборки:

.github/workflows/azure-static-web-apps-<RANDOM_NAME>.yml
###### Конфигурация репозитория/сборки ######
app_location: '/'
api_location: '.output/server'
output_location: '.output/public'
###### Завершение конфигурации репозитория/сборки ######
Вот и все! Теперь Azure Static Web Apps будет автоматически разворачивать ваше приложение на базе Nitro в режиме push.

Если вы используете runtimeConfig, вам, скорее всего, потребуется настроить соответствующие переменные окружения в Azure.

Дополнительные параметры

Узнайте о других предустановках развертывания Azure в документации Nitro.