Перед развертыванием на действующем сайте вам необходимо просмотреть и протестировать внесенные изменения. Firebase Hosting позволяет вам просматривать и тестировать изменения локально, а также взаимодействовать с эмулируемыми серверными ресурсами проекта. Если вам нужно, чтобы ваши товарищи по команде просмотрели и протестировали ваши изменения, Hosting может создать общие временные URL-адреса предварительного просмотра для вашего сайта. Мы даже поддерживаем интеграцию с GitHub для развертывания по запросу на включение.
Прежде чем начать
Выполните действия, перечисленные на странице «Начало работы Hosting , а именно:
- Установите или обновите интерфейс командной строки Firebase до последней версии.
- Подключите локальный каталог проекта (содержащий содержимое вашего приложения) к вашему проекту Firebase.
При желании вы можете развернуть содержимое и конфигурацию Hosting вашего приложения, но это не является обязательным условием для действий, описанных на этой странице.
Шаг 1. Протестируйте локально
Если вы выполняете быстрые итерации или хотите, чтобы ваше приложение взаимодействовало с эмулируемыми ресурсами серверного проекта, вы можете протестировать содержимое Hosting и настроить его локально. При локальном тестировании Firebase обслуживает ваше веб-приложение по локально размещенному URL-адресу.
Hosting является частью Firebase Local Emulator Suite , который позволяет вашему приложению взаимодействовать с содержимым и конфигурацией эмулируемого Hosting , а также, при необходимости, с эмулируемыми ресурсами проекта (функциями, базами данных и правилами).
(Необязательно) По умолчанию ваше локально размещенное приложение будет взаимодействовать с реальными , а не эмулируемыми ресурсами проекта (функциями, базой данных, правилами и т. д.). Вместо этого вы можете при необходимости подключить свое приложение, чтобы использовать любые настроенные вами эмулируемые ресурсы проекта. Узнайте больше: Realtime Database | Cloud Firestore | Cloud Functions
Из корня локального каталога проекта выполните следующую команду:
firebase emulators:start
Откройте веб-приложение по локальному URL-адресу, возвращенному CLI (обычно
http://localhost:5000
).Чтобы обновить локальный URL-адрес с изменениями, обновите браузер.
Тестирование с других локальных устройств
По умолчанию эмуляторы отвечают только на запросы от localhost
. Это означает, что вы сможете получить доступ к размещенному контенту через веб-браузер вашего компьютера, но не с других устройств в вашей сети. Если вы хотите протестировать с других локальных устройств, настройте firebase.json
следующим образом:
"emulators": {
// ...
"hosting": {
"port": 5000,
"host": "0.0.0.0"
}
}
При использовании firebase serve
ваше приложение взаимодействует с эмулируемым бэкэндом для содержимого и конфигурации вашего Hosting (и, при необходимости, функциями), но с вашим реальным бэкэндом для всех остальных ресурсов проекта.
Из корня локального каталога проекта выполните следующую команду:
firebase serve --only hosting
Откройте свое веб-приложение по локальному URL-адресу, возвращенному CLI (обычно
http://localhost:5000
).Чтобы обновить локальный URL-адрес с изменениями, обновите браузер.
Используйте firebase serve
для тестирования с других локальных устройств.
По умолчанию firebase serve
отвечает только на запросы от localhost
. Это означает, что вы сможете получить доступ к размещенному контенту через веб-браузер вашего компьютера, но не с других устройств в вашей сети. Если вы хотите протестировать с других локальных устройств, используйте флаг --host
, например:
firebase serve --host 0.0.0.0 // accepts requests to any host
Шаг 2. Предварительный просмотр и публикация
Если вы хотите, чтобы другие видели изменения в вашем веб-приложении перед запуском в эксплуатацию, вы можете использовать каналы предварительного просмотра.
После развертывания на канале предварительного просмотра Firebase обслуживает ваше веб-приложение по «URL-адресу предварительного просмотра», который представляет собой общий временный URL-адрес. При использовании URL-адреса предварительного просмотра ваше веб-приложение взаимодействует с вашим реальным сервером для всех ресурсов проекта (за исключением любых «закрепленных» функций в вашей конфигурации перезаписи ).
Обратите внимание: хотя URL-адреса предварительного просмотра трудно угадать (поскольку они содержат случайный хеш), они общедоступны. Таким образом, любой, кто знает URL-адрес, может получить к нему доступ.
Из корня локального каталога проекта выполните следующую команду:
firebase hosting:channel:deploy CHANNEL_ID
Замените CHANNEL_ID строкой без пробелов (например,
feature_mission-2-mars
). Этот идентификатор будет использоваться для создания URL-адреса предварительного просмотра, связанного с каналом предварительного просмотра.Откройте веб-приложение по URL-адресу предварительного просмотра, возвращенному CLI. Это будет выглядеть примерно так:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Чтобы обновить URL-адрес предварительного просмотра с изменениями, снова запустите ту же команду. Обязательно укажите в команде тот же
CHANNEL_ID
.
Узнайте об управлении каналами предварительного просмотра , в том числе о том, как установить срок действия канала.
Firebase Hosting поддерживает действие GitHub, которое автоматически создает и обновляет URL-адрес предварительного просмотра, когда вы фиксируете изменения в запросе на включение. Узнайте, как настроить и использовать это действие GitHub .
Шаг 3. Развертывание в реальном времени
Когда вы будете готовы поделиться своими изменениями со всем миром, разверните содержимое Hosting и настройте его на своем активном канале. Firebase предлагает несколько различных вариантов этого шага в зависимости от вашего варианта использования (см. варианты ниже).
Вариант 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. Развертывание из локального каталога проекта на действующем канале.
Этот параметр обеспечивает гибкость настройки конфигураций, специфичных для канала прямой трансляции, или развертывания, даже если вы не использовали канал предварительного просмотра.
Из корня локального каталога проекта выполните следующую команду:
firebase deploy --only hosting
Просмотрите изменения (следующий шаг).
Шаг 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 основным способом удаления выбранных файлов с развернутого сайта является локальное удаление файлов с последующим повторным развертыванием.
Следующие шаги
Интегрируйтесь с GitHub и повторяйте просмотренный контент , настроив действие GitHub .
Узнайте о дополнительных возможностях хостинга:
Ознакомьтесь с полной документацией Firebase CLI .
Подготовьтесь к запуску приложения:
- Настройте оповещения о бюджете для своего проекта в консоли Google Cloud .
- Отслеживайте панель «Использование и выставление счетов» в консоли Firebase , чтобы получить общую картину использования вашего проекта в нескольких сервисах Firebase. Вы также можете посетить панель управления использованием Hosting для получения более подробной информации об использовании.
- Ознакомьтесь с контрольным списком запуска Firebase .