Firebase – Hosting

W tym wpisie przedstawię możliwości jakie daje usługa Firebase Hosting oraz pokażę krok po kroku jak skonfigurować własną domenę. Firebase Hosting umożliwia szybkie i bezpieczne publikowanie treści statycznych, dynamicznych, aplikacji internetowych oraz mikrousług. Szybkość działania osiągnięta została dzięki przechowywaniu danych na szybkich dyskach SSD oraz wykorzystaniu sieci CDN. Bezpieczeństwo zapewnia wbudowany protokół SSL.

Główną zaletą tej usługi jest prostota konfiguracji. Programista nie musi przechodzić przez konfigurację Apache czy Nginx. Wystarczy, iż prześle na serwer utworzoną aplikację, a ona od razu zacznie działać. Domyślnie każdy projekt posiada dwie domeny:

• projekt_id.web.app
• projekt_id.firebaseapp.com

Poza tym mamy możliwość podłączenia wielu własnych domen. Przedstawię proces dodania domeny w dalszej części tego wpisu. Własne domeny także korzystają z bezpiecznego połączenia wbudowanego w usługę hostignową, które jest zapewniana przez Let’s Encrypt.

Firebase udostępnia narzędzie terminalowe – Firebase CLI, ułatwiające pracę z projektami. Przygotowane narzędzie przez twórców platformy pozwala jednym poleceniem przesłać wszystkie dane potrzebne do wyświetlenia strony. Dużą zaletą jest możliwość szybkiego cofnięcia wprowadzonych zmian na serwerze. Firebase CLI wspiera pełną kontrolę wersji, niejednokrotnie ułatwiając życie w krytycznych chwilach.

Firebase Hosting umożliwia dodawanie wielu witryn do projektu. Wykorzystywane jest to w przypadku, kiedy chcemy utworzyć powiązane ze sobą strony, np. blog, aplikacja i strona główna prezentująca aplikację. W przypadku posiadania wielu stron w jednym projekcie każda posiada:

• własną kolekcję treści,
• własną konfigurację hostingu,
• wspólne zasoby Firebase, np. dostęp do plików z Cloud Storage, danych z Cloud Firestore.

Instalacja i konfiguracja Firebase CLI

Pierwszym krokiem jaki musimy zrobić jest zainstalowanie Firebase CLI, za pomocą którego będziemy mogli zainicjalizować projekt oraz przesłać pliki z urządzenia lokalnego na serwer. Instalacje można wykonać na kilka sposobów w zależności od posiadanego systemu operacyjnego. W tym wpisie przedstawię instalację dzięki npm, ponieważ jest to uniwersalna metoda, dostępna na każdym z systemów.

Instalujemy globalnie firebase-tools dzięki polecenia

npm install -g firebase-tools

Po poprawnej instalacji musimy się zalogować na nasze konto Google, na którym mamy utworzony projekt. Robimy to dzięki komendy

firebase login

A następnie podajemy dane niezbędne do zalogowania.

W celu weryfikacji logowania możemy wyświetlić listę wszystkich posiadanych projektów dzięki polecenia

firebase list

Wdrożenie

Mając już skonfigurowane narzędzie Firebase CLI, możemy teraz przystąpić do inicjalizacji projektu Firebase. W katalogu w którym znajduje się nasz projekt wywołujemy polecenie

firebase init

Na początku wybieramy usługę jaką chcemy skonfigurować, w naszym przypadku zaznaczamy dzięki spacji Hosting, a następnie potwierdzamy wybór dzięki entera.

W kolejnym kroku wybieramy projekt jaki chcemy połączyć z lokalnym projektem.

Następnie podajemy katalog w którym znajduje się zbudowana aplikacja. Domyślnie jest to katalog public. W przypadku kiedy nie istnieje taki katalog, zostanie on utworzony. Zawiera on wszystkie publiczne pliki.

W ostatnie pytanie dotyczy typu wdrażanej aplikacji. o ile jest to aplikacja SPA, wtedy należy zaznaczyć y i wcisnąć enter. o ile w katalogu publicznym nie istnieje plik index.html to zostanie on automatycznie utworzony z domyślną treścią.

Po skonfigurowaniu projektu, przyszedł czas na pierwsze wdrożenie. Pliki przesyłamy dzięki polecenia

firebase deploy

Po prawidłowym przesłaniu danych na serwer. Możemy zobaczyć naszą aplikację pod adresem:

* projectID.web.app

* projectID.firebaseapp.com

Niestandardowa domena

Aby dodać własną domenę, należy przejść do panelu zarządzania projektem, wybieramy Hosting, a następnie Podłącz domenę.

W pierwszym kroku podajemy nazwę domeny jaką chcemy dodać do naszego projektu.

Następnie należy dodać rekord DNS typu text z podaną wartością.

W przypadku az.pl dodanie tego rekordu wygląda w sposób zaprezentowany na poniższym obrazku.

Weryfikacja własności może potrwać choćby do 24h, jest to zależne od propagacji DNSów. W tym czasie można zamknąć okno z konfiguracją i wrócić do niej za jakiś czas (wymaga ponowne przejście przez pierwszy krok).

Po zweryfikowaniu tożsamości należy dodać jeszcze dwa rekordy typy A. Poniżej znajduje się zrzut ekranu z ostatniego kroku w Firebase.

Poniżej znajduje się screen z az.pl, gdzie można zobaczyć jak poprawnie powinny zostać dodane rekordy DNS.

Czas po jakim pojawi się nasza aplikacja pod dodaną domeną, również jest zależna od propagacji DNSów i może potrwać do 24 godzin.

Poniżej znajduje się screen przedstawiający domyślnie utworzony plik index.html przesłany na serwer, który można zobaczyć pod adresem http://kurs-firebase.pl

Podsumowanie

Jak mogliśmy zobaczyć opublikowanie strony statycznej lub dynamicznej dzięki Firebase Hosting jest bardzo proste. Nie wymaga dużej wiedzy technicznej związanej z konfiguracją serwera czy podpisaniem certyfikatu SSL. Dodanie własnej domeny sprowadza się do wprowadzenia trzech rekordów DNS. Firebase Hosting zachęca do korzystania dzięki swojej prostocie obsługi, szybkości działania oraz bezpieczeństwu zapewnionemu przez wbudowany certyfikat SSL.

Przydatne linki

Instalacja Firebase CLI

Wdrożenie projektu

Dodawanie własnych domen