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-toolsPo poprawnej instalacji musimy się zalogować na nasze konto Google, na którym mamy utworzony projekt. Robimy to dzięki komendy
firebase loginA 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 listWdroż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 initNa 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 deployPo 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
