Gatsby.js: Deployment strony opartej o Gatsby

2.19.12+

0:00Cześć większość kursu już za nami stworzyliśmy w tym kursie

0:04dwie podstrony z czego jedna była naprawdę zaawansowana bo był to mechanizm

0:08bloga więc większość czasu poświęciliśmy faktycznie na to

0:12to żeby to opanować inne z podstron zachęcam cię do wykonania samodzielnie

0:17galerię prawdopodobnie masz już ogarnięta to by było twoje zadanie domowe natomiast

0:21strona about jest naprawdę świetnym ćwiczeniem do przetestowania sobie

0:25możliwości datocms podpowiem ci tylko podobnie jak zrobiłem zresztą z galerią

0:29że masz tutaj coś takiego jak model który jest single instance jest

0:35to świetna metoda na tworzenie takich podstron które

0:39są jednorazowe na naszych stronach bo często właśnie cms nie przewidują

0:43tego typu modelu gdzie mamy na przykład stronę about która nie musi

0:47mieć większej liczby instancji niż tę jedną która jest po prostu stroną

0:51about więc jeśli sobie stworzysz tutaj about po prostu to możesz

0:55zawrzeć w tym modelu to co musi się znajdować

1:00na stronie about strona sama w sobie jest całkiem prosta masz tutaj idealne

1:05po prostu pole do popisu żeby przetestować sobie gatsby image tytuły

1:09paragrafy i jakieś tam dodatkowe stylowanie a teraz przyszła

1:13już pora na zbudowanie naszego projektu i przygotowanie go do wyleployowania

1:17na produkcję więc najpierw pokażę ci to jak wygląda zbudowana lokalnie

1:22strona co tam się znajduje w ogóle i co możemy z tym zrobić przejdźmy sobie

1:26teraz do kodu jestem na branchu 07 zauważ że w

1:30moim folderze nie ma w ogóle public ani cache czyli mamy tutaj taką czystą

1:35instalkę jak to się mówi wszystko przed nami pamiętaj żeby mieć plik and

1:40gdzie będziesz mieć api datocms czyli token do twojego

1:44cms to jest twój token pamiętaj musisz go sam skopiować i

1:49teraz jedyne co nam pozostaje ponieważ wszystko inne już jest przygotowane to

1:53po prostu wykonać komendę gatsby build to może chwilę potrwać okej

1:58jak już będziemy mieć wszystko zbudowane to pojawi się oczywiście folder public w

2:02którym będziemy mieć całą naszą paczkę i teraz jest

2:07kilka strategii jakby deployowania tej strony ale o tym też za chwilę na

2:11razie chcę ci pokazać jak możemy podejrzeć efekty tego co znalazło się w folderze public

2:16i to na to też są oczywiście dwa sposoby przynajmniej ja znam dwa

2:20jeden z nich jest stworzony przez gatsby po prostu nazywa się serve więc

2:25jeśli teraz odpalimy npm run serve to na porcie 9000

2:29na localhoscie będziemy mieć naszą stronę ale ta metoda została wprowadzona dość

2:34niedawno więc chcę ci pokazać jeszcze taką bardziej uniwersalną metodę która nie jest uzależniona

2:38od gatsbiego i którą wykorzystuje bardzo często też w jakiś tam innych

2:42projektach które niekoniecznie wykorzystują gatsby więc może ci się akurat to spodoba czyli

2:46jak odpalić taki serwer lokalny z jakimiś tam plikami które mamy

2:50w danym folderze na przykład w folderze public wystarczy że wpiszesz npx

2:55serve bez r na końcu serve public

3:00czyli nazwa tego folderu który chcesz odpalić i teraz

3:04na localhost 5000 na porcie 5000 mamy

3:08dokładnie to samo co przy użyciu gatsby serve tylko no to jest taka bardziej niezależna

3:13metoda więc wszystko działa jak należy nasze

3:18obrazki ładują się błyskawicznie oczywiście dlatego że

3:22to jest localhost w każdym razie nasza strona działa tak

3:26jak należy i teraz wracając do tego

3:30co możemy zrobić z tym public generalnie możemy zrobić na przykład coś takiego

3:34że odpalamy sobie klienta ftp i wrzucamy po prostu

3:38zawartość tego public na ftp czyli tak jak się wrzucało

3:42kiedyś strony do tej pory się wrzuca tylko jakieś tam powiedzmy prostsze które nie

3:46mają jeszcze tak zwanego continous integration czyli nie deployują

