Олександр Мацібора. Розгортання веб-ГІС застосунку (Vue.js, Leaflet.js) засобами безперервної інтеграції GitHub Actions на веб-хостингу Google Firebase

Автор
Олександр Мацібора
Опубліковано

DOI

Використання хмарної інфраструктури стає все більш популярним сьогодні через її надійність, стабільність і високий рівень безпеки. Більшість провайдерів хмарних сервісів пропонують безкоштовні або умовно безкоштовні тарифні плани для звичайних користувачів і розробників. Доступний тарифний план — гарна нагода налаштувати розгортання односторінкового веб-ГІС застосунку на безкоштовному веб-хостингу.

Зазвичай розгортання Vue.js застосунку це досить простий і прямолінійний процес завдяки численним онлайн-інструкціям та багатьом інтегрованим програмним засобам з інтерфейсом командного рядка (CLI). Тому щоб зробити даний експеримент більш комплексним було налаштовано сценарій безперервної інтеграції та постійного розгортання (CI/CD) веб-застосунку на основі фреймворка Quasar на веб-хостингу Google Firebase засобами GitHub Actions.

Розгортання веб-ГІС застосунку (Vue.js, Leaflet.js) шляхом CI/CD засобами GitHub Actions на веб-хостингу Google Firebase

“Веб-ГІС міських маршрутів” — це типовий повністю “клієнтський” односторінковий застосунок, у якому всі дані (в тому числі просторові) зберігаються у файлах JSON та geoJSON.

Основні функціональні особливості веб-застосунку:

  • авторський підхід до управління тематичними шарами
  • використання двох векторних шарів для відображення кожного маршруту (фото матеріали та власне лінія маршруту)
  • масштабування карти по кожному маршруту
  • показ всіх маршрутів міста Тарту одночасно
  • використання WMS шарів наданих Estonian Land Board (EPSG:3301)

Процес розгортання Vue.js застосунку на веб-хостингу Firebase детально описаний в офіційній документації, але якщо використовувати фреймворк Quasar з менеджером пакетів yarn, він потребує деяких додаткових налаштувань. Після встановлення пакету “firebase-tools”, входу в обліковий запис Firebase, протягом ініціалізації хостингу необхідно (окрім іншого) вказати публічний каталог “dist/spa” і налаштувати декілька додаткових кроків у скрипті перед кожним новим розгортанням

  • run: rm -rf node_modules

  • run: yarn install --frozen-lockfile

  • run: yarn add @quasar/cli

  • run: quasar build:

Висновок
Налаштування сценарію безперервної інтеграції та розгортання односторінкового веб-застосунку, розробленого за допомогою фреймворку Quasar, на веб-хостингу Google Firebase засобами GitHub Actions було успішним завдяки детальній документації, Firebase CLI, а також безкоштовному тарифному плану “Spark”. Це була гарна можливість познайомитись із елементами інфраструктури Google Cloud і отримати надійний веб-хостинг для веб-ГІС застосунку.

Корисні посилання: