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

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

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

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

  1. Установите или обновите Firebase CLI до последней версии.
  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: Клонирование канала предварительного просмотра на ваш канал прямой трансляции

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

  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 для выполнения задач predeploy или postdeploy. Например, хук postdeploy может уведомлять администраторов о новых развертываниях контента сайта. Более подробную информацию см. в документации Firebase CLI.

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

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

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

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

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

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

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

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

,

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

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

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

  1. Установите или обновите Firebase CLI до последней версии.
  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: Клонирование канала предварительного просмотра на ваш канал прямой трансляции

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

  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 для выполнения задач predeploy или postdeploy. Например, хук postdeploy может уведомлять администраторов о новых развертываниях контента сайта. Более подробную информацию см. в документации Firebase CLI.

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

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

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

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

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

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

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

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

,

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

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

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

  1. Установите или обновите Firebase CLI до последней версии.
  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: Клонирование канала предварительного просмотра на ваш канал прямой трансляции

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

  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 для выполнения задач predeploy или postdeploy. Например, хук postdeploy может уведомлять администраторов о новых развертываниях контента сайта. Более подробную информацию см. в документации Firebase CLI.

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

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

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

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

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

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

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

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