Next.js 13 w Praktyce: Deployment aplikacji i przetestowanie produkcyjne

0:01Zanim jednak przejdziemy do budowania

0:03marketing layout chciałbym tutaj zakończyć dwoma rzeczami.

0:06Otóż pierwsza rzecz to nie podoba mi się

0:08to, że te formularze czy to rejestracji nowego użytkownika, czy do zapisu

0:15zalogowania się są tutaj w lewym górnym rogu.

0:17Załóżmy sprawdźmy jak możemy sobie z tym poradzić.

0:21I tutaj też dostajemy jakiś side nav, którego tak naprawdę nie chcemy dostawać.

0:26Jest to spowodowane tym, że mamy layout,

0:29który tak naprawdę jest odpowiedzialny za całą naszą aplikację.

0:35Co tak naprawdę nie powinno być miejsca, bo my w całej naszej aplikacji

0:40chcemy mieć tylko i wyłącznie tak naprawdę dwie grupy.

0:44Mamy App, która będzie miała swój.

0:47To jest layout odpowiedzialny, za który mamy tutaj.

0:52I edytujemy sobie wszystkie importy.

0:54Sprawdźmy teraz na naszą stronę. Zobaczymy.

0:58Mamy jakiś error failure directory.

1:01Jest to spowodowane tym po prostu, że nasz Saint nie ma żadnego layoutu.

1:05Teraz musimy się tym zająć.

1:06Przejdźmy do naszego outfitu.

1:09Też potrzebujemy sobie stworzyć layout.

1:13W naszym przypadku layout będzie bardzo prosty.

1:16Chcemy tak naprawdę tylko wyśrodkować

1:19wszystkie dzieci, czyli Flex wysokość naszego rapera.

1:23Chcemy, żeby był screen, szerokość też.

1:26Chcemy wyśrodkować sobie wszystko co jest w środku.

1:29Tak naprawdę teraz, kiedy odświeżamy

1:32nasz kod, już mamy nasz formularz zapisu na środku naszej strony.

1:35Jeżeli chodzi o zakładanie konta też wygląda to dużo lepiej.

1:39Myślę, że pomożemy.

1:41Jeżeli chodzi o logikę po naszej stronie

1:43developerskiej możemy to uznać za wystarczające.

1:46Na tę chwilę zakończymy to wszystko,

1:50dodamy sobie wszystkie zmiany za kombinujemy.

1:54Minusem et plus end layout.

2:02I wybudujemy sobie to obręcze.

2:07I teraz musimy zadbać o to, żeby to wszystko zadziałało również na produkcji.

2:12Bo jeżeli przejdziemy teraz na naszego Gita, gdzie mamy nasze repozytorium

2:18z Pocket SAP, to czy chcąc stworzyć tutaj pull request będziemy musieli sobie

2:25przetestować ten sam flow na produkcji na produkcji?

2:27Oczywiście mamy inny adres URL, do tego też pewnie nie.

2:32Nie chcemy zrobić od razu do maina, a chcemy zrobić nowy pull

2:37request najpierw z obręczami Clark Out do Develop a.

2:45Sprawdzimy tutaj deployment Asphalt.

2:48Jest to jak najbardziej zrozumiały.

2:51Natomiast możemy sobie dalej zrobić config.

2:55I kolejna rzecz, którą będziemy

2:57potrzebować to na pewno zrobić sobie questa z.

3:04Developer do maina Developer Deployment.

3:08Sweet mamy z tego względu, że mamy nowe

3:10zmienne środowiskowe, których jeszcze nie dostarczyliśmy na Wersalu.

3:14Mamy te zmienne środowiskowe tak naprawdę

3:16tylko i wyłącznie po stronie naszej, po stronie lokalnej.

3:19Natomiast żeby wszystko fajnie

3:21funkcjonowało też na Wersalu, to musimy też te zmienne środowiskowe dodać na.

3:27Dlatego teraz sobie przejdziemy na wersje

3:30na stronę naszego projektu Pocket SAP i tutaj prawdopodobnie mamy

3:35deweloperów, to mamy nie zakończone sukcesem.

3:40Sprawdźmy czy dostajemy jakieś logi.

3:45Mamy tutaj więc Primy, autorzy fikcji prima generate.

