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

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.

Using Cookies in production

When using Firebase Hosting together with Cloud Functions or Cloud Run, cookies are generally stripped from incoming requests to allow for efficient CDN cache behavior. Only the specially-named __session cookie is permitted to pass through to your app.

For more information, refer to the Firebase documentation.