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

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

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

Выполните действия , перечисленные на хостинг Get Started страницы , в частности, следующие задачи:

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

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

Шаг 1: Тест на местном уровне

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

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

  1. (Необязательно) По умолчанию, локально размещаемый будет взаимодействовать с реальным, а не эмулированным, ресурсами проекта (функции, базы данных, правила и т.д.). Вы можете вместо этого необязательно подключать приложение использовать любой ЭМУЛИРОВАННЫЕ ресурсы проекта , которые вы настроили. Подробнее: в режиме реального времени базы данных | Облако Firestore | Облачные функции

  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-адресу предварительного просмотра, возвращенному интерфейсом командной строки. Это будет выглядеть примерно так: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. Чтобы обновить URL-адрес предварительного просмотра с учетом изменений, выполните ту же команду еще раз. Убедитесь в том , чтобы указать тот же CHANNEL_ID в команде.

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

Хостинг Firebase поддерживает действие GitHub, которое автоматически создает и обновляет URL-адрес предварительного просмотра, когда вы фиксируете изменения в запросе на перенос. Узнайте , как настроить и использовать этот GitHub Action .

Шаг 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 : Это идентификтор для канала , который в настоящее время отбывает версию вы хотите установить на свой живой канал.

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

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

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

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

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

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

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