3:53Musimy troszeczkę zmodyfikować nasz build build skrypt w naszej aplikacji.

4:00Przejdźmy do pkt.

4:01Jackson i tutaj jeżeli chodzi o Bielsko musimy najpierw wywołać Prisma Generate.

4:08Najpierw wygenerował się klient, a potem żeby wystartował nasz build.

4:13Teraz już sobie możemy to wysłać.

4:15Znowu git status, bo my taki commit.

4:22Git, push, pull klekot.

4:26Jeszcze raz sobie zrobimy pull request.

4:29Przejdźmy teraz do git huba.

4:31Znowu tu jeżeli chodzi o pull request.

4:34Nowy pull request znowu naszego Branch to developer.

4:40Pull request.

4:42Zmarnujemy tego pół roku i jak już ten pull request zostaje zmarnowany, możemy

4:47zrobić nowego pull request z develop maina czy pull request.

4:52To już jest nasza wersja produkcyjna.

4:54Skąd?

4:55Sprawdźmy, jak wygląda teraz build na naszym najnowszym.

4:58Jak wygląda nasz PIT na nowe osoby?

5:02Pierwszy przeszedł wszystko fajnie, drugi też prawdopodobnie przejdzie, trzeci też.

5:06Natomiast jest jeden problem

5:08to w naszych opcjach jeżeli chodzi o environment variable mamy tylko database.

5:12Jeżeli natomiast spojrzymy, potrzebujemy dużo więcej.

5:15Także teraz przejdźmy do naszego pliku doc.

5:20I kopiujemy te wszystkie Environment Variable mamy tutaj.

5:24Wklejamy je tutaj.

5:26Usuniemy jeszcze ten poprzedni co mieliśmy.

5:31I kopiuj wklej.

5:32Wszystkie Payment Variable zostały spopularyzowane i dajemy save.

5:38Zapisujemy 2 element Variable już w tym momencie.

5:41Jeśli deployment na produkcji się zakończy, odwiedzimy naszą stronę,

5:46sprawdzimy cały flow autentykacji czy rzeczywiście działa nam na produkcji.

5:50Natomiast pierwsza rzecz, którą sobie

5:52zrobimy to na pewno musimy zmodyfikować nasz web albo dodać nowych łebków.

5:58No tego będziemy potrzebować.

6:00Na naszym developer także dodajemy nowy endpoint i tutaj w tym nowym porcie

6:06wykorzystamy podobny adres, który mamy tutaj.

6:09Natomiast w naszym przypadku tylko ta

6:11końcówka nas interesuje, bo na nowym kroku jako pierwszy adres URL

6:17będziemy mieli adres naszego naszego serwera na na Wersalu.

6:23Także tutaj musimy sobie dodać nowy endpoint z adresem serwera.

6:27Ta wersja, czyli jeżeli poczekamy

6:30za chwilkę się zakończy, przejdziemy do tej aplikacji i zobaczymy adres URL,

6:35który potrzebujemy już możemy sobie tutaj do poradzie dodać nowy endpoint.

6:40Ja sobie dodam tą końcówkę póki co tutaj w środek będziemy musieli wkleić

6:44adres naszej aplikacji i produkcyjnej, czyli zobaczmy sobie projekt.

6:48To jest produkcyjny adres naszej

6:50aplikacji, czyli to jest to co potrzebujemy tak naprawdę.

6:54Przejdźmy do Dashboard i zapiszemy tą opcję tutaj.

7:00I tak samo interesuje nas user created

7:03updated tak jak to w przypadku środowiska deweloperskiego zrobimy.

7:08Mamy tutaj już wszystko zrobione, adres poprawny.

7:11Zróbmy sobie teraz client, natomiast

7:12sprawdźmy czy mamy jeszcze type na naszym naszym serwerze.

7:17Żeby sprawdzić problemy, które mamy tutaj

7:19na warstwie to możemy skorzystać z pliku logs log z końcówka.

7:25W tym momencie dostajemy feedback.

7:26Sprawdźmy co tutaj chodzi.

7:30Mamy Missing Killers, skrót Kill Rapid i

7:34mamy Missing King na tle, a także sprawdźmy jeszcze raz, czy rzeczywiście

7:39nasza aplikacja ma wszystkie klucze potrzebne.

