После завершения любого веб-приложения возникает задача Next, чтобы разместить его на сервере, чтобы приложение можно было увидеть глобально. В настоящее время у нас есть так много решений, которые можно использовать для размещения приложения. А также все стало проще, чем раньше, благодаря услугам, предоставляемым Firebase.
В этой статье мы узнаем все о развертывании приложения React через Firebase.
Что такое Firebase?
Firebase — это платформа, разработанная Google для создания мобильных и веб-приложений. Первоначально это была независимая компания, основанная в 2011 году. В 2014 году Google приобрела платформу, и теперь это их флагманское предложение для разработки приложений. Помимо функций хостинга, Firebase предоставляет другие услуги, такие как аутентификация, база данных в реальном времени, облачные функции и т. д.
Разверните приложение React шаг за шагом
1. Создайте проект Firebase
Перейдите на этот официальный сайт Firebase и создайте проект firebase.
2. Включить хостинг
Теперь включите Firebase Hosting, перейдя в раздел хостинга на левой боковой панели в раскрывающемся списке «Сборка».
3. Создайте приложение React
Мы создадим здесь приложение React, которое мы развернем на хостинге Firebase. Мы создадим приложение как обычно, как показано ниже:
npx create-react-app firebase-hosting-app
После полного выполнения вышеуказанной команды перейдите в папку проекта для выполнения дальнейших задач.
4. Установите инструменты Firebase
npm install firebase-tools -g
5. Войдите в Firebase
Чтобы выполнить любую задачу, связанную с firebase, нам нужно войти в систему через терминал/консоль. Мы будем использовать команду ниже для того же самого.
firebase login
6. Инициализируйте Firebase в приложении React, созданном выше.
Инициализируйте firebase в приложении React, используя следующую команду:
firebase init
После нажатия Enter после вышеуказанных вопросов будет задано несколько вопросов, связанных с конфигурацией. Сначала он спросит об услуге, которую вы хотите использовать для текущего проекта. Выберите здесь хостинг и нажмите Enter.
После подтверждения вышесказанного он задаст еще один вопрос. Поскольку мы уже создали проект Firebase, мы выберем вариант Использовать существующий проект, а затем выберем недавно созданный проект из показанного списка.
Теперь он попросит выбрать публичный каталог, по умолчанию он будет общедоступным, но реакция создаст сборку в папке build. Так будет делать, как показано ниже:
? What do you want to use as your public directory? build
Будет задано еще два вопроса: хотите ли вы перезаписать свой index.html и настроить действия GitHub, ответьте «Нет» на оба вопроса.
7: Создать сборку и развертывание
Мы завершили задачу конфигурации проекта в Firebase, поэтому наша следующая задача — создать сборку и развернуть ее в Firebase. Поскольку мы создали приложение с помощью create-react-app, мы будем использовать следующую команду для создания сборки:
npm run build
Разверните его через Firebase, используя следующую команду:
firebase deploy
Теперь у вас есть бесплатное размещение приложения React с использованием Firebase. После развертывания приложения на экране появится ссылка на хостинг.
Для получения дополнительной информации перейдите по ссылкам ниже:
Firebase — https://firebase.google.com
Документация по хостингу Firebase — https://firebase.google.com/docs/hosting
Сообщите мне свои мысли по электронной почте [email protected]. Я хотел бы услышать их, и если вам понравилась эта статья, поделитесь ею с друзьями.
Спасибо за прочтение!
Эта статья изначально была размещена на jsonworld
Нажмите здесь, чтобы присоединиться к онлайн-классу под руководством ИТ-специалистов технологических гигантов, таких как TCS, IBM, Accenture, Infosys и т. д.
Спасибо!
