Я работал над небольшим побочным проектом пару недель и, наконец, дошел до этапа, на котором мне нужно развернуть свой код и показать приложение всему миру. Обычно я использую digitalocean, но мне было очень сложно каждый раз настраивать что-то (даже когда у меня есть скрипты, которые автоматизируют что-то за меня). Недавно мой коллега показал мне, как легко развернуть статическое приложение на хостинге Firebase, поэтому я решил попробовать.
Поскольку я создаю свое приложение с помощью preact-cli, его очень легко построить, просто нужно ввести preact-build в моем терминале, и код готов для развертывание, довольно просто, не так ли ?. Единственное, что мне нужно сделать, это загрузить его на хостинг Firebase с помощью Travis CI при каждом нажатии на github. (Travis CI - один из самых популярных инструментов непрерывной интеграции, он полностью бесплатен для проектов с открытым исходным кодом)
Создать проект firebase
Зарегистрируйтесь в Firebase, создайте проект https://console.firebase.google.com и установите инструменты firebase по всему миру:
npm install -g firebase-tools
Настроить Firebase
После создания проекта и установки firebase-tools настало время настроить firebase, первое, что нам нужно сделать, это перейти в папку вашего проекта и войти в систему с вашей учетной записью google.
firebase login
Следующее действие - запустить свой проект и выполнить следующие действия:
firebase init
Firebase задаст вам несколько вопросов:
? Какие функции Firebase CLI вы хотите настроить для этой папки?
- Выберите Хостинг
? Что вы хотите использовать в качестве общедоступного каталога?
- Введите build (это папка сборки по умолчанию preact-cli)
? Настроить как одностраничное приложение (переписать все URL-адреса в /index.html)?
- Да
Создать файл Travis YML
Чтобы связать ваш проект с travis, нам нужно создать файл travis.yml на его корневом уровне. Мой файл выглядит так:
Файл разделен на несколько разделов:
1. Во-первых, необходимо указать язык и версию nodejs, которые мы собираемся использовать.
2. Укажите ветку, в моем случае я хочу развернуть только на push в ветке master
3. before_script: в этом разделе я предпочитаю установить все зависимости, в моем случае firebase-tools, preact-cli и связанные с моим проектом.
4. script: этот раздел отвечает только за создание моего preact приложения с использованием preact cli
5. after_success: используйте инструменты Firebase для развертывания моего приложения, нам нужен токен для этого (подробнее в следующем разделе), который будет передаваться как переменная env $ FIREBASE_TOKEN
6. наконец, я хотел бы получить уведомление, когда мое развертывание будет завершено
Настроить токен Firebase в Travis
Как я сказал в предыдущем разделе, нам нужно настроить токен Firebase в Travis. Вернитесь к своему терминалу и введите:
$ firebase login:ci
это откроет всплывающее окно входа в Google, и после входа в систему он сгенерирует для вас токен, скопируйте токен.
Следующим шагом будет перейти на travis-ci.org и найти свой проект:
Нажмите на значок шестеренки и перейдите на страницу настроек, где вы можете добавить переменные среды FIREBASE_TOKEN.
Это все, несколько очень простых шагов, и у вас есть автоматическая сборка и развертывание при каждом нажатии на главную ветку.
