Narzędzia JavaScript Full-Stack Web Developera: Build produkcyjny

0:00W tej lekcji załóżmy już, że mamy naszą aplikację skonfigurowaną w sposób, który w

0:05pełni odpowiada na nasze developerskie potrzeby.

0:08Jednocześnie mamy tutaj komfort pracy wynikający z tego, że np.

0:12zmiany odzwierciedlane są natychmiast i

0:14dodatkowo różnego rodzaju narzędzia wspierają nas w pisaniu kodu.

0:19Jednocześnie prędzej czy później nadchodzi

0:21czas, w którym nasza aplikacja musi zostać opublikowana i w takiej sytuacji mamy

0:26potrzebę jej zbudowania, czyli zasadniczo wygenerowania specjalnej wersji

0:30pozbawionej wszelkich developerskich elementów oraz jednocześnie

0:34zoptymalizowanej właśnie pod kątem produkcji.

0:37I teraz w tym kontekście jest przynajmniej

0:39kilka elementów, o które musimy zadbać, a jednocześnie dobra wiadomość polega tutaj na

0:44tym, że w przypadku Vite i polecenia build mamy tutaj w zasadzie

0:48większość elementów, o które może nam chodzić na produkcji.

0:51Czyli tak jak widzisz teraz nasza

0:52aplikacja została zbudowana i wersja dist pojawiła się w naszym katalogu.

0:57Oznacza to, że wszystkie assets są zminifikowane, odpowiednio

1:01zoptymalizowane oraz dodatkowo pojawiły się tutaj zmodyfikowane nazwy plików.

1:05Tutaj muszę szczerze przyznać, że

1:07osobiście spędzałem wiele godzin nad tym, aby doprowadzić do podobnego efektu Webpacka

1:12i wielokrotnie męczyłem się z jego konfiguracją, aby zadbać o wszystkie takie

1:16detale, jak chociażby wspomniane modyfikowanie nazw plików.

1:20Swoją drogą, jeżeli nie wiesz dlaczego tak się dzieje, no to w skrócie chodzi o to,

1:24że większość plików takich jak CSS oraz JavaScript są przechowywane w pamięci

1:28podręcznej przeglądarki i kluczem jest tutaj nazwa tego pliku.

1:32Oznacza to, że jeżeli za każdym razem serwujemy plik indx.js użytkownikowi,

1:36to w ramach domeny naszej aplikacji ten plik właśnie trafia do pamięci podręcznej

1:40i dzięki temu za każdym razem użytkownik nie musi go pobierać.

1:44Jednocześnie w momencie, gdy udostępniamy nową wersję naszej aplikacji, to jego

1:48przeglądarka o tym nie wie i tym samym dochodzi do sytuacji, w której np.

1:52backend różni się od tego, co mamy na froncie

1:55a to generuje problemy, ponieważ niektóre

1:58funkcje przestają działać, a innych po prostu nie ma.

2:01W takiej sytuacji często zdarzane są, że są błędy, których w praktyce nie ma, a i tak

2:05trzeba poświęcić czas na obsłużenie takiego zgłoszenia.

2:08Z tego powodu Vite rozwiązuje ten problem właśnie modyfikując nazwy plików.

2:12Jednocześnie tak jak wspomniałem, mamy tutaj ich zoptymalizowane wersje i to samo

2:16tyczy się obrazków i wszystkich innych dodatkowych assetów.

2:20Dodatkowo nawet takie małe elementy jak

2:22chociażby ten, że w naszych assetach mógłby pojawić się np.

2:26drugi obrazek i w tym przypadku po prostu zduplikujemy sobie ten, który już mamy, a

2:30następnie zaimportujemy go do naszej aplikacji w tym miejscu

2:33no to oczywiście w momencie zbudowania, pojawi on się w katalogu wyjściowym.

2:38Jednocześnie jeżeli już przestaniemy go

2:40wykorzystywać w naszej aplikacji, czyli nie będzie potrzebny, a my ponownie ją

2:44zbudujemy, to zwróć uwagę, że ten obrazek zniknął już w katalogu dist.

2:48Jeżeli wydaje Ci się to oczywiste, to takie właśnie jest

2:51ale jednocześnie w przypadku starszych

2:53narzędzi, takich jak chociażby Gulp, już nie do końca takie było.

2:57Musieliśmy ręcznie zadbać o właśnie takie

