Deploy aplikacji w 5 minut z Firebase Hosting

Aleksander Patschek

Czas czytania: 2 min
Liczba słów: 477
Data: 15-02-2021
Udostępnij:

Firebase jest platformą Google'a, która daje narzędzia do budowania aplikacji internetowych. Narzędzi jest sporo i pozwalają na zbudowanie zaawansowanych aplikacji bez konieczności pisania backendu. Jednym z narzędzi jest Firebase Hosting. Można to wykorzytać do hostowania naszej aplikacji.

Co będę hostować?

Nie będzie to żadne rocket science. Pokażę ci jak wypuścić na hosting podstawową aplikację stworzoną w React. Proces będzie wyglądać identycznie dla każdej aplikacji frontendowej, którą budujemy do postaci statycznych plików. Jeśli pracujesz nad swoją aplikacją, to możesz ją wykorzystać. A jeśli nie masz żadnej aplikacji (albo boisz się wykorzystać aktualną) to spróbuj na czystym projekcie.

npx create-react-app firebase-hosting-demo
cd ./firebase-hosting-demo
npm i
npm build

W tym momencie w folderze build są wszystkie pliki gotowe do wyhostowania.

Koszty hostingu na Firebase

Zanim przejdę do tego, jak wykorzystać Firebase jako hostingu trochę o kosztach. Do zabawy/prototypowania nadaje się idealnie. Jak wyglądają darmowe limity dla hostingu?

✅ Pojemność 10GB
✅ Transfer danych 360MB na dzień

Jeśli to jest za mało to można przejść na płatny plan. Płacimy wtedy za wykorzystane zasoby:

✅ Pojemność $0.026/GB
✅ Transfer danych $0.15/GB

Jak widać, nie jest to drogie. Koszty dla małych aplikacji będą zerowe lub bliskie zeru. A większe aplikacje powinny spokojnie zarobić na siebie.

Firebase hosting krok po kroku

Firebase znajdziesz tutaj https://firebase.google.com/. Jest to usługa Google'a więc logowanie odbywa się za pomocą konta Google'a.

zdjęcie konsoli firebase

Możesz tutaj stworzyć nowy projekt. Kreator jest prosty, więc nie pokazuję tutaj co robić - dasz radę samemu ;). Możesz pominąć na razie opcję z Google Analytics - zawsze można to włączyć potem w panelu. Po utworzeniu projektu zobaczysz panel projektu.

panel projektu w firebase

Nas dzisiaj interesuje zakładka Tworzenie i opcja Hosting. Teraz możemy przejść do konsoli. Pierwsza rzecz do zrobienia to zainstalowanie Firebase CLI. Z wykorzystaniem tego narzędzia można wiele rzeczy skonfigurować i ustawić.

npm install -g firebase-tools

Teraz wystarczy skorzystać z tego narzędzia. Pierwsza rzecz to zalogowanie się na nasze konto google'owe, dzięki czemu mamy dostęp do naszych projektów w firebase.

firebase login

firebase login

Teraz zostaje inicjalizacja projektu. Mamy oczywiście do tego komendę:

firebase init

Polecenie to tworzy plik konfiguracyjny, który będzie wykorzystywany podczas innych poleceń. Moglibyśmy to oczywiście stworzyć ręcznie, ale polecenie zrobi to za nas szybciej i lepiej.

wynik polecenia firebase init

W trakcie procesu dostajemy serię pytań, która pozwala na dostosowanie ustawień pod konkretne wymagania. Jak wygląda teraz taki przykładowy plik konfiguracyjny?

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Mamy to, co najważniejsze, czyli nazwę folderu gdzie są zbudowane pliki i jakie pliki ignorować. No i sekcja rewrites jest bardzo ważna. W przypadku aplikacji SPA mamy tylko jeden plik HTML i cała reszta jest sterowana przez JS'a. Jeśli nie damy przekierowania z dowolnej strony do pliku index.html, to po odświeżeniu strony nic nam się nie załaduje.

Na sam koniec wystarczy jedna komenda by wszystko działało:

firebase deploy

wynik polecenia firebase deploy

Adres aplikacji znajdziecie w zakładce Hosting w panelu projektu w Firebase. Będą tam dostępne dwie domyślne domeny i opcja, by dodać własną. I tyle. Zajmuje to 5 minut, a aplikacja stoi i jest gotowa na kolejne prace.

Jeśli podobał ci się ten artykuł to dołącz do newslettera. Dostaniesz dodatkowe treści do każdego postu oraz eksluzywne materiały, które pomogą ci pisac lepszy kod Chcę uzyskać dostęp do bonusów