3:50się automatycznie wtedy jeśli chcesz po prostu wrzucić gdzieś swoją stronkę

3:54gatsby to wystarczy ci najprostszy na świecie serwer pamiętaj że to jest taka zwykła strona

3:59oparta o html css i js tutaj nie ma żadnej magii dodatkowej

4:03nie musisz mieć żadnych dodatkowych specjalnych serwerów po prostu wrzucasz to co

4:07znajduje się w public na ftp i to działa ale

4:13jeśli chcesz trochę bardziej wysublimowany sposób to możesz też skorzystać z netlify i ja

4:17oczywiście rekomenduje ten sposób tych narzędzi do deploymentu też

4:21jest naprawdę sporo mamy netlify circle ci buddy works jest tego

4:25kilka netlify wybrałem dlatego że jest naprawdę bardzo proste w użyciu a

4:31dodatkowo ma też hosting więc po prostu wyklikamy sobie

4:35to w mgnieniu oka jeśli już się zalogujesz a zalogować

4:39się możesz nawet swoim githubem więc to powinno trwać naprawdę sekundkę to

4:44wybieramy sobie new site wybieramy skąd będzie ta strona

4:48ciągnięta jakby skąd ją chcemy wziąć ja ją mam na githubie

4:53możliwe że netlify zapyta cię teraz o autoryzację

4:57na github i ja mam tutaj repozytorium tego kursu prywatnie na

5:01razie u siebie gatsby eduweb kurs deployment pójdzie

5:06z brancha 7 i teraz build command w naszym przypadku

5:10to będzie po prostu build a publish directory to będzie

5:14public i obawiam się że ten build mi padnie z tego

5:18względu że ja mam zagnieżdżoną strukturę folderów w moim repo czyli

5:22mamy 07 hatta website i dopiero mam projekt więc

5:27mam wrażenie że muszę tutaj dodać jeszcze jedną rzecz czyli

5:31base directory tutaj będziemy mieć 07 hatta

5:35website i

5:40wtedy mamy jeszcze zerknijmy sobie na kod 07

5:44hatta website public powinno być okej overview

5:49robimy deployment jeszcze raz to jest naprawdę lepsze

5:54niż jakby się oglądało jak się woda gotuje podobno jak się patrzy to się nie wydeployuje planuję

5:59zaraz zobaczymy i nasz deployment upada po raz drugi

6:04ale jeszcze wrócimy sobie na chwilkę tutaj bo

6:09zapomnieliśmy o jednej bardzo ważnej rzeczy o zmiennych

6:13środowiskowych które mamy na local a nie mamy na netlify więc

6:17skąd netlify może wiedzieć jaki my mamy klucz do naszego api te

6:25dane są tutaj bezpieczne także nie ma się co martwić build

6:29command npm run build zmieńmy

6:34sobie wydaje wtedy to powinno być poprawne że

6:39sam build to nie była poprawna forma tego no i co do

6:43trzech razy sztuka clear cache and deploy site zobaczymy czy

6:47tym razem pyknie i już widzimy że mamy tutaj komendy podobne

6:51jak z naszego local więc wszystko wskazuje na to że

6:55tym razem nawet datocms się zaczytał powinno

7:01nam się udać no i pięknie ostatnia

7:06komenda powinna budzić uśmiech na naszych twarzach site is

7:10live mamy tutaj baton preview możemy sobie zobaczyć naszą stronę i

7:15jest wszystko działa działają

7:19nasze artykuły jeśli masz stronę galerię

7:23to możesz się cieszyć także galerią wszystko

7:28działa jak należy więc w ten

7:32prosty sposób wydeployowaliśmy stronę na gatsby na netlify oczywiście

7:37netlify i ma możliwość na przykład spięcia z tego jakąś domeną tutaj masz

7:41ustawienia domeny więc jeśli chcesz to od razu podpiąć pod na przykład jakąś tam swoją

7:45domenę to też możesz to zrobić generalnie ustawień

7:49jest tutaj mnóstwo netlify jest naprawdę jednym z lepszych serwisów i wcale nie jest drogi

7:53i nawet jeśli się korzysta z jakiś tam płatnych rzeczy oczywiście mnóstwo tych rzeczy

7:57jest tutaj dostępnych za darmo więc nie przejmuj się tym i

8:02tym sposobem dotarliśmy do końca tego kursu a ja zapraszam cię na ostatnią lekcję

8:06która będzie takim przyjemnym podsumowaniem tego co tutaj zrobiliśmy