2:59detale, jak chociażby czyszczenie katalogu wyjściowego po to, aby nie zawierał on

3:04zbędnych elementów, które pochodziły z wcześniejszych buildów.

3:07I teraz co ciekawe, prawdopodobnie

3:08kojarzysz sam fakt, że nawet takie proste elementy jak zbudowanie skryptu, który

3:13usuwa zawartość wybranego katalogu w tym przypadku dist nie jest takie oczywiste

3:18szczególnie w momencie, gdy mówimy o wielu platformach.

3:21Niemal w każdym projekcie spotykałem się z sytuacjami, w którym skrypt budujący

3:25aplikację działał na Macu czy Linuxie, ale jednocześnie na Windowsie już nie.

3:29W tym celu trzeba było wykorzystać konkretne biblioteki lub też upewnić się,

3:33że wybrany przez nas sposób po prostu dba o zachowanie tej multi platformowości.

3:38W każdym razie to, co próbuję Ci tutaj powiedzieć, to fakt, że nowoczesne

3:42narzędzia, takie jak chociażby Vite dbają o wiele różnych szczegółów, w przypadku

3:47których musieliśmy wcześniej zadbać samodzielnie.

3:50Jest to jeden z najważniejszych elementów,

3:52który wpływa na to, że jeżeli korzystasz ze starszych narzędzi,

3:55no to dobrym pomysłem będzie to, aby sięgnąć po nieco nowszy zestaw.

4:00Oczywiście nie zmienia to faktu, że w niektórych sytuacjach konieczne będzie

4:03dostosowanie sposobu, w jaki jest budowana aplikacja przez Vite.

4:07W związku z tym przejdziemy sobie tutaj znowu przez dokumentację, aczkolwiek

4:11zwrócę uwagę na pewnego rodzaju elementy, które powtarzają się bardzo często.

4:16Pierwszym z nich jest katalog podstawowy

4:18naszej aplikacji. Czyli inaczej mówiąc jest to główny katalog.

4:21Jego ustawienie jest o tyle istotne, że w

4:23niektórych sytuacjach nasza aplikacja może składać się z wielu większych modułów

4:28i takim klasycznym przykładem jest podział na panel administracyjny, bądź też w ogóle

4:32moduł administracyjny oraz moduł dedykowany samemu użytkownikowi końcowemu.

4:37W takiej sytuacji potrzebne jest albo

4:38zbudowanie dwóch oddzielnych aplikacji, albo zdefiniowanie dwóch plików

4:42wejściowych, o czym za chwilę sobie jeszcze powiemy.

4:45W każdym razie w takiej sytuacji musimy

4:47odpowiednio ustawić ten base URL, który oczywiście tak jak tutaj pokazaliśmy, może

4:51zależeć też od aktualnego środowiska, w jakim uruchamiana jest nasza aplikacja.

4:56Kolejnym elementem są już również mocno specyficzne ustawienia dla

5:00konkretnej aplikacji i mowa tutaj właśnie

5:02o procesie jej budowania oraz chociażby optymalizacji

5:05ponieważ w przypadku większości aplikacji domyślne ustawienia jak najbardziej będą

5:09wystarczające, ale w momencie, gdy jej objętość będzie rosła, to niewykluczone,

5:14że będzie konieczność sięgnięcia po bardziej zaawansowany Chunking Strategy

5:18czyli zasadniczo podział naszej aplikacji

5:20na części, dzięki czemu klient nie będzie musiał od razu ładować całej aplikacji, w

5:25tym również modułów oraz komponentów, z których niekoniecznie będzie korzystać.

5:29No i tutaj poniżej mamy jeszcze ustawienia dotyczące obserwowania zmian w naszym

5:33projekcie i również uruchamiania w tym przypadku całego procesu buildu

5:37i coś takiego może przydać Ci się w niektórych sytuacjach, w których

5:41faktycznie chcesz podglądać katalog wyjściowy, bądź też po prostu od razu

5:44przeładować aplikację w momencie, gdy zmienią się jakieś pliki.

5:48W każdym razie myślę, że najważniejsze

5:49jest po prostu to, aby wiedzieć, że taka możliwość istnieje.

5:53I tutaj mamy wspomniany przed chwilą

5:54przeze mnie motyw dzielenia naszej aplikacji na różne części, które

5:58zasadniczo się od siebie różnią i różnią się do tego stopnia, że mają różne pliki

