Nuxt.js: Zmienne środowiskowe

0:00Cześć! W poprzedniej lekcji omówiliśmy strukturę

0:02aplikacji Nexta i w tej lekcji opowiem troszkę o zmiennych środowiskowych.

0:08I faktycznie stworzymy już coś w aplikacji, co będzie miało jakiś sens.

0:14To znaczy zainstalujemy moduł na gotowy

0:17moduł nazywa się Next Basic a w maju i jego zadaniem jest to, aby po

0:24wizycie na naszą stronę internetową właśnie tutaj pokazywał się taki oto

0:29jak się nam załaduje popup z informacjami, w których musimy

0:35wpisać nasze dane logowania, bo inaczej strona w ogóle się nam nie wyświetli.

0:40Więc jest to taka pierwsza pierwsza forma zabezpieczenia naszej

0:44aplikacji przed nieautoryzowanym osobnikami i możemy to

0:50w prosty sposób zaimplementować i do tego będą nam też potrzebne zmienne

0:54środowiskowe, w związku z czym ja sobie skopiuję nazwę tego modułu.

0:58Next Basic ów moduł Możemy go zainstalować poprzez jar bądź przez npm.

1:04Tak jak wspominałem będziemy korzystali tutaj z npm a.

1:09Instal.

1:11Next pack w modzie.

1:14I gdy wrócimy do Czech zobaczymy, że w skonfiguruje się, czyli w tym głównym

1:19pliku, o którym wspominałem, że jest bardzo istotna jeżeli chodzi o pracę z

1:21tekstem, musimy zadeklarować nowo zainstalowany moduł.

1:25Czyli w Property modules będziemy podawali

1:29tablicę modułów, które chcemy zainstalować.

1:32I tutaj właśnie ten moduł.

1:35I to jest konfiguracja tego oto modułu.

1:38W związku z czym jeśli sobie to skopiuję.

1:41I wrócimy do naszego pliku.

1:43Tutaj to się dalej instaluje.

1:49Wejdziemy w nast config hrs i zobaczymy, że tutaj jest już wpisane Marcus.

1:55Ponieważ wybraliśmy sobie Asusa jako moduł, który będzie zainstalowany

1:58domyślnie o to on się tutaj już pojawił, więc ja tylko przeniosę z

2:03z altem oraz strzałki w górę, aby przenieść daną linijkę w dół

2:09lub w górę i przeniosę go tutaj do Moczulski.

2:13Ten fragment kodu usuwam

2:15i w konfiguracji czyli w basic możemy dać różne opcje, czyli

2:21to co tutaj deklarujemy pod name będzie naszym username naszą nazwą użytkownika.

2:26Więc jeśli sobie tutaj wpiszemy.

2:29Admin.

2:33I tutaj wpiszemy password.

2:38To widzimy, że tutaj Next się już tam przebudowuje.

2:42I w Enabled możemy wskazać, czy chcemy

2:44faktycznie korzystać z tego bzyka, ponieważ nie zawsze jest on wymagany.

2:49Prawdopodobnie, gdy już będziemy mieli

2:51aplikację produkcyjną, bądź po prostu będziemy mieli inną formę

2:55logowania zaimplementowaną, to nie będzie on nam już potrzebny.

2:58Ja tutaj w tym momencie to zasadniczo do

3:00rejestru, ale widzimy, że w taki sposób odwołujemy się do zmiennych

3:04środowiskowych, tak jak się dzieje to w nocie.

3:07Więc ja tutaj po prostu

3:08wpiszę true jako build, zapiszę ponownie i zobaczmy czy to nam tutaj zadziałało.

3:16On się przebudowuje.

3:18Czasami jest tak, że jeżeli edytujemy next

3:20config jest a, to trzeba go tutaj zabić za pomocą kontrolce i uruchomić jeszcze raz.

3:26Naprawdę.

3:28Natomiast w tym wypadku nie było to konieczne.

3:30Wystarczyło odświeżyć z Shift Command i R

3:32na mojej maszynie bądź Control F5 aby odświeżyć to na Windowsie.

3:38No i faktycznie, jeśli wpiszemy sobie tutaj jakieś dowolne dane.

3:42To widzimy, że jesteśmy odbijanie.

3:44Czyli znowu popatrz nam się pojawia i

3:46będzie się pojawiał w nieskończoność tak długo jak będziemy wpisywać złe hasło.

3:50Jeśli wpiszemy admin

3:52i jako hasło podamy nasz password, to nasza strona już w tym momencie działa.

3:58Oczywiście to się nam

4:00tutaj zachowało, więc powinniśmy z trybu incognito za każdym razem w to wchodzić.