7:42Natomiast zanim to zrobimy,

7:44skorzystajmy z tego adresu, to kończmy konfigurację,

7:47bo z niego też dostaniemy zwykłe próbki, które będziemy wykorzystać na produkcji.

7:52Tutaj jeżeli chodzi o adres wszystko jest w porządku.

7:56Zróbmy sobie create.

7:57I mamy nasz nowy sekret, który będzie potrzebny na naszym środowisku.

8:03Weźmy sobie znowu Pocket SAP jeżeli chodzi o Settings.

8:09Mamy tu nasze zmienne środowiskowe i musimy zmodyfikować.

8:15Web Foxy, Web Hub Secret chcemy zrobić EDIT tutaj jeżeli chodzi o wartość musimy

8:20wkleić wartość nowego by zapisać to już w tym momencie powinno być wszystko ok.

8:27Mamy wszystkie sekrety, możemy spróbować sobie read.

8:30Planować naszą aplikację, czyli zróbmy

8:32sobie deployment projekt i zróbmy sobie read deploy.

8:41Sprawdźmy teraz, czy nasza aplikacja zostanie poprawnie zbudowana na produkcji.

8:45Tym razem nasza aplikacja została

8:47opracowana poprawnie, czyli możemy odwiedzić już pod naszym adresem.

8:51Aplikacja już tutaj chodzi pod adresem Wersja.

8:54Jeżeli wszystkie zmienne środowiskowe mamy wpisane poprawnie, no to teraz jeżeli

8:59sobie przejdziemy do naszych userów, spróbujemy.

9:03Najpierw spróbujemy się zalogować tym samym userem, którego mamy, czyli

9:06przejdźmy do naszej aplikacji produkcyjnej.

9:10Przejdźmy na stronę.

9:12Sign in powinno odpowiedź na okienko do logowania mamy okienko do logowania.

9:17Zaloguj się użytkownikiem, którego już mamy.

9:20I tutaj wpiszmy hasło Powinniśmy móc się zalogować.

9:23Tak, jesteśmy na dashboard.

9:24Wszystko funkcjonuje dobrze.

9:26Teraz usuniemy tą sesję.

9:29Wystarczy.

9:30Musimy się od nowa oczywiście zalogować.

9:32Natomiast my chcemy zrobić coś innego.

9:34My chcemy sprawdzić logikę związaną z Sena page.

9:38Czyli przejdźmy do naszego adresu sign up.

9:43To jest miejsce, gdzie możemy tworzyć nowego użytkownika.

9:45Najpierw usuniemy tego użytkownika.

9:47Tutaj użytkownik już nie istnieje.

9:50Usuniemy sobie tak samo naszego

9:52użytkownika z naszej bazy danych, czyli localhost 5.5 5.

9:56To jest nasze studio, które cały czas chodzi.

9:58Usuniemy tego użytkownika z naszej bazy danych.

10:01I teraz oczywiście, że możemy zapiąć kolejnych.

10:05Jeżeli usuniemy użytkownika

10:07to usuwamy go też tutaj nie byłoby to dobre rozwiązanie.

10:10Natomiast my chcemy sprawdzić, czy flow

10:12rejestracji użytkownika działa poprawnie w środowisku już produkcyjnym.

10:17To co mamy tutaj to jest adres środowiska produkcyjnego deploy owania.

10:21Nasza aplikacja.

10:23Username tak jak poprzednio e-mail i hasło.

10:28Spróbujemy znowu zarejestrować nowego użytkownika.

10:32Teraz musimy sobie przekopiować kod weryfikacyjny.

10:35Póki co kod weryfikacyjny przyszedł do nas na maila.

10:38Czyli ta logika tutaj działa na produkcji dobrze.

10:41Zobaczmy, czy rzeczywiście logika rejestracji nowego użytkownika działa.

10:45Jesteśmy na Burdzie

10:47i w tym momencie powinien nam pojawić się nowy użytkownik naszej bazy danych.

10:50Tak wszystko działa.

10:51Zarówno logika tworzenia użytkowników i na

10:54tym dokumencie, i na produkcji jest w porządku.

10:57Także możemy sobie

10:58zamknąć ten temat i przejść do budowania kolejnych części, czyli marketing layoutu.