Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Тестируйте локально, делитесь изменениями, а затем развертывайте в реальном времени

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Перед развертыванием на рабочем сайте вы захотите просмотреть и протестировать свои изменения. Хостинг Firebase позволяет просматривать и тестировать изменения локально и взаимодействовать с эмулируемыми серверными ресурсами проекта. Если вам нужно, чтобы ваши товарищи по команде просмотрели и протестировали ваши изменения, хостинг может создать общие временные 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 для выполнения задач до или после развертывания. Например, ловушка после развертывания может уведомлять администраторов о развертывании нового содержимого сайта. Дополнительные сведения см. в документации Firebase CLI .

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

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

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

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

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

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