4:04Ale to co chciałem Wam pokazać jako istotną rzecz to to tutaj

4:10odwoływanie się do zmiennych środowiskowych, ponieważ hard

4:14kodowanie haseł czy nazw użytkownika nie jest dobrą praktyką.

4:18Możemy stworzyć.

4:20Plik zawierający zmienne środowiskowe.

4:23Jest taka konwencja, że domyślnie

4:25trzymane są one z reguły w ukrytych plikach, czyli zaczynają się one

4:28od kropki i kropka i MV jak environment, czyli środowisko.

4:34I tam właśnie trzymamy nasze zmienne środowiskowe.

4:38Czyli jeśli chcielibyśmy powiedzieć, że.

4:42Czyli jeśli ustawimy sobie Basic Enabled

4:44ustawione na true w naszym pliku kropka mv.

4:49I robimy to poprzez proste przypisanie równa się, czyli true.

4:54Zapiszemy tutaj.

4:55Zobaczymy, że to nam się udawało

4:57i w tym momencie tak naprawdę jesteśmy na tym samym etapie co byliśmy w kontekście

5:02ustawienia tego tutaj na true, ponieważ ta wartość będzie teraz wypełniona.

5:06Ale możemy też stworzyć własne zmienne środowiskowe i wynieść username i password

5:12poza nasz kod BS, ponieważ plików z reguły się nie komentuje.

5:18Jako dobrą praktykę, w związku z czym jeśli sobie tutaj

5:20wpiszemy proces kropka i mv username i tutaj ustawimy process kropka

5:30i encji password zapiszemy i tutaj wpiszemy username.

5:37Admin 2. Tak dla pewności tylko oraz password.

5:43Password.

5:44Napiszemy więc ten plik już będzie poza wersjonowanie nie będzie zapisywane,

5:50a więc taki plik też powinniście sobie sami stworzyć.

5:52Jeżeli będziecie korzystać z tego przykładu, ponieważ on się nie zapisze

5:56i nie zapisze się, ponieważ mamy taką definicję fixed ignore.

6:01Tutaj właśnie w designera

6:04będzie wpisana reguła, że po prostu pliki typu kropka elf nie są zapisywane.

6:11No i po zapisaniu widzimy, że otworzył nam się znowu ten pokaz.

6:16Piszemy sobie admin password i odbiło nas, ponieważ nie mamy

6:21tutaj zadeklarowanego admin 2 co było naszym hasłem, więc wpisujemy password

6:27i faktycznie widzimy, że coś nie zadziałało.

6:28Czyli jesteśmy w stanie korzystać z tych zmiennych środowiskowych wewnątrz pliku.

6:33Next.

6:33Configure jest najważniejsza rzecz w tej lekcji, którą

6:36chciałem powiedzieć o zmiennych środowiskowych.

6:39Jest to, że w tekście

6:41te zmienne nie będą domyślnie przekazywane do warstwy aplikacji.

6:45Co to znaczy? Jeżeli wejdziemy w nasze page i np.

6:50naszą stronę Page play login, czyli tutaj class Login i zmienimy np.

6:58welcome tutaj wpiszemy sobie username.

7:02Analogicznie musimy oczywiście tutaj stworzyć jakiś komputer.

7:06Property.

7:11I tutaj zrobimy username,

7:13który będzie zwracał nam po prostu proces wi username co może dla.

7:22Przykładu.

7:25Piter.

7:27Tutaj damy po prostu.

7:29A co Ty?

7:33Czyli nasza nazwa użytkownika będzie zakodowana, czyli po prostu.

7:39W środku.

7:42Naszego kodu.

7:45Tutaj widzę, że.

7:53S.

7:54Niestety.

7:56Rzuca błąd jeżeli chodzi o formatowanie, a też automatycznie nie.

8:01Poprawił go, w związku z czym możemy to w tym momencie zignorować albo.

8:09Naprawić to formatowanie.

8:10Natomiast ja tutaj tego bym nie chciał robić.

8:12Zobaczmy, czy Spotify nam po prostu pomoże.

8:17Zapiszemy, że to co się zmieniło

8:20jest tylko gorzej, więc cofniemy, wyłączę klienta na

8:25kolejne rzeczy, ale widzimy faktycznie, że łapką się nam wyświetliło, w związku z

8:29czym kod działa tylko ze względu na formatowanie.

8:32Dostajemy tutaj błąd, ponieważ mamy dosyć silne sprawdzanie tego kodu.

8:38Co jest istotne to jeżeli zrobimy w

8:39classes username oczywiście tutaj najlepiej byłoby bez literówek.

