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

Перед развертыванием на рабочем сайте необходимо просмотреть и протестировать внесенные изменения. 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"
    }
  }

firebase serve --host 0.0.0.0  // accepts requests to any host

Шаг 2: Предварительный просмотр и публикация

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

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

Обратите внимание: хотя 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."