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:
- Utworzenie projektu i pierwszy komponent
- Komponenty i props
- Obsługa zdarzeń
- Stan komponentu i przepływ danych
- Dynamiczne tworzenie komponentów, key i forumlarz
- Hook useEffect
- Zapisywanie danych w chmurze – Firebase
- 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 🙂