Wprowadzenie React #8 (2020) – Wdrożenie na Heroku

Ostatnią rzeczą jaką zrobimy w tym cyklu jest wdrożenie naszej aplikacji na zewnętrzny serwer w chmurach, na platformie Heroku.

Pierwszym krokiem jest rejestracja na stronie www.heroku.com oraz zainstalowanie narzędzia Heroku CLI https://devcenter.heroku.com/articles/heroku-cli. Po zakończonej instalacji odpalamy terminal i sprawdzamy czy wszystko działa jak należy. Komenda

heroku --version

powinna zwrócić nam informacje o wersji narzędzia CLI, NodeJS oraz systemu operacyjnego.


Pozostałe części cyklu:

  1. Utworzenie projektu i pierwszy komponent
  2. Komponenty i props
  3. Obsługa zdarzeń
  4. Stan komponentu i przepływ danych
  5. Dynamiczne tworzenie komponentów, key i forumlarz
  6. Hook useEffect
  7. Zapisywanie danych w chmurze – Firebase
  8. Wdrożenie aplikacji na zewnętrznym serwerze – Heroku

Tutorial React w formie wideo dostępny jest na kursy.clockworkjava.pl


Lokalne Repozytorium GIT

Heroku jest o tyle fajnym miejscem na wdrażanie kodu, który jest w trakcie tworzenia bądź testów, że bazuje ono wprost na kodzie źródłowym, jaki wrzucimy na udostępnione nam repozytorium. Nie musimy używać dodatkowych narzędzi CI/CD.

Tworzymy lokalne repozytorium git za pomocą komendy git init, następnie utwórzmy plik .gitignore z następującą treścia

node_modules
dist
.cache

po to by nie dodać przypadkiem niepotrzebnych rzeczy do repozytorium. node_modules to katalog z bibliotekami zewnętrznymi używanymi przez nasz projekt, dist i .cache to foldery stworzone przez parcela.

Kolejnym krokiem jest dodanie za pomocą git add * pozostałych rzeczy do kontroli wersji, a następnie utworznie pierwszego commitu za pomocą git commit -m”Initial commit”. Tekst w cudzysłowiach to krótki opis naszego commita.

Stworzenie projektu

Teraz za pomocą komendy

heroku login

logujemy się do platformy heroku, a kolejna komenda

heroku create

zepnie nasz projekt z heroku. Komenda ta zwróci informacje o adresie URL naszego projektu oraz repozytorium git dla kodu, jaki chcemy wdrożyć. Np.

http://arcane-basin-0321.herokuapp.com
https://git.heroku.com/arcane-basin-0321.git

Repozytorium git zostało automatycznie dodane jako remote dla naszego nowoutowrzonego repozytorium. Jak widzisz adres URL jest dość losowy i raczej nie nadaje się na postawienie na nim produkcyjnej wersji produktu, jednak dla fazy developerskiej jest jak najbardziej ok.

Nie zostało już nic więcej jak wykonac komendę git push –set-upstream heroku master, obserwować jak nasz projekt jest budowany…. i jak failuje 🙂

Niezbędne zmiany w konfiguracji

Heroku, by zbudować nasz projekt i go uruchomić bazuję na skryptach jakie podamy w pliku package.json. Dlatego należy tam dodać następujące wpisy:

"scripts": {
   "start": "parcel ./src/index.html",
   "build": "parcel build ./src/index.html"
}

Jako, że parcela używamy nie tylko do budowania, ale też do uruchomienia aplikacji musimy przenieść dependencję parcel-bundler z sekcji devDependencies do dependencies w package.json.

Finalnie warto określić na jakim NodeJS ma być odpalany nasz projekt, ponownie w package.json dodajemy sekcję:

"engines": {
    "node":"12.16.x"
}

Następnie commitujemy zaktualizowany plik package.json i wypychamy do zewnętrznego repozytorium heroku git add package.json

git commit -m"Config update"

git push heroku master

Teraz możemy odwiedzić adres naszej aplikacji i cieszyć się wdrożoną w chmurach aplikacją zintegrowana z zewnętrzną bazą danych Firestore.

Na tym zakończymy ten cykl 🙂 Dzięki za uwagę, zapraszam ponownie na kursy.clockworkjava.pl, gdzie dostępne są m.in. nagrania z tego cyklu.

Jeśli ten cykl przyniósł Ci wartość proszę podziel się nim w swoich mediach społecznościowych 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *