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

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

Прежде чем начать

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

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

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

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

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

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

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

  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 Hosting поддерживает действие GitHub, которое автоматически создает и обновляет URL-адрес предварительного просмотра, когда вы фиксируете изменения в запросе на включение. Узнайте, как настроить и использовать это действие GitHub .

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

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

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

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

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

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

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

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

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

      • Для прямого канала используйте live в качестве идентификатора канала.

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

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

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

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

    firebase deploy --only hosting

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Удаление файлов

В Firebase Hosting основным способом удаления выбранных файлов с развернутого сайта является локальное удаление файлов с последующим повторным развертыванием.

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