В этом руководстве мы рассмотрим различные варианты хостинга и эмулятора Firebase, а также как использовать Firebase (только бесплатные сервисы) для размещения нашего собственного веб-сайта. Мы получим бесплатный домен: «https://your_website.web.app» с бесплатным SSL-сертификат.
Оглавление
- Почему стоит выбрать хостинг Firebase?
- Ограничения бесплатного плана Firebase Hosting
- Создание простого веб-сайта для начала
- Создание нашего проекта на веб-сайте консоли Firebase
- Установка инструментов и инициализация
- Попробуйте наш веб-сайт локально с помощью эмулятора Firebase
- Развертывание нашего веб-сайта на временном канале предварительного просмотра
- Размещение нашего сайта на хостинге Firebase
- Как запустить сценарий предварительного развертывания хостинга Firebase?
- Изменение поведения кэширования по умолчанию для хостинга Firebase
- Использование хостинга Firebase с запросом на вытягивание GitHub
- Как развернуть приложение React с помощью хостинга Firebase?
- Как развернуть приложение NextJS с помощью хостинга Firebase?
- Заключение
Почему стоит выбрать хостинг Firebase?
Firebase hosting — хостинг веб-контента производственного уровня для разработчиков от Google.
С помощью одной команды вы можете начать развертывание своего веб-приложения и передавать как статический, так и динамический контент в глобальную CDN (сеть доставки контента).
Firebase автоматически сожмет ваш контент с помощью gzip или Brotli и сохранит ваш контент на SSD, расположенных в разных местах по всему миру (CDN).
После развертывания вы получите бесплатный личный домен с SSL-сертификатом.
Ограничения бесплатного плана Firebase Hosting
- Память: 10 ГБ
- Передача данных: 360 МБ в день
- Передача данных: 10 ГБ в месяц
- Максимум 32 МБ на файл
- Максимум 1000 файлов на развертывание
- Максимум 36 развертываний в день
Создание простого веб-сайта для начала
Для начала мы создадим очень простой веб-сайт, он будет содержать три файла (index.html, style.css и app.js), все они находятся в одной папке: «/public».
./public └─ index.html ├─ app.js └─ style.css
index.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My project</title> <script src="./app.js" defer></script> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="container"> <h1 class="title"> Welcome to my project</h1> <p>Welcome to this simple website</p> <p id="status" class="status">="status" class="status"></p> </div> </body> </html>
app.js
document.getElementById("status").innerHTML =
"🟢 Javascript file loaded with success";
стиль.css
.title{
color: navy
}
.status{
border: 1px solid navy ;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
Создание нашего проекта на веб-сайте консоли Firebase
Прежде чем продолжить наш хостинг, мы должны сначала создать проект на веб-сайте Firebase.
- Получил: https://console.firebase.google.com
- Нажмите: + Добавить проект.
- Введите название вашего проекта и нажмите «Продолжить».
- Теперь вы можете включить или отключить аналитику Google в этом проекте (вы можете добавить ее позже, если не хотите).
- Настройте свою аналитику Google, выбрав правильный проект или создав новый из раскрывающегося меню.
- Установите флажок «Я принимаю условия Google Analytics», затем нажмите «Создать проект».
- Появится страница приветствия
Установка инструментов и инициализация
Мы будем использовать интерфейс командной строки Firebase для развертывания нашего веб-сайта (локальные файлы) на серверах Firebase. После развертывания мы получим уникальный URL-адрес с «.web.app» в качестве домена верхнего уровня (TLD).
В этом уроке мы будем использовать:
- Эмуляторы Firebase: для локального запуска нашего сайта.
- Хостинг Firebase: для размещения нашего веб-сайта.
- Действия GitHub для автоматического развертывания.
Сначала глобально установите пакет Firebase CLI
npm install -g firebase-tools
Войти с вашими учетными данными
npm firebase login
Затем инициализируйте свой проект
firebase init
- Выберите функции, которые вы хотите включить в свой проект, сейчас мы выберем хостинг и эмуляторы.
- Выберите › Использовать существующий проект
What do you want to use as your public directory? (public)
Нажмите Enter, мы сохраним значение по умолчанию.
What do you want to use as your public directory? public ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
Нажмите «y», чтобы сохранить значение по умолчанию.
Set up automatic builds and deploys with GitHub? (y/N)
Нажмите «N», мы настроим это позже.
? File public/index.html already exists. Overwrite? (y/N)
Нажмите «N», чтобы сохранить наш «index.html».
Теперь настройка эмулятора
=== Emulators Setup ? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ❯◯ Authentication Emulator ◯ Functions Emulator ◯ Firestore Emulator ◯ Database Emulator ◯ Hosting Emulator ◯ Pub/Sub Emulator ◯ Storage Emulator
Выберите: Эмулятор хостинга
? Which port do you want to use for the hosting emulator? (5000)
Оставьте значение по умолчанию
? Would you like to enable the Emulator UI? (Y/n) ? Would you like to enable the Emulator UI? Yes ? Which port do you want to use for the Emulator UI (leave empty to use any available port)? ? Would you like to download the emulators now? (y/N) y
Два файла и один каталог будут добавлены в корневой каталог нашего проекта.
- firebase.json
ведьма содержит конфигурацию Firebase
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"emulators": {
"hosting": {
"port": 5000
},
"ui": {
"enabled": true,
"port": 5001
},
"singleProjectMode": true
}
}
- .firebaseserc
Ведьма содержит идентификатор нашего проекта
{
"projects": {
"default": "myproject-d2260"
}
}
- /.firebase
С помощью хэшей для всех развернутых файлов в нашем проекте для оптимизации будущего развертывания.
Попробуйте наш веб-сайт локально с помощью эмулятора Firebase
Перед развертыванием нашего веб-сайта на серверах Firebase мы будем использовать Emulate Hosting, чтобы запустить наш проект с локального URL-адреса.
firebase emulators:start --project myproject-d2260
Где «myproject-d2260» — это идентификатор вашего проекта, вы можете получить его с веб-сайта консоли Firebase или из «.firebaseserc».
В браузере перейдите по этому URL-адресу, чтобы запустить свой веб-сайт локально.
http://127.0.0.1:5000
Развертывание нашего веб-сайта на временном канале предварительного просмотра
Чтобы просмотреть и поделиться вашими изменениями по временному URL-адресу предварительного просмотра на серверах Firebase, мы выполним эту команду.
firebase hosting:channel:deploy beta
Где «бета» — название временного канала.
Результат:
✔ hosting:channel: Channel URL (myproject-d2260): https://myproject-d2260--beta-f1m33zsv.web.app [expires 2023-03-11 16:18:25]
Где:
- myproject-d2260: идентификатор проекта
- бета: название канала предварительного просмотра
- f1m33zsv: случайное число, сгенерированное Firebase
- [expires 2023–03–11 16:18:25]: когда истечет срок действия вашего URL
По умолчанию этот канал истечет через 7 дней, чтобы изменить это поведение, вы можете добавить «— expires» к нашей последней команде.
Например:
firebase hosting:channel:deploy beta --expires 1h
Этот канал истечет через 1 час.
Or:
firebase hosting:channel:deploy beta --expires 10m
Этот канал истечет через 10 минут.
Развертывание нашего сайта на хостинге Firebase
Если вы удовлетворены результатами, вы можете развернуть свой веб-сайт с помощью этой команды.
firebase deploy
Результат этой команды
=== Deploying to 'myproject-d2260'... i deploying hosting i hosting[myproject-d2260]: beginning deploy... i hosting[myproject-d2260]: found 3 files in public ✔ hosting[myproject-d2260]: file upload complete i hosting[myproject-d2260]: finalizing version... ✔ hosting[myproject-d2260]: version finalized i hosting[myproject-d2260]: releasing new version... ✔ hosting[myproject-d2260]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/myproject-d2260/overview Hosting URL: https://myproject-d2260.web.app
URL вашего веб-сайта:
https://myproject-d2260.web.app
Если что-то пойдет не так, вы можете отменить это развертывание одним щелчком мыши на веб-сайте консоли Firebase, вы можете откатить или удалить до пяти развертываний.
Как запустить сценарий предварительного развертывания хостинга Firebase?
Чтобы запустить сценарий предварительного развертывания до нашего рабочего процесса развертывания, добавьте эту строку в «firebase.json» с именем сценария.
"predeploy": "script_name",
Мы можем использовать его, например, для копирования некоторых файлов, минимизации файлов JavaScript или запуска сценария сборки (для ReactJS или NextJS) перед началом процесса развертывания.
Изменение поведения кэширования по умолчанию для хостинга Firebase
Значение заголовка Cache-Control по умолчанию для Firebase Hosting равно max-age=600, что означает, что браузер и любые промежуточные кэши (например, CDN) могут кэшировать контент на срок до 10 минут (600 секунд).
Мы можем изменить это поведение, добавив эту строку в «firebase.json», все значения рассчитываются в миллисекундах:
- 7776000 мс (90 дней) для изображений, шрифтов, файлов html, css, js
- 604800 мс (7 дней) для файлов mp3
- 300 мс для нашего файла «404.html»
"headers": [
{
"source": "**/*.@(ttf|svg|woff|)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7776000"
}
]
},
{
"source": "**/*.@(html|js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7776000"
}
]
},
{
"source": "**/*.@(jpg|jpeg|png)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7776000"
}
]
},
{
"source": "**/*.@(mp3)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=300"
}
]
}
]
Как использовать хостинг Firebase с GitHub CI/CD
Вы можете легко интегрировать рабочий процесс хостинга Firebase с GitHub, используя действия GitHub.
Firebase будет использовать действия GitHub для:
- Создает новый канал предварительного просмотра для каждого PR (pull request) в вашем репозитории GitHub.
- Добавляет комментарий к PR с URL-адресом предварительного просмотра, чтобы вы и каждый рецензент могли просматривать и тестировать изменения PR в предварительной версии вашего приложения. И обновляйте «URL-адрес предварительного просмотра» с каждым новым коммитом.
- При желании развертывает текущее состояние вашего репозитория GitHub на ваш канал в реальном времени при объединении PR.
Давай попробуем
- Создайте свой репозиторий GitHub (частный или общедоступный).
- В терминале вашего проекта запустите эти команды
git init git add . git commit -m "first commit"
Это инициализирует репозиторий git для нашего проекта, затем зафиксирует все изменения.
Затем
git remote add origin https://_your_GitHub_repo_url git branch -M main git push -u origin main
При этом мы переименуем нашу ветку git в основную, а затем отправим все файлы в удаленный репозиторий GitHub.
Теперь мы готовы начать использовать хостинг Firebase с действиями GitHub.
Поскольку мы УЖЕ настроили хостинг, нам просто нужно настроить часть хостинга GitHub Action, выполнив эту команду:
firebase init hosting:github
Затем введите имя вашего репо
В нашем случае: adelpro/myproject
✔ Success! Logged into GitHub as adelpro ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
Затем
Set up the workflow to run a build script before every deploy?
ответ: "Н"
? Set up automatic deployment to your site's live channel when a PR is merged?
ответ: "Ю"
? What is the name of the GitHub branch associated with your site's live channel?
ответ: главный
С этим мы успешно настроили наши действия GitHub.
✔ Firebase initialization complete!
Теперь всякий раз, когда вы отправляете изменения в удаленную основную ветку, GitHub автоматически развертывает это изменение на хостинге Firebase с помощью действий GitHub.
Давай попробуем
- внести некоторые изменения
- В основной ветке git запустите
git add. git commit -m "new commit" git push
Теперь перейдите в раздел действий GitHub.com, чтобы увидеть процесс автоматического развертывания.
Теперь наш веб-сайт автоматически развертывается на хостинге Firebase с помощью действий GitHub.
Как развернуть приложение React с помощью хостинга Firebase?
Угадай, что? Развернуть приложения React с помощью хостинга Firebase очень просто.
В этой статье мы будем использовать тот же подход с небольшими изменениями.
Мы изменим эти две строки в «firebase.json».
{
"hosting": {
"public": "build",
"predeploy": "npm run build",
...
}
- Мы изменили папку хостинга по умолчанию на «/build», которая является папкой по умолчанию для команды сборки create-react-app.
- Мы добавили новую запись: «predeploy», которая будет автоматически выполняться перед началом процесса развертывания.
Вот и все, ваше приложение React готово к развертыванию.
firebase deploy
Чтобы развернуть приложение React на хостинге Firebase с помощью действий GitHub, вы можете добавить одну строку в наш прецедентный процесс.
Откройте «firebase-hosting-pull-request.yml», затем сразу после этой строки
... steps: - uses: actions/checkout@v2 ...
Добавлять
.... steps: - uses: actions/checkout@v2 - run: npm ci && npm run build ...
При этом перед каждым деплоем с GitHub будет автоматически выполняться команда сборки.
Как развернуть приложение NextJS с помощью хостинга Firebase?
Как вы можете видеть в официальной документации Firebase Hosting:
Используя интерфейс командной строки Firebase, вы можете развертывать свои веб-приложения Next.js в Firebase и обслуживать их с помощью Firebase Hosting. CLI учитывает ваши настройки Next.js и преобразует их в настройки Firebase с нулевой или минимальной дополнительной настройкой с вашей стороны. Если ваше приложение включает динамическую логику на стороне сервера, интерфейс командной строки развертывает эту логику в Cloud Functions for Firebase.
Чтобы развернуть свой NextJS на хостинге Firebase, вы можете использовать ту же логику, что и развертывание React, описанное выше, но если ваше приложение NextJs включает динамическую логику на стороне сервера, вы должны использовать Облачные функции Firebase, первые 2 000 000 вызовов, 400 000 ГБ-сек. , 200 000 CPU-sec и 5 ГБ исходящего интернет-трафика предоставляются бесплатно каждый месяц.
Заключение
В этой статье мы обсудили, как бесплатно развернуть наш веб-сайт с помощью Firebase Hosting с различными конфигурациями и параметрами.
Мы также обсудили, как использовать передовые методы Firebase Hosting, такие как управление кешем и автоматическое развертывание с помощью действий GitHub.
Наконец, мы рассказали о том, как интегрировать рабочий процесс хостинга Firebase с ReactJS и NextJS.
Спасибо за прочтение
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