8:46To się nam odświeży albo miało się odświeżyć ręcznie.

8:49W tym momencie maczał Gold false.

8:55Teraz to już jest błąd.

8:58Oczywiście trzeba napisać w odpowiednim formacie.

9:01Po odświeżeniu widzimy wielką admin 2 przez chwilę,

9:05co jest dość ciekawe, a ponieważ jest to renderowane na ekranie.

9:12Ale w momencie kiedy frontend renderuje warstwę view,

9:16czyli tak jak normalnie wchodzimy na naszą stronę internetową.

9:20To view jest ładowane poprzez znacznik

9:23skrypt i ten znacznik script również tutaj się znajduje, który będzie

9:29w trybie czyli wewnątrz przeglądarki przebudowywać nam to co się znajduje, aby

9:34realizować logikę fundamentalną takie jak np.

9:36drag and drop czy filtrowanie po listach i tak dalej i tak dalej.

9:41Ale początkowo widzimy to dlatego, bo dane są renderowane na backend, czyli

9:48treść tych komponentów, ona w momencie, gdy mamy pierwszą zwrotkę z serwera.

9:54Ponieważ to jest właśnie to, co dostajemy

9:55z serwera na samym wejściu, już zawierają w sobie te dane, ale przez

10:00to, że Next wycina zmienne środowiskowe z runtime u po to, aby nie

10:07wystawiać na zewnątrz potencjalnie newralgicznych danych, to one znikają.

10:14Jak temu zapobiec?

10:15Jak sprawić, aby ta informacja tutaj dalej się znajdowała?

10:20Jest to oczywiście opisane w dokumentacji,

10:22ale ja po prostu tutaj powiem, że to co trzeba zrobić to w naszych

10:28zmiennych środowiskowych wpisać tutaj next i MWI jako prefiks naszej zmiennej

10:34środowiskowej, która ma się znaleźć na fontannie.

10:37Czyli jeśli tutaj sobie wejdziemy w.

10:41Next Dogs.

10:44I tutaj wpiszemy environment.

10:51Environment tables.

10:55To tutaj powinno się pojawić na XT

10:59i MWI jeśli fajnie wyglądają starting next i mwi debilny proces.

11:05Oznacza to, że jeżeli będziemy tworzyć

11:07zmienne środowiskowe z tym prefiksem, one będą znajdowały się również na fontannie.

11:12Czyli wracając do naszego przykładu next mwi username to jest teraz nasza

11:17nazwa zmiennej, to już musimy prefiksu używać.

11:21Czyli w tym momencie musimy zmienić tą nazwę zmiennej w tym miejscu.

11:27I faktycznie, gdy wejdziemy z powrotem na nasz projekt.

11:33Widzimy, że admin.

11:35Dalej się tutaj pojawia,

11:36ale jeśli spróbowali byśmy ponownie dostać się do np.

11:41pola password to już tego nie można zrobić.

11:44A dzieje się to dlatego, ponieważ jeżeli

11:46napiszemy aplikację w zły sposób mógłby dostać się do naszego password, a

11:51oczywiście tego byśmy nie chcieli, ponieważ mógłby po prostu wejść w konsolę

11:53i sprawdzić jak zalogować się do naszej aplikacji.

11:56W związku z czym istotne jest to, aby pamiętać, że jeżeli

12:00zależy nam, aby zmienna środowiskowa znalazła się na frontend, musimy ją

12:03poprzedzić właśnie takim ciągiem znaków next.

12:07Podkreślił.

12:08I mwi podkreślił.

12:10Podłoga i koniecznie muszą to być zmienne.

12:14W kapita Kasia czyli wielkimi literami.

12:17W przeciwnym razie zostaną one usunięte i

12:19tak naprawdę w naszym przypadku nie musielibyśmy tego wystawiać na

12:23zewnątrz, ponieważ nie jest to jakaś informacja bardzo newralgiczne.

12:27Nie jest to też zbyt potrzebne naszemu użytkownikowi, ale jeśli

12:31chcielibyśmy, to oczywiście możemy to zrobić w ten sposób.

12:34To się przydaje przede wszystkim, jeżeli korzystamy z jakiś API na front endzie,

12:38czyli będziemy korzystać z pewnych end pointów, które będziemy odpytywać np.

12:43podczas stagnacji czy tego typu rzeczy.

12:46Wtedy musimy koniecznie to poprzedzić.

12:49To wszystko w tej lekcji.

12:50W kolejnej lekcji omówię krótko

12:53różne opcje konfiguracyjne na CSSa bazując na dokumentacji

12:59i w kolejnym rozdziale zaczniemy faktyczną pracę nad projektem.