Размещение статических и динамических приложений с помощью 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:

  1. Зайдите в Firebase Console
  2. Создайте там новый проект, когда он будет создан, вы сможете выйти из Консоли
  3. Создайте новое приложение React.js с create-react-app
  4. Напишите свой код React. Я оставляю это со стартовым шаблоном
  5. Создайте версию сборки вашего приложения React с npm run build. Теперь у вас должен быть каталог / build.
  6. Установите интерфейс командной строки Firebase с npm install -g firebase-tools
  7. Запустите firebase init в корневом каталоге вашего приложения React.js
  8. Выберите «Хостинг», используйте существующий проект, созданный на шаге 2, в противном случае создайте новый проект. В качестве общедоступного каталога введите «build», поскольку там находится наше готовое к производству приложение React.
    Выберите «да» для настройки одностраничного приложения. (Так что мы можем использовать, например, response-router)
    Не перезаписывать существующий index.html
  9. Запустите 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

  1. Зайдите в Firebase Console
  2. Создайте новый проект, когда вы закончите, в Консоли больше нечего делать
  3. Создайте новую папку для проекта, пока оставьте ее пустой
  4. Установите официальный интерфейс командной строки: npm install -g firebase-tools
  5. запустите firebase init в папке проекта
  6. Выберите «Функции» (вы можете выбрать что-нибудь с пробелом, а затем нажать Enter)
  7. Выберите существующий проект и выберите имя того, что вы создали на шаге 2.
  8. Вы должны сказать «да» для использования JavaScript, автоматически устанавливая зависимости, ESLint зависит от вас.
  9. переместитесь в папку / 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 в одном проекте и сделаем их доступными в одном домене.

  1. Создайте новый проект в Firebase Console
  2. Создайте новый каталог на вашем компьютере
  3. Создайте новое приложение React с CRA внутри корня вашего приложения. Я вызвал приложение клиентом
  4. Запустите firebase init внутри каталога. Если вы еще этого не сделали, установите Firebase CLI раньше: npm install -g firebase-tools
  5. На этот раз выберите Хостинг и Функции с пробелом, затем нажмите Enter.
  6. Те же настройки, что и раньше, для хостинга и функций, но на этот раз общедоступный каталог для хостинга - это каталог сборки внутри приложения React. В моем случае это client / build
  7. Установите 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:

  1. Откройте firebase.json, который должен находиться в корне каталога вашего проекта.
  2. Объект верхнего уровня должен быть «хостингом», что является нормальным случаем при работе с проектом 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!