6:03wejściowe i dokładnie tak jak tutaj jest w dokumentacji opisane

6:06w trybie deweloperskim będzie działać to

6:08bez problemu, a w trybie produkcyjnym zacznie nam działać tylko wtedy, jeżeli

6:12precyzyjnie określimy pliki wejściowe do poszczególnych części.

6:16I tutaj poniżej są jeszcze bardziej

6:18zaawansowane opcje, z których ja osobiście nigdy nie korzystałem, ponieważ raczej nie

6:22zdarzało mi się budować bibliotek i wydaje mi się, że ta wiedza jest dość

6:26specyficzna, aby w tej chwili się jej przyglądać.

6:28Tak czy inaczej wróćmy jeszcze do IDE,

6:31ponieważ chciałbym zwrócić uwagę na pewną rzecz.

6:34Mianowicie, tak jak zapewne wiesz, w momencie gdy wysyłasz swoją aplikację do

6:37repozytorium, to zawsze ignorowane są tutaj pewne pliki.

6:41Jednym z nich jest node-modules, ale również dist.

6:44A to oznacza, że do samego repozytorium nie wysyłasz w ogóle tego katalogu.

6:49Wspominam o tym, ponieważ jest to jeden z

6:51częściej popełnianych błędów jaki widzę w momencie, gdy pracuję z jakimiś

6:55zewnętrznymi aplikacjami, gdzie developerzy umieszczają ten katalog

6:59właśnie w repozytorium i próbują opublikować go na serwerze.

7:02Coś takiego zasadniczo nie ma sensu, chociażby z tego powodu, że możemy mieć

7:06potrzebę wykorzystania tutaj różnych zmiennych środowiskowych, które w

7:10przypadku produkcji po prostu będą się różnić.

7:12Dodatkowo przechowywanie też takiego

7:14buildu aplikacji w przypadku repozytorium utrudnia pracę z nim ze względu na to, że

7:19załóżmy, że usuniemy sobie teraz ten katalog, a

7:21następnie zainicjalizujemy tutaj repozytorium Gita, a następnie dodamy wszystkie pliki i

7:26zobaczymy sobie diff przechowywany w pamięci podręcznej.

7:30Okazuje się, że poza tutaj oczywiście tymi początkowymi zmianami,

7:34mamy tutaj pełno śmieci, które musimy przeglądać za każdym razem, ponieważ będą

7:38się zmieniać za każdym razem w momencie, gdy np.

7:40robimy Code Review. Coś takiego

7:42moim zdaniem nie ma uzasadnienia i powinno

7:45zostać wyeliminowane już na etapie developmentu.

7:48No i teraz skoro nie będziemy wysyłać tego

7:50katalogu do repozytorium, to pytanie jak on znajdzie się na serwerze?

7:54Otóż tak samo jak przed chwilą po prostu zostanie wygenerowany poleceniem bądź też

7:58skryptem odpowiedzialnym za budowanie naszej aplikacji.

8:01Co więcej, takie budowanie odbywa się zwykle z pomocą narzędzi takich jak

8:05GitHub Actions, a to oznacza, że cały ten proces wykonywany jest automatycznie.

8:11Oczywiście to w jaki sposób konkretnie to

8:13konfigurować i wykorzystywać w praktyce będziemy omawiać sobie jeszcze później

8:17natomiast teraz tylko chciałbym raz jeszcze zwrócić uwagę na to, aby po

8:21pierwsze dostosować to, w jaki sposób budowana jest nasza aplikacja na potrzeby

8:25produkcyjne i aby wykorzystywać tutaj możliwie najnowsze narzędzia, które

8:29rozwiązują wiele różnych problemów, a dodatkowo też absolutnie tej zbudowanej

8:34wersji nie dodawać do naszego repozytorium i budować aplikację bezpośrednio na

8:38serwerze produkcyjnym w procesie deploymentu, który powinien zostać zautomatyzowany.

8:43Tymczasem jeżeli chodzi o sam ten element

8:45budowania aplikacji, na ten moment byłoby to na tyle same praktyczne elementy

8:50będziemy uwzględniać sobie jeszcze w kolejnych lekcjach przy okazji

8:53konfigurowania naszego serwera produkcyjnego.

8:56Tymczasem dzięki za uwagę i do usłyszenia w kolejnej lekcji.