Да, вы правильно прочитали Бесплатно, теперь вы можете разместить свой веб-сайт с помощью службы Firebase Hosting, ничего не платя, при условии, что ваше использование не превышает Бесплатно Параметры хостинга ». И поверьте, для новичка этого более чем достаточно. Когда ваш сайт станет популярным и вам понадобится больше ресурсов, вы можете просто переключиться на любой платный план. Как упоминалось на официальном сайте Firebase, Начни бесплатно, потом плати по мере использования.
В этой статье мы шаг за шагом продемонстрируем это, создав простое приложение для реагирования. Вы можете использовать любую структуру или базовый HTML, JavaScript для разработки своего веб-сайта. Давайте начнем …
Шаг 1. Создайте новый проект в Firebase Console
Войдите в Firebase Console со своим идентификатором Gmail и нажмите Добавить проект, чтобы создать новый проект.
Во всплывающем окне введите имя проекта, он автоматически сгенерирует идентификатор проекта, который вы также можете изменить. Примите все условия и нажмите кнопку Создать проект.
Теперь наш проект Firebase готов, давайте создадим базовое приложение React.
Шаг 2. Загрузите и установите Node.js
Загрузите Node.js с сайта ниже и установите.
Шаг 3. Установите пакет узлов пряжи
После успешной установки Node.js откройте терминал или командную строку и выполните команду ниже
npm i --global yarn
Шаг 4. Создайте новое приложение React
В командной строке используйте команду ниже, чтобы создать новое приложение для реагирования -
npx create-react-app <your_app_name>
Наше базовое приложение для реагирования создается с установленными базовыми файлами и пакетами.
Шаг 5. Установите пакет npm firebase-tools
Используйте команду ниже, чтобы установить пакет firebase-tools из командной строки.
npm install -g firebase-tools
Шаг 6. Войдите в Firebase из командной строки
После установки firebase-tools используйте команду ниже для входа в Firebase -
firebase login
Шаг 7. Инициализируйте проект Firebase
Теперь нам нужно запустить проект Firebase внутри нашей папки проекта. Из командной строки перейдите в папку проекта приложения React и выполните команду ниже -
firebase init
После того, как вы запустите эту команду, она выполнит несколько шагов и вопросов по настройке проекта -
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
Перейдите с помощью клавиш со стрелками вверх и вниз и выберите «Хостинг: настройка и развертывание сайтов хостинга Firebase», нажав клавишу пробела.
На следующем шаге вам будет предложено выбрать проект Firebase. Если вы не видите свой проект Firebase (созданный на шаге 1) в списке, просто выберите вариант «не настраивать проект по умолчанию». Позже вы можете использовать команду «firebase use --add», чтобы связать свой проект реакции с проектом Firebase.
Затем он попросит нас указать расположение общей папки. Хостинг Firebase ожидает, что все содержимое веб-приложения находится в папке «Public». Внутри нашей папки проекта у нас есть папка с именем Public. Но мы не будем упоминать это как нашу общую папку проекта Firebase. Потому что, когда мы создаем проект React, он помещает все его содержимое в папку под названием «build». Поэтому мы упомянем build в качестве общедоступной папки проекта firebase.
И, наконец, нас спросят, хотим ли мы настроить одностраничное приложение. Просто введите Y и нажмите клавишу ВВОД.
Наш проект firebase инициализирован. Но, как я уже упоминал выше, если вы не могли настроить какой-либо проект по умолчанию ранее, нам нужно настроить его сейчас. Если вы уже выбрали проект по умолчанию ранее, пропустите эту команду ниже.
firebase use --add
Шаг 8. Создайте приложение
Запустите команду ниже, чтобы создать свое приложение
yarn build
Он создаст папку сборки внутри папки нашего проекта со всеми статическими файлами нашего приложения.
Шаг 9. Разверните приложение
Теперь наш проект firebase готов к развертыванию на хостинге Firebase. Просто используйте команду ниже, чтобы развернуть ее -
firebase deploy
Если у вас есть снимок экрана, показанный ниже, с сообщением «Развертывание завершено!», Значит, вы успешно развернули свое первое веб-приложение на хостинге Firebase… отлично.
Теперь откройте ссылку Hosting URL в любом браузере и ура ... вы сможете увидеть свое размещенное веб-приложение.
Мы уже успешно развернули наше веб-приложение на хостинге Firebase. Теперь, если у вас есть зарегистрированный домен и вы хотите связать свое приложение с этим доменом, переходите к следующему шагу.
Шаг 10. Подключитесь к собственному домену
Откройте консоль Firebase и выберите Хостинг в меню слева.
Теперь нажмите кнопку подключения домена справа.
В окне «Подключить домен» введите принадлежащий вам домен и нажмите Продолжить.
Теперь на этапе подтверждения владения вы можете увидеть, что он инструктирует вас добавить запись «TXT» к вашему провайдеру DNS для проверки.
Теперь просто скопируйте текст Значение.
Я принес свой домен из GoDaddy, если вы использовали его у другого поставщика услуг, просто войдите на сайт этого поставщика услуг и откройте страницу обслуживания домена.
Нажмите кнопку DNS.
Вы увидите, что там уже определен набор записей. Теперь нажмите кнопку ДОБАВИТЬ.
Теперь в разделе Тип выберите TXT, введите значение поля Хост как «@» в разделе Значение TXT. вставьте значение, скопированное из консоли Firebase, и нажмите Сохранить.
После успешного сохранения записи вернитесь в консоль Firebase и нажмите кнопку Подтвердить. После успешной проверки вы увидите экран, как показано ниже -
Нам нужно добавить еще 2 записи в наши настройки DNS. Столбец Value будет содержать IP-адреса, которые нам нужно добавить.
Сначала удалите все существующие записи A или AAAA из системы управления DNS.
Теперь добавьте записи A так же, как мы добавляли запись TXT ранее.
Введите
Хозяин: @
Указывает на: скопированное значение из консоли Firebase (IP-адрес)
После успешного добавления обеих записей A вернитесь в консоль Firebase и нажмите кнопку «Готово». Теперь на вашей панели управления хостингом Firebase будет отображаться ваш персональный домен.
Вы можете увидеть статус вашего личного домена: «В ожидании». Это потому, что Firebase требуется несколько часов для завершения всех процессов. Но это не помешает вам открыть свой домен в браузере. Так что просто нажмите на ссылку или введите свое доменное имя в браузере, и вы увидите свой размещенный веб-сайт.
Сначала вы можете увидеть ошибку «Ваше соединение не защищено» в браузере. Просто проигнорируйте это и продолжите, нажав кнопку «Дополнительно». Это происходит потому, что Firebase требуется некоторое время для активации сертификата SSL.
Yahoo… теперь размещен наш сайт с персональным доменом.
удачного кодирования…
