Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

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

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

Выполните шаги, перечисленные на странице «Начало работы с хостингом» , в частности следующие задачи:

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

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

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

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

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

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

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

    firebase emulators:start

  3. Откройте свое веб-приложение по локальному URL-адресу, возвращенному интерфейсом командной строки (обычно 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-адресу предварительного просмотра, возвращенному интерфейсом командной строки. Это будет выглядеть примерно так: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

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

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

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

Шаг 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 )

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

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

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

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

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

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

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

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

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

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

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

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

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

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