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

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

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

Выполните шаги, указанные на странице «Начало работы 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-адреса предварительного просмотра ваше веб-приложение взаимодействует с реальным бэкэндом для всех ресурсов проекта (за исключением любых «закрепленных» функций в конфигурации перезаписи ).

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

Шаг 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."