Ten wpis jest jednym z trzech, w których skupię się na opisie deployowania aplikacji na Heroku, GitHub Pages oraz Firebase. Czemu akurat te serwisy? Przetestowałem każdą z usług i moim zdaniem najszybciej oraz w przyjazny dla programisty sposób umożliwiają prezentowanie naszego kodu jako działająca aplikacja.

Nie muszę raczej nikogo namawiać, że warto trzymać swój kod w repozytorium (np. GitHub, Bitbucket), ale jeśli chcesz zaprezentować swoją aplikację światu bądź jesteś w trakcie zmiany pracy, to rekruterzy czasami oprócz kodu chcą zobaczyć jak Twoja aplikacja działa i wygląda. Oczywiście mogą sobie pobrać kod źródłowy na dysk, zainstalować zależności i odpalić, ale… nie wszyscy mają na to czas i nie wszystkim po prostu się chce 🙂

Dlatego jeśli posiadasz aplikację, którą chcesz się pochwalić, to warto pomyśleć o hostingu dla prostych aplikacji. W trakcie szkoleń, które prowadzę bardzo często pada pytanie w jaki sposób mogę szybko pokazać moją aplikację na zewnątrz. Od razu odradzam wgrywanie plików przez FTP, bo to już nie lata ’90 😉 Mając z tyłu głowy Continuous Integration oraz Continuous Delivery powinniśmy skupić się na bardziej przyjaznych rozwiązaniach.

Od czego zacząć?

Na pewno przyda się jakaś aplikacja 🙂 Na potrzeby tego wpisu posłużę się najprostszą aplikacją stworzoną za pomocą CRA, czyli poleceniem:

create-react-app hello
cd hello

Kolejnym krokiem jest założenie konta w heroku oraz instalacja heroku-cli. Niezależnie od systemu operacyjnego najwygodniej wykonać instalację za pomocą npm’a:

npm install -g heroku

Po instalacji musimy się zalogować korzystając z danych, które podawaliśmy w trakcie tworzenia konta w Heroku. Musisz w tym celu uruchomić polecenie:

heroku login

To pozwoli nam na dostęp do naszego konta w Heroku z poziomu terminala oraz zarządzanie naszymi usługami i serwerami.

Tworzymy nową aplikację

Pora na założenie nowej aplikacji, tutaj musimy podać tylko nazwę, właściciela konta oraz region, w którym ma być hostowana (można wybrać Europę lub USA).

Teraz postępujemy zgodnie z krokami na kolejnym ekranie i ważna uwaga – Heroku wykorzystuje system kontroli wersji Git. W swojej architekturze tworzy zdalne repozytorium, na które będziemy mogli wysyłać pliki. Każdy push na zdalną gałązkę automatycznie odpali również proces deploymentu aplikacji.

Wykorzystanie CRA do stworzenia aplikacji spowodowało również założenie lokalnego repozytorium dla naszej aplikacji. Sprawdźmy, czy wszystko jest ok:

git status

Jeśli czegoś nie ma w rejestrze zmian, trzeba stworzyć commita i rzuszamy dalej. Do repozytorium naszej aplikacji dodajemy zdalne repozytorium za pomocą polecenia:

heroku git:remote -a NAZWA_APLIKACJI

To spowoduje, że do naszego projektu zostanie dodany nowy remote, na który będziemy mogli wysyłać kod.

Teraz możesz sprawdzić, jaki jest dokłady adres Twojego zdalnego remote tym poleceniem:

git remote -v

Pora na najciekawszą część, czyli deployment. Wystarczy wypchnać nasze pliki na zdalny remote heroku i gałązkę master:

git push heroku master

Aplikacja jest już dostępna online! Oczywiście w zależności od nazwy aplikacji jaką wybraliście.

• W moim przypadku jest to https://sr-hello-app.herokuapp.com.
• Kod aplikacji znajduje się na GitHub: https://github.com/patrykomiotek/sr-hello-app.

Zalety korzystania z Heroku

• Przyjazne CLI za pomocą którego można wgrać aplikacje, sprawdzić logi i stan aplikacji
• Za darmo dostajesz 500h godzin pracy dyno, czyli mikroinstancji, na której działa aplikacja. Limit można podwoić dwukrotnie jeśli poda się kartę płatniczą do konta. Limit czasu dotyczy faktycznego czasu użycia serwerów w obrębie całego konta, więc liczony jest tylko wtedy, gdy ktoś faktycznie korzysta z Waszej aplikacji.
• Możesz podpiąć swoją domenę za free
• CI/CD – można skonfigurować GitHub, aby po każdym commicie automatycznie startował build na Heroku, a nawet dodać wcześniej Travisa czy CircleCI
• Za Heroku stoi firma Salesforce – gigant jeśli chodzi o wytwarzanie oprogramowania, więc nie musicie się martwić, że nagle usługa przestanie działać i stracicie wszystkie pliki. Poza tym Heroku stoi na AWS, czyli największym dostawcy usług hostingowych na świecie.

Wady korzystania z Heroku

• Minusem rozwiązania darmowego jest to, że Wasze serwery po dłuższym czasie nieaktywności, czyli po 30 minutach, gdy nie ma ruchu w waszych aplikacjach po prostu idą spać 🙂 Tzn. zapadają w bezczynność, więc pierwszy request, który poleci na serwer ma za zadanie wybudzić je z drzemki, co trwa około 20-30 sekund. Po wybudzeniu Wasza aplikacja śmiga już jak szalona. Jeśli takie rozwiązanie Wam nie odpowiada, warto zastanowić się nad płatną wersją.
• Wersja darmowa jest czasem kłopotliwa, gdy macie przynajmniej dwie instancje – jedną na frontend, a drugą z API. Za pierwszym razem możliwe, że nie uda Wam się zalogować do aplikacji frontendowej (bo dyno z API będzie się budziło), ale później już wszystko śmiga aż miło 🙂
• Heroku wymaga podstawowej znajomości Gita, więc jeśli nie czujesz się z tym dobrze, warto sprawdzić inne rozwiązania np. Firebase.

Co dalej?

Oczywiście na Heroku można deployować nie tylko aplikacje Reactowe, a wszystko co napiszecie w JS, Node.js, Pythonie, PHP, Ruby czy Javie. Mam nadzieję, że Heroku przypadnie Ci do gustu. Jeśli nie, to już niedługo pojawią się inne wpisy z opisem deployowania aplikacji do GitHub Pages oraz Firebase. Aby dostać powiadomienie o nowych postach zachęcam do zapisania się na newsletter.

P. S.

Może zauważyłeś(aś), że nie robiliśmy żadnego buildu na lokalnej maszynie? Nie musieliśmy, ponieważ Heroku wykrywa aplikacje postawione za pomocą CRA i sam tworzy build na swojej infrastrukturze. Taka zdolna bestia 🙂

Tutorial wideo

Jeśli wolisz formę wideo, obejrzyj ten film: