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

Firebase

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

Firebase функции

Чтобы использовать более новое и рекомендуемое поколение функций firebase, установите опцию firebase.gen в значение 2:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2
    }
  }
})
Если по каким-либо причинам вы не можете использовать конфигурацию, в качестве альтернативы можно воспользоваться переменной окружения NITRO_FIREBASE_GEN=2.

Если у вас уже есть развернутая версия вашего сайта и вы хотите перейти на 2-й gen, см. процесс миграции в документации Firebase. А именно, CLI попросит вас удалить существующие функции перед развертыванием новых.

Сравнение функций 1-го и 2-го поколения

Настройка проекта

Вы можете предпочесть настроить проект с помощью Firebase CLI, который получит для вас идентификатор проекта, добавит необходимые зависимости (см. выше) и даже настроит автоматическое развертывание через GitHub Actions (только для хостинга). Узнайте об установке Firebase CLI.

  1. Установите последнюю версию Firebase CLI.
    Terminal
    npm install -g firebase-tools@latest
    
  2. Инициализируйте ваш проект Firebase
    Terminal
    firebase login
    firebase init hosting
    
При появлении запроса вы можете указать .output/public в качестве публичной директории. На следующем шаге не конфигурируйте проект как одностраничное приложение.

После завершения работы добавьте следующее в файл firebase.json, чтобы включить серверный рендеринг в Cloud Functions:

firebase.json
{
  "functions": { "source": ".output/server" },
  "hosting": [
    {
      "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ]
}

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

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

npm run build -- --preset=firebase
firebase emulators:start

Сборка и развертывание

Разверните хостинг Firebase Hosting, выполнив сборку Nitro, а затем запустив команду firebase deploy.

npm run build -- --preset=firebase
firebase deploy

Параметры

Вы можете задать параметры для функций firebase в файле nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2,
      httpsOptions: {
        region: 'europe-west1',
        maxInstances: 3,
      },
    },
  },
});

Версия Node.js для выполнения

В конфигурации можно задать пользовательскую версию Node.js:

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    firebase: {
      nodeVersion: '18' // Может быть '16' или '18' или '20'
    },
  },
});

Инструменты Firebase используют версию engines.node в package.json, чтобы определить, какую версию node использовать для ваших функций. Nuxt автоматически записывает в .output/server/package.json сконфигурированную версию Node.js.

Вам также может понадобиться добавить ключ времени выполнения в файл firebase.json:

firebase.json
{
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs20"
  }
}
Подробнее об этом можно прочитать в Firebase Docs.

Если в вашем проекте firebase есть другие облачные функции

Вы можете получить предупреждение о том, что другие облачные функции будут удалены при развертывании проекта Nuxt. Это происходит потому, что Nitro развернет весь ваш проект в функции firebase. Если вы хотите развернуть только ваш проект Nuxt, вы можете использовать флаг --only:

firebase deploy --only functions:server,hosting
Перейдите по ссылке Документация Nitro, чтобы узнать больше о предустановке развертывания Firebase.

Использование Cookies в продакшене

При использовании Firebase Hosting вместе с Cloud Functions или Cloud Run куки обычно удаляются из входящих запросов, чтобы обеспечить эффективное поведение CDN-кеша. Только куки со специальным именем __session могут быть переданы вашему приложению.

Для получения дополнительной информации обратитесь к документации Firebase.