Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

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

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

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

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

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

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

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

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

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

  1. (Необязательно) По умолчанию ваше локально размещенное приложение будет взаимодействовать с реальными , а не эмулируемыми ресурсами проекта (функциями, базой данных, правилами и т. Д.). Вместо этого вы можете при желании подключить свое приложение для использования любых эмулируемых ресурсов проекта, которые вы настроили. Подробнее: База данных в реальном времени | Cloud 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 тот же 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 : это 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 для выполнения задач перед развертыванием или после развертывания. Например, обработчик postdeploy может уведомить администраторов о развертывании нового содержимого сайта. См. Документацию Firebase CLI для получения более подробной информации.

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

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

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

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

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

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