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, że 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, dzięki któremu 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ę za pomocą npm, ponieważ jest to uniwersalna metoda, dostępna na każdym z systemów.
Instalujemy globalnie firebase-tools za pomocą polecenia
npm install -g firebase-tools
Po poprawnej instalacji musimy się zalogować na nasze konto Google, na którym mamy utworzony projekt. Robimy to za pomocą 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 za pomocą 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 za pomocą spacji Hosting, a następnie potwierdzamy wybór za pomocą 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. Jeżeli jest to aplikacja SPA, wtedy należy zaznaczyć y i wcisnąć enter. Jeżeli 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 za pomocą 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ć nawet 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 za pomocą 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
