Размещение статических и динамических приложений с помощью Node.js в качестве серверной части с использованием Firebase Hosting и Cloud Functions - бесплатно!
Что такое Firebase?
Серверная платформа Google Firebase предлагает множество возможностей - не только размещение настраиваемой серверной части с Node.js, но и все части, необходимые для полнофункционального проекта, такие как базы данных, хостинг файлов, аутентификация и многое другое.
Но независимо от того, хотим ли мы разместить статический веб-сайт с хостингом Firebase или создать серверную часть Node.js с облачными функциями, Firebase полагается на гибкую модель ценообразования. Ни в коем случае не нужно указывать способ оплаты бесплатного тарифного плана, это достаточно удобно и одновременно обнадеживает. Например, пока они вносят депозит на вашу кредитную карту, с нее будет взиматься плата только в том случае, если вы действительно превысите бесплатную квоту с ее бесплатными ресурсами.
Кроме того, нужно сказать, что бесплатно вы не получите лучшее из лучшего, что должно быть ясно - бесплатные контингенты идеально подходят для небольших проектов, чтобы попробовать ром или опробовать платформу.
Однако не стоит размещать профессиональный веб-сайт своей компании с бесплатным тарифным планом - это может привести к проблемам с производительностью.
Давайте посмотрим, как мы размещаем статические веб-сайты и серверные части Node.js с помощью Firebase.
Статический хостинг веб-сайтов с Firebase - Firebase Hosting
Например, для размещения статических веб-сайтов, когда мы получаем их в виде папки / build, когда мы выполняем процесс сборки в проекте create-response-app, Firebase предлагает службу хостинга Firebase. Используя официальный интерфейс командной строки Firebase в терминале с CMD или Bash, вы можете просто развернуть папку готового статического веб-сайта, чтобы она была загружена и стала доступной на серверах Firebase.
Возможности:
- Бесплатный SSL
- CDN по всему миру для быстрой доставки статического контента
- До 10 ГБ размещенного контента
- 10 ГБ бесплатного трафика каждый месяц
- Несколько проектов / сайтов
- Подключите свой собственный, существующий домен верхнего уровня, как я сделал это с wieals.de
- Бесплатные и выбираемые домены .firebaseapp.com и .web.app для каждого проекта
- Простое развертывание с помощью интерфейса командной строки
Вот простой пример того, как разместить приложение React.js с Firebase Hosting:
- Зайдите в Firebase Console
- Создайте там новый проект, когда он будет создан, вы сможете выйти из Консоли
- Создайте новое приложение React.js с
create-react-app
- Напишите свой код React. Я оставляю это со стартовым шаблоном
- Создайте версию сборки вашего приложения React с
npm run build
. Теперь у вас должен быть каталог / build. - Установите интерфейс командной строки Firebase с
npm install -g firebase-tools
- Запустите
firebase init
в корневом каталоге вашего приложения React.js - Выберите «Хостинг», используйте существующий проект, созданный на шаге 2, в противном случае создайте новый проект. В качестве общедоступного каталога введите «build», поскольку там находится наше готовое к производству приложение React.
Выберите «да» для настройки одностраничного приложения. (Так что мы можем использовать, например, response-router)
Не перезаписывать существующий index.html - Запустите
firebase deploy
При поиске URL-адреса хостинга, который выводит интерфейс командной строки Firebase в браузере, вы должны увидеть, что ваше приложение React.js запущено.
Размещение приложения Node.js с помощью Firebase - облачные функции Firebase
Для работы с серверной частью с помощью JavaScript Firebase предлагает так называемые облачные функции, которые следуют бессерверному подходу.
Без большой предварительной настройки или знаний администратора мы можем предоставить наш бэкэнд с JavaScript, где облачные функции под капотом используют Node.js.
Поэтому мы можем использовать фреймворки узлов, такие как Express.js, а также механизмы создания шаблонов, такие как ручки, и другие библиотеки, доступные для Node.js или JavaScript на стороне сервера.
Возможности:
- Размещение приложений Node.js с помощью JavaScript или TypeScript
- Доступ к другим сервисам Firebase, таким как база данных Firestore
- Локальное тестирование функций
- Журналы, данные об использовании и статусе ваших функций, доступные для просмотра в Firebase Console.
- Легкое развертывание
Преимущества использования Firebase в этом случае
- Это бесплатно
- Никакой борьбы с конфигурацией
- Масштабируемость, если вы хотите использовать платный тариф. Вы платите только за то, что используете в Firebase
- Безопасность, поскольку вам не нужно что-то настраивать самостоятельно, что снижает риск создания проблем или потенциальной уязвимости безопасности
Поскольку мы должны придерживаться «правил игры» Firebase, давайте посмотрим на небольшой пример «привет, мир» с Express:
Пример Hello World с Node.js и Express в облачных функциях Firebase
- Зайдите в Firebase Console
- Создайте новый проект, когда вы закончите, в Консоли больше нечего делать
- Создайте новую папку для проекта, пока оставьте ее пустой
- Установите официальный интерфейс командной строки:
npm install -g firebase-tools
- запустите firebase init в папке проекта
- Выберите «Функции» (вы можете выбрать что-нибудь с пробелом, а затем нажать Enter)
- Выберите существующий проект и выберите имя того, что вы создали на шаге 2.
- Вы должны сказать «да» для использования JavaScript, автоматически устанавливая зависимости, ESLint зависит от вас.
- переместитесь в папку / functions и установите экспресс с
npm install express
Теперь у вас есть готовая настройка проекта, в папке / functions находятся наши файлы JavaScript для внутренних функций. Теперь вы можете заполнить index.js следующим содержанием:
const functions = require(‘firebase-functions’) const express = require(‘express’) const app = express() app.get(‘/’, (req, res) => { res.send(‘hello world!’) }) exports.app = functions.https.onRequest(app)
Теперь вы можете запустить firebase deploy
, и ваша функция должна быть успешно развернута. Интерфейс командной строки должен выводить URL-адрес вашего запущенного бэкэнда как URL-адрес функции, поэтому, когда вы откроете его в браузере, вы должны увидеть «hello world».
В противном случае вы можете найти URL-адрес функции в консоли Firebase на вкладке functions проекта, для которого вы создали функцию.
Важно
exports.app означает, что имя функции зарегистрировано в Firebase как «приложение». Поскольку вы можете запускать несколько функций в одном проекте, это также означает, что каждая функция имеет уникальный маршрут, просто свое имя.
Например, функция index.js будет выглядеть так:
https://us-central1-fullstack-4b168.cloudfunctions.net/app.
Поэтому важно учитывать именно такое поведение в index.js, если мы хотим прослушивать его даже на разных маршрутах с помощью функции app.get ().
Сочетание обоих
Давайте развернем статическое приложение React, а также облачную функцию Express.js в одном проекте и сделаем их доступными в одном домене.
- Создайте новый проект в Firebase Console
- Создайте новый каталог на вашем компьютере
- Создайте новое приложение React с CRA внутри корня вашего приложения. Я вызвал приложение клиентом
- Запустите
firebase init
внутри каталога. Если вы еще этого не сделали, установите Firebase CLI раньше:npm install -g firebase-tools
- На этот раз выберите Хостинг и Функции с пробелом, затем нажмите Enter.
- Те же настройки, что и раньше, для хостинга и функций, но на этот раз общедоступный каталог для хостинга - это каталог сборки внутри приложения React. В моем случае это client / build
- Установите Express внутри каталога functions, и если вы хотите использовать некоторые библиотеки React.js, установите их внутри client
Это должна быть структура до сих пор. В папке нашего проекта есть 2 основных каталога: client для приложения React и functions для нашего файла Node.js, который содержит код функции.
├── /client │ ├── README.md │ ├── package.json │ ├── /public │ ├── /src │ └── yarn.lock ├── firebase.json └── /functions ├── index.js ├── package-lock.json └── package.json
Если вы развернете это, по умолчанию функция будет размещена в другом домене. Чтобы этого избежать, нам нужно использовать перезапись URL-адреса. После этого мы пишем код нашей функции.
Перезаписи могут использоваться для определенных маршрутов нашего URL-адреса хостинга, для пересылки в другие службы Firebase или просто для предоставления маршрутов другим каталогам, чтобы к ним можно было получить доступ извне.
Мы используем перезаписи, чтобы убедиться, что наш хостинг и наша функция доступны через один и тот же домен, но что функция имеет свой собственный маршрут к нам. Конечно, это все косметические меры, поэтому вам не нужно выполнять этот шаг.
Как упоминалось ранее, по умолчанию хостинг и функции имеют совершенно разные URL-адреса, и если вы хотите вызвать API-вызов облачной функции в своем приложении React, которое использует хостинг, вы можете сделать это, даже если функция имеет совершенно другой URL-адрес.
Кроме того, конечно, с Rewrites мы можем использовать не только для API, но и когда у нас есть подстраницы нашего готового веб-сайта, которые должны обслуживаться из Express, чтобы через тот же домен пользователь даже не заметил, что он перешел с приложение React.js к нашей функции.
Вот как мы создаем перезаписи в Firebase:
- Откройте firebase.json, который должен находиться в корне каталога вашего проекта.
- Объект верхнего уровня должен быть «хостингом», что является нормальным случаем при работе с проектом Firebase Hosting.
По умолчанию уже должна быть перезапись для каждого (**) входящего маршрута, указывающего на index.html в каталоге client / build.
Это означает, что независимо от того, какой маршрут пользователь выберет в нашем домене хостинга, он всегда будет направлен на index.html, наше одностраничное приложение React.
Мы должны изменить это поведение. Пользователю больше не нужно переходить в приложение React для каждого маршрута, только когда вызывается «/». Кроме того, мы создадим перезапись для маршрута «/ api», который ссылается на нашу функцию с именем «api», которую мы создадим в нашем index.js в каталоге функций. Помните, что имя функции не является именем файла, а определяется
exports. ‹Name›.
firebase.json с выполненными изменениями:
“rewrites”: [ { “source”: “/”, “destination”: “/index.html” }, { “source”: “/api”, “function”: “api” } ]
Наш код для функции index.js:
const functions = require('firebase-functions') const express = require('express') const app = express() app.get('*', (req, res) => { res.send("Hello from the API") }) exports.api = functions.https.onRequest(app)
Теперь мы можем запустить firebase deploy
.
Если вы посмотрите URL-адрес хостинга, CLI выдает вам после развертывания на корневой странице «/» приложение React, которое должно быть запущено, но если вы введете «/ api» как Теперь вы должны увидеть ответ API.
Но что, если мы хотим иметь несколько маршрутов, обрабатываемых Express?
Мы просто упростили это с помощью app.get («*»), но если у нас есть несколько маршрутов, которым нужна собственная функция app.get (), мы не можем сказать им обоим, чтобы они прослушивали все их собственные маршруты - это было бы неоднозначно.
Скажем так, мы хотим иметь административную область, управляемую Express, в дополнение к маршруту API, по которому мы можем получить доступ к нашему API. Затем, конечно, мы должны сначала создать перезапись.
Просто добавьте его в наш firebase.json под двумя другими перезаписываемыми файлами, которые уже есть:
{ “source”: “/admin”, “function”: “api” }
Теперь нам нужно внести изменения в наш index.js, чтобы убедиться, что маршруты уникальны:
app.get(‘/api’, (req, res) => { res.send(‘API output’) }) app.get(‘/admin’, (req, res) => { res.send(‘This is the admin page’) })
Теперь вы можете снова запустить firebase deploy
и получить доступ к приложению React через «/» и к двум маршрутам Express.js через «/ api» и «/ admin».
И вот оно!
Спасибо за внимание! Хотите подписаться на Medium.com и одновременно поддержать меня? Если ваш ответ "да", обязательно проверьте это:
Https://louispetrik.medium.com/membership
По этой ссылке я буду получать часть ваших ежемесячных платежей, если вы зарегистрируетесь. Тем не менее, для вас не будет никаких дополнительных затрат. Следовательно:
Заранее благодарю! :)
Примечание на простом английском языке
Вы знали, что у нас четыре публикации и канал на YouTube? Вы можете найти все это на нашей домашней странице plainenglish.io - проявите немного любви, подписавшись на наши публикации и подписавшись на наш канал YouTube!