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

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

Предпосылки

• Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно .
• Учетная запись GitHub. Создайте учетную запись бесплатно .
• Node.js 16 или более поздней версии.

Настройка приложения 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 3

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

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

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

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

3. Поиск статических веб-приложений.

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

5. Нажмите кнопку "Создать".

6. На вкладке "Основные сведения" введите следующие значения.

   Недвижимость	Ценность
   Subscription	Название вашей подписки 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 по-прежнему запущен. После завершения рабочего процесса можно обновить браузер, чтобы просмотреть веб-приложение.

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

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

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

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

git pull

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

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

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