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

Перед развертыванием на действующем сайте вам необходимо просмотреть и протестировать внесенные изменения. Хостинг Firebase позволяет вам просматривать и тестировать изменения локально, а также взаимодействовать с эмулируемыми серверными ресурсами проекта. Если вам нужно, чтобы ваши товарищи по команде просмотрели и протестировали ваши изменения, хостинг может создать общие временные URL-адреса предварительного просмотра для вашего сайта. Мы даже поддерживаем интеграцию с GitHub для развертывания по запросу на включение.

Прежде чем вы начнете

Выполните действия, перечисленные на странице «Начало работы с хостингом» , а именно:

  1. Установите или обновите интерфейс командной строки Firebase до последней версии.
  2. Подключите локальный каталог проекта (содержащий содержимое вашего приложения) к вашему проекту Firebase.

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

Шаг 1. Протестируйте локально

Если вы выполняете быстрые итерации или хотите, чтобы ваше приложение взаимодействовало с эмулируемыми ресурсами серверного проекта, вы можете протестировать содержимое хостинга и настроить его локально. При локальном тестировании Firebase обслуживает ваше веб-приложение по локально размещенному URL-адресу.

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

  1. (Необязательно) По умолчанию ваше локально размещенное приложение будет взаимодействовать с реальными , а не эмулируемыми ресурсами проекта (функциями, базой данных, правилами и т. д.). Вместо этого вы можете при необходимости подключить свое приложение, чтобы использовать любые настроенные вами эмулируемые ресурсы проекта. Узнайте больше: База данных реального времени | Облачный пожарный магазин | Облачные функции

  2. Из корня локального каталога проекта выполните следующую команду:

    firebase emulators:start
  3. Откройте веб-приложение по локальному URL-адресу, возвращенному CLI (обычно http://localhost:5000 ).

  4. Чтобы обновить локальный URL-адрес с изменениями, обновите браузер.

Тестирование с других локальных устройств

По умолчанию эмуляторы отвечают только на запросы от localhost . Это означает, что вы сможете получить доступ к размещенному контенту через веб-браузер вашего компьютера, но не с других устройств в вашей сети. Если вы хотите протестировать с других локальных устройств, настройте firebase.json следующим образом:

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

Шаг 2. Предварительный просмотр и публикация

Если вы хотите, чтобы другие видели изменения в вашем веб-приложении перед запуском в эксплуатацию, вы можете использовать каналы предварительного просмотра.

После развертывания на канале предварительного просмотра Firebase обслуживает ваше веб-приложение по «URL-адресу предварительного просмотра», который представляет собой общий временный URL-адрес. При использовании URL-адреса предварительного просмотра ваше веб-приложение взаимодействует с вашим реальным сервером для всех ресурсов проекта (за исключением любых «закрепленных» функций в вашей конфигурации перезаписи ).

Обратите внимание: хотя URL-адреса предварительного просмотра трудно угадать (поскольку они содержат случайный хеш), они общедоступны. Таким образом, любой, кто знает URL-адрес, может получить к нему доступ.

  1. Из корня локального каталога проекта выполните следующую команду:

    firebase hosting:channel:deploy CHANNEL_ID

    Замените CHANNEL_ID строкой без пробелов (например, feature_mission-2-mars ). Этот идентификатор будет использоваться для создания URL-адреса предварительного просмотра, связанного с каналом предварительного просмотра.

  2. Откройте веб-приложение по URL-адресу предварительного просмотра, возвращенному CLI. Это будет выглядеть примерно так: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. Чтобы обновить URL-адрес предварительного просмотра с изменениями, снова запустите ту же команду. Обязательно укажите в команде тот же CHANNEL_ID .

Узнайте об управлении каналами предварительного просмотра , в том числе о том, как установить срок действия канала.

Хостинг Firebase поддерживает действие GitHub, которое автоматически создает и обновляет URL-адрес предварительного просмотра, когда вы фиксируете изменения в запросе на включение. Узнайте, как настроить и использовать это действие GitHub .

Шаг 3. Развертывание в реальном времени

Когда вы будете готовы поделиться своими изменениями со всем миром, разверните содержимое хостинга и настройте его на своем активном канале. Firebase предлагает несколько различных вариантов этого шага в зависимости от вашего варианта использования (см. варианты ниже).

Вариант 1. Клонируйте канал предварительного просмотра в канал прямой трансляции.

Этот параметр обеспечивает уверенность в том, что вы развертываете на своем реальном канале именно тот контент и конфигурацию, которые вы тестировали в предварительном канале. Узнайте больше о клонировании версий .

  1. Из любого каталога выполните следующую команду:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Замените каждый заполнитель следующим:

    • SOURCE_SITE_ID и TARGET_SITE_ID : это идентификаторы хостинг-сайтов, содержащих каналы.

      • В качестве хостинга по умолчанию используйте идентификатор проекта Firebase.
      • Вы можете указать сайты, которые находятся в одном проекте Firebase или даже в разных проектах Firebase.
    • SOURCE_CHANNEL_ID : это идентификатор канала, который в настоящее время обслуживает версию, которую вы хотите развернуть на своем активном канале.

      • Для прямого канала используйте live в качестве идентификатора канала.
  2. Просмотрите изменения (следующий шаг).

Вариант 2. Развертывание из локального каталога проекта на действующем канале.

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

  1. Из корня локального каталога проекта выполните следующую команду:

    firebase deploy --only hosting
  2. Просмотрите изменения (следующий шаг).

Шаг 4. Просмотрите изменения на действующем сайте.

Оба приведенных выше варианта развертывают содержимое вашего хостинга и настраивают его на следующих сайтах:

  • Поддомены, предоставленные Firebase для вашего хостинг-сайта по умолчанию и любых дополнительных хостинг-сайтов:
    SITE_ID .web.app (например, PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (например PROJECT_ID .firebaseapp.com )

  • Любые пользовательские домены , которые вы подключили к своим хостинг-сайтам.

Чтобы ограничить развертывание определенным сайтом хостинга, укажите цель развертывания в команде CLI.

Другие действия и информация по развертыванию

Добавить комментарий к развертыванию

При желании вы можете добавить комментарий к развертыванию. Этот комментарий будет отображаться вместе с другой информацией о развертывании на панели управления хостингом в консоли Firebase. Например:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Добавление сценариев перед развертыванием и после развертывания.

При желании вы можете подключить сценарии оболочки к команде firebase deploy для выполнения задач перед или после развертывания. Например, перехватчик после развертывания может уведомлять администраторов о развертывании нового контента сайта. Более подробную информацию можно найти в документации Firebase CLI .

Кэширование развернутого контента

Когда делается запрос на статический контент , хостинг Firebase автоматически кэширует контент в CDN. Если вы повторно развертываете контент своего сайта, Firebase автоматически очищает весь кэшированный статический контент в CDN, чтобы новые запросы получали ваш новый контент.

Обратите внимание, что вы можете настроить кэширование динамического контента .

Обслуживание через HTTPS

Убедитесь, что все внешние ресурсы, которые не размещены на хостинге Firebase, загружаются через SSL (HTTPS), включая любые внешние скрипты. Большинство браузеров не позволяют пользователям загружать «смешанный контент» (трафик SSL и трафик без SSL).

Следующие шаги