Learn Nuxt with a Collection of 100+ Tips!
Развернуть

Vercel

Разверните ваше приложение Nuxt на Vercel инфраструктуре.
Нулевая конфигурация ✨
Интеграция с Vercel возможна с нулевой конфигурацией, подробнее.

Развертывание с помощью Git

  1. Поместите код в свой git-репозиторий (GitHub, GitLab, Bitbucket).
  2. Импортируйте ваш проект в Vercel.
  3. Vercel определит, что вы используете Nitro, и включит правильные настройки для развертывания.
  4. Ваше приложение развернуто!

После того как проект импортирован и развернут, все последующие изменения в ветках будут генерировать Preview Deployments, а все изменения, внесенные в Production Branch (обычно «main»), приведут к Production Deployment.

Узнайте больше о Интеграции с Git в Vercel.

Vercel Edge функции

Можно развернуть ваши приложения Nuxt непосредственно на Vercel Edge Функциях.

Функции Vercel Edge Functions позволяют быстро и персонализировано доставлять контент посетителям вашего сайта. Они по умолчанию развернуты в глобальной сети Vercel Edge Network и позволяют перенести server-side логику в Edge, ближе к месту нахождения посетителей. Функции Edge используют Vercel Edge Runtime, который построен на том же высокопроизводительном движке V8 JavaScript и WebAssembly, что и браузер Chrome. Используя преимущества этого небольшого рантайма, Edge-функции могут иметь более быструю загрузку и более высокую масштабируемость, чем бессерверные функции. Edge Functions запускаются после кэша и могут как кэшировать, так и возвращать ответы. Читать далее

Чтобы использовать это, установите следующую переменную окружения:

SERVER_PRESET=vercel_edge

Или обновите команду сборки на nuxt build --preset=vercel_edge.

Vercel KV Storage

Вы можете легко использовать Vercel KV Storage с Nuxt Server Storage.

Подробнее о драйвере Vercel KV читайте в документации Unstorage.
  1. Установите зависимость @vercel/kv:
    Terminal
    npm i @vercel/kv
    
  2. Обновите файл nuxt.config:
    nuxt.config.ts
    export default defineNuxtConfig({
      nitro: {
        storage: {
          data: {
            driver: 'vercelKV'
            /* Vercel KV driver параметры */
          }
        }
      }
    })
    
Вам нужно либо установить переменные окружения KV_REST_API_URL и KV_REST_API_TOKEN, либо передать url и token в опции драйвера. Более подробную информацию об использовании смотрите в документации по драйверам.

Теперь вы можете получить доступ к своему хранилищу данных в любом месте директории server/:

server/routes/hello.ts
export default defineEventHandler(async (event) => {
  const dataStorage = useStorage('data');
  await dataStorage.setItem('hello', 'world');

  return {
    hello: await dataStorage.getItem("hello"),
  }
})

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

Вы можете предоставить дополнительную конфигурацию вывода сборки, используя ключ nitro.vercel.config внутри nuxt.config. Она будет объединена со встроенной, автоматически генерируемой конфигурацией.

Шаблоны

Nuxt Vercel ISR

Пример приложения Nuxt с гибридным рендерингом, развернутого на Vercel.

Nuxt on the Edge on Vercel

Пример приложения Nuxt, работающего на Vercel Edge Functions.

Узнать больше

Перейдите по ссылке Документация Nitro, чтобы узнать больше об инкрементной статической регенерации по требованию или более продвинутых опциях.