Развертывание сайтов Nuxt 3 с универсальной отрисовкой на Статические веб-приложения Azure

  • Статья

В этом руководстве описано, как развернуть приложение Nuxt 3 в Статические веб-приложения Azure. Nuxt 3 поддерживает универсальную отрисовку (на стороне клиента и на стороне сервера), включая маршруты сервера и API. Без дополнительной настройки можно развернуть приложения Nuxt 3 с универсальной отрисовкой для Статические веб-приложения Azure. Когда приложение встроено в задачу Статические веб-приложения GitHub Action или Azure Pipelines, Nuxt 3 автоматически преобразует его в статические ресурсы и приложение Функции Azure, совместимые с Статические веб-приложения Azure.

Предварительные требования

Настройка приложения Nuxt 3

Вы можете настроить новый проект Nuxt с помощью npx nuxi init nuxt-app. Вместо использования нового проекта в этом руководстве используется существующий репозиторий, настроенный для демонстрации развертывания сайта Nuxt 3 с универсальной отрисовкой на Статические веб-приложения Azure.

  1. Перейдите к http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Присвойте репозиторию имя nuxt-3-starter.

  3. Затем клонируйте новый репозиторий на компьютер. Обязательно замените <YOUR_GITHUB_ACCOUNT_NAME> именем своей учетной записи.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

  4. Перейдите к только что клонированному приложению Nuxt.js:

    cd nuxt-3-starter

  5. Установите зависимости:

    npm install

  6. Запустите разработку приложения Nuxt.js:

    npm run dev -- -o

Перейдите к http://localhost:3000 , чтобы открыть приложение, где в предпочитаемом браузере должен быть открыт следующий веб-сайт. Нажмите кнопки для вызова маршрутов сервера и API.

Запуск приложения Nuxt.js

Развертывание сайта Nuxt 3

Ниже показано, как создать ресурс Статические веб-приложения Azure и настроить его для развертывания приложения из GitHub.

Создание ресурса Статических веб-приложений Azure

  1. Перейдите на портал Azure.

  2. Выберите Создать ресурс.

  3. Выполните поиск по запросу Статические веб-приложения.

  4. Выберите Статические веб-приложения.

  5. Щелкните Создать.

  6. На вкладке Основные сведения введите приведенные ниже значения.

    Свойство Значение
    Подписка Имя подписки Azure.
    Группа ресурсов my-nuxtjs-group
    Имя my-nuxt3-app
    Тип плана Бесплатный
    Область для API Функций Azure и промежуточных сред Выберите ближайший к вам регион.
    Источник GitHub

  7. Выберите Войти по учетным данным GitHub и выполните проверку подлинности с помощью GitHub.

  8. Введите следующие значения GitHub.

    Свойство Значение
    Организация Выберите нужную организацию GitHub.
    Репозиторий Выберите созданный ранее репозиторий.
    Ветвь Выберите Main.

  9. В разделе Сведения о сборке выберите Пользовательская из раскрывающегося списка Варианты сборки и сохраните значения по умолчанию.

  10. В поле Расположение приложения введите / .

  11. В поле Расположение API введите .output/server .

  12. В поле Расположение вывода введите .output/public .

Просмотр и создание

  1. Выберите Просмотр и создание , чтобы убедиться, что все сведения указаны правильно.

  2. Выберите Создать, чтобы начать создание статического веб-приложения и подготовить GitHub Actions для развертывания.

  3. После завершения развертывания выберите Перейти к ресурсу.

  4. В окне Обзор щелкните ссылку на URL-адрес, чтобы открыть развернутое приложение.

Если веб-сайт не загружается сразу, фоновый рабочий процесс GitHub Actions по-прежнему выполняется. После завершения рабочего процесса можно обновить браузер для просмотра веб-приложения.

Вы можете проверить состояние рабочих процессов Actions, перейдя к ним в своем репозитории.

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Синхронизация изменений

При создании приложения служба "Статические веб-приложения Azure" создала файл рабочего процесса GitHub Actions в вашем репозитории. Вернитесь в терминал и выполните следующую команду, чтобы извлечь фиксацию, содержащую новый файл.

git pull

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

Дополнительные сведения см. в документации по предварительной настройке развертывания Статические веб-приложения Azure Nuxt 3.

Настройка личного домена