Как протестировать развертывание приложения локально

Вы можете протестировать приложение локально перед развертыванием App Hosting, используя эмулятор App Hosting, который входит в Firebase Local Emulator Suite.

Прежде чем использовать эмулятор App Hosting, убедитесь, что вы понимаете общий рабочий процесс Local Emulator Suite Firebase, установили и настроили Local Emulator Suite и ознакомились с командами CLI.

В этом разделе предполагается, что вы уже знакомы с App Hosting. При необходимости ознакомьтесь с вводной статьей о App Hosting и другими материалами, которые помогут вам понять, как работает App Hosting.

Что можно делать с помощью эмулятора App Hosting?

Эмулятор App Hosting позволяет тестировать и улучшать веб-приложения локально. Это может упростить процесс разработки и повысить качество веб-приложений, созданных с помощью Firebase и развернутых на App Hosting.

Эмулятор App Hosting:

  1. Позволяет запускать веб-приложение локально с переменными среды и секретами, определенными в файлах конфигурации apphosting.yaml.
  2. Вы можете переопределить переменные среды и секреты для использования в эмуляторе с помощью файла apphosting.emulator.yaml.
  3. Можно использовать вместе с другими эмуляторами Firebase. Если вы используете эмулятор Firestore, Auth или любой другой, Local Emulator Suite гарантирует, что они будут запущены до эмулятора App Hosting.

Настройка эмулятора

Для начала установите и инициализируйте Local Emulator Suite, как описано в статье Как установить, настроить и интегрировать Local Emulator Suite. Помимо других эмуляторов Firebase, которые вы хотите настроить, обязательно выберите App Hosting Emulator. CLI предложит вам указать некоторые значения эмулятора App Hosting, в том числе:

  • Корневой каталог вашего приложения относительно проекта. Это важно, если вы используете монорепозитории с App Hosting.
  • Нужно ли переопределять значения для локальной разработки.
  • Хотите ли вы предоставить коллегам доступ к секретам для локальной разработки.
firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (./)

? The App Hosting emulator uses a file called apphosting.emulator.yaml to
override values in apphosting.yaml for local testing. This codebase does not
have one, would you like to create it? (Y/n)

? Which environment variables would you like to override? (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ MEMCACHE_ADDR
 ◯ API_KEY

? What new value would you like for plaintext MEMCACHE_ADDR?

? What would you like to name the secret reference for API_KEY? (test-api-key)

? What new value would you like for secret TESTKEY [input is hidden]? [input is hidden]

? Your config has secret values. Please provide a comma-separated list of users
or groups who should have access to secrets for local development:

✔  Successfully set IAM bindings on secret test-api-key.

Любые значения, которые вы указываете в этом процессе настройки, используются для обновления конфигурации эмулятора App Hosting в firebase.json. Вы также можете настроить эмулятор App Hosting, изменив файл firebase.json. Схема для эмулятора App Hosting:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommand": <command> [optional],
      "rootDirectory": <path> [optional]
    }
  }
}
  • startCommand генерируется и устанавливается автоматически при инициализации эмулятора. Если не указать, эмулятор обнаружит и запустит команду dev вашего менеджера пакетов.
  • rootDirectory используется для поддержки настроек проекта монорепозитория. Если веб-приложение находится в подкаталоге, укажите путь к нему относительно корневого каталога (местоположения файла firebase.json).

Управление эмуляцией

При инициализации эмулятора в корневом каталоге приложения создается файл apphosting.emulator.yaml. Этот файл конфигурации имеет ту же схему, что и файл apphosting.yaml, используемый в рабочей среде, но предназначен исключительно для локальной разработки. По умолчанию эмулятор считывает конфигурацию из файла apphosting.yaml, но если есть файл apphosting.emulator.yaml, то конфигурации в нем имеют приоритет.

Файл apphosting.emulator.yaml можно безопасно фиксировать и передавать коллегам. Чтобы вы случайно не передали конфиденциальные данные в репозитории исходного кода, любая переменная среды, которая является секретом в apphosting.yaml, также должна быть секретом в apphosting.emulator.yaml. Если секрет не нужно менять между рабочей версией и локальной разработкой (например, ключ Gemini API), его не нужно добавлять в apphosting.emulator.yaml. Вместо этого предоставьте команде доступ к секрету.

Если в вашем приложении используется много секретов (например, ключи API для трех разных сервисов с разными значениями для рабочей, промежуточной и локальной сред разработки), вы можете превысить лимит бесплатного плана Cloud Secret Manager и платить 0, 06 доллара США за каждый дополнительный секрет в месяц. Если вы хотите управлять локальной конфигурацией вне системы контроля версий, чтобы избежать этой платы, вы можете использовать устаревший файл apphosting.local.yaml. В отличие от apphosting.emulator.yaml, в этом файле можно указывать значения переменных среды в виде обычного текста, которые в apphosting.yaml являются секретными.

Как предоставить пользователям или группам доступ к секретам

Секреты, хранящиеся в apphosting.emulator.yaml, считываются при запуске эмулятора. Это значит, что у команды разработчиков должен быть доступ к секрету. Вы можете использовать команду apphosting:secrets:grantaccess, чтобы предоставить доступ к секрету пользователю или группе по адресу электронной почты.

firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com

По возможности используйте в apphosting.emulator.yaml тестовые ключи, у которых нет доступа к рабочим данным, которые не могут иметь глобальных побочных эффектов (отправка электронных писем, списание средств с кредитных карт) или имеют более низкие квоты. Это помогает убедиться, что непроверенный код имеет меньше реальных последствий.

Рекомендуем использовать Google Группы для управления доступом к секретам, а не предоставлять доступ отдельным пользователям. Это упростит интеграцию новых участников в команду разработчиков, поскольку добавление их в группу предоставит им доступ ко всем необходимым секретам. Возможно, у вас уже есть подходящая группа, в которой разработчики общаются друг с другом. Управление доступом с помощью Google Групп также помогает гарантировать, что разработчики, покидающие вашу команду, потеряют доступ ко всем секретам, когда они будут удалены из группы электронной почты. Если секрет имеет доступ к рабочим данным или реальным побочным эффектам, все равно может быть целесообразно сменить ключ и присвоить ему новое значение с помощью firebase apphosting:secrets:set.

Запустите эмулятор

firebase emulators:start

Будут запущены все эмуляторы, указанные в файле firebase.json, в том числе эмулятор App Hosting.

Настройте команду start для приложений Angular

Если время ожидания команды эмулятора start истекло, скорее всего, сервер разработки Angular обслуживает ваше приложение через порт, отличный от того, который ожидает эмулятор App Hosting. Чтобы обойти эту проблему, добавьте в firebase.json дополнительные настройки:

  • Задайте для параметра emulators.apphosting.startCommand значение ng serve.
  • Чтобы использовать порт, отличный от заданного по умолчанию, укажите его с помощью emulators.apphosting.port (вместо того, чтобы добавлять флаг --port в ng serve в emulators.apphosting.startCommand).

Пример:

"emulators": {
    "apphosting": {
      "port": 5002,
      "rootDirectory": "./test-app",
      "startCommand": "ng serve"
    },
    "ui": {
      "enabled": true
    },
    ...
  }