Transcription

Dzień dobry, witam bardzo serdecznie. W dzisiejszym materiale pokażę Wam, jak możecie uploadować pliki do Amazon S3. Jeżeli nie wiesz, czym jest Amazon S3, nie przejmuj się, za chwileczkę postaram się to wytłumaczyć. Zrobimy to na przykładzie React, Linux, JS, ale oczywiście to, co dzisiaj Wam pokażę, można zastosować w dowolnym frameworku, więc nie sugerujcie się tym. Myślę, że ten generalnie sposób, jaki Wam dzisiaj pokażę, jest dosyć uniwersalny. Na początek sobie przechwycimy plik z inputa, czyli dosyć prosta rzecz, później wygenerujemy sobie klucz AWS, który umożliwi nam później komunikację przez klienta Amazona z naszym bucketem. Później sobie odpowiednio skonfigurujemy ten S3 bucket, żeby był on w odpowiednim regionie, żeby miał on jakieś podstawowe szyfrowanie, żeby pliki domyślnie były dostępne w sposób prywatny. Później pokażę Wam, jak możemy uzyskać URL do uploadu, ponieważ nie będziemy uploadować plików za pośrednictwem naszego serwera, tylko będziemy prosić Amazona, żeby on wygenerował nam URL, a ten URL wykorzystamy dopiero do tego, aby faktycznie zuploadować pliki do Amazona. Myślę, że jest to o wiele lepsza technika niż używanie naszego serwera pomiędzy, ponieważ wtedy tak naprawdę możemy nasz serwer odciążyć i po prostu ten upload wykonywać bezpośrednio do użytkownika, do Amazona bez blokowania zasobów naszego serwera. Później oczywiście jak już dostaniemy ten URL, no to wtedy możemy wykonać już faktyczny upload pliku i to też oczywiście pokażę w dzisiejszym filmiku. I na końcu będzie podgląd tego pliku i pokazanie, co możemy z nim zrobić. Jeżeli nie wiesz, czym jest Amazon S3, jest to pokrótce usługa od Amazona, która umożliwia przechowywanie plików w chmurze. Więc jeżeli masz dużo plików, jeżeli chcesz, żeby każdy z swoich użytkowników, nieważne czy łączy się on z Australii, z Ameryki, z Afryki, szybko otrzymywał dostęp do Twoich plików, to najprawdopodobniej musisz się właśnie zainteresować usługą taką, jaką jest Amazon S3. Amazon S3 jest fajny też z tego względu, że mamy model płatności pay-as-you-go, czyli to oznacza mniej więcej tyle, że np. jeżeli masz 1TB plików, no to płacisz odpowiednio więcej niż np. jak masz 20MB tych plików. Później znowu, jeżeli ktoś często pobiera Twój plik, to Ty po prostu płacisz więcej, a usługa jest cały czas tak szybka i nie ma żadnych limitów. Dokładnie nie wiem, jak się przelicza te wszystkie ceny Amazona, ale musisz mi uwierzyć na słowo, że całkiem nieźle się to opłaca w wielu przypadkach. Jeżeli Twój plik nie jest jakoś mega często pobierany, nie masz jakiegoś bardzo popularnego serwisu, to za Amazon S3 albo nie zapłacisz nic, albo zapłacisz jakieś grosze. Amazon S3 oczywiście oferuje nie tylko przyjmowanie naszych plików i później ściąganie ich przez innych użytkowników, ale też mamy pewnego rodzaju API, które umożliwia nam np. ograniczać dostęp do jakichś plików, dzielić je pomiędzy różne regiony, więc jest to nie tylko taki głupi dysk, ale całkiem fajna usługa, która kompleksowo załatwia nam przechowywanie plików i nieważne, czy to jest HTML, czy to jest jakiś plik np. z filmami wideo, np. trójki, nagrania podcastów. Ja też osobiście korzystam z tej usługi do przechowywania backupów różnych usług, czyli po prostu używam S3 Bucket'a po to, żeby zrzucać tam backupy. Płacę za to jakoś 2 dolary miesięcznie, a nie muszę się przejmować, że utracę te dane. Oprócz tego są też dodatkowe opcje, które pozwalają np. kasować pliki co jakiś czas, więc jest to naprawdę bardzo fajna opcja. Nie przedłużam i zachęcam do zapoznania się z dzisiejszym materiałem. Jeżeli czegoś się tam dowiesz, to przyciśnij lajka i zostaw komentarz. No dobra, więc teraz zaczniemy od tego, żeby po prostu sobie przechwycić każdy plik, który zostanie tutaj zaploadowany w tym miejscu na stronie. W tym celu sobie zrobimy tutaj taki handler onChange handleUpload i sobie utworzymy funkcyjkę, która tym właśnie się zajmie. Nazwiemy ją sobie handleUpload, tutaj sobie przejmiemy event i na początku zrobimy sobie console.loga.targetFiles, chyba tak to się robiło. Tutaj powinniśmy dostać tablicę właśnie plików, które zostały przez użytkownika wybrane. Bierzemy sobie obrazek, na przykład ostatni newsletter i widzicie, że mamy tutaj console.loga w postaci pliku, gdzie mamy nazwę tego pliku i jego typ. To nam się za sekundeczkę przyda, czyli możemy sobie na przykład wpisać to do zmiennej file bez console.loga i za chwileczkę będziemy mogli ten plik wykorzystać do tego, żeby wykonać zapytanie do naszego Amazona. Zrobimy sobie w tym celu taki prosty endpoint, który będziemy mogli sobie w ramach naszej aplikacji odpytać. Tutaj skorzystamy sobie z awaitFetchApiS3. Będziemy się łączyć z metodą postBody. Wymyślamy sobie tam jsonStringify, czyli po prostu zamienimy sobie kod z takiego jak do obiektu javascript, czyli to będzie na przykład typeName. To sobie przekażemy w body. Tutaj korzystamy z await, więc oczywiście ta funkcja musi być asynchroniczna. Zapisujemy nasz kodzik. No i teraz musimy zająć się po prostu zrobieniem tego endpointa, bo oczywiście ten endpoint jeszcze tutaj nie istnieje, więc musimy sobie go utworzyć. Korzystamy tutaj z next.js, więc wystarczy, że mamy folder api, w którym po prostu sobie tworzymy nowy plik, w tym przypadku s3 i eksportujemy z niego domyślną funkcję, która przyjmuje dwa parametry. Pierwszy z nich to jest request, drugi to jest response i tutaj w ten sposób właśnie możemy sobie wygenerować odpowiedź dla tego naszego endpointa. W tym endpointzie na razie zrobiliśmy sobie taką atrapę, czyli po prostu zwracamy status 200 i jsona, w którym przekazujemy to, co zostało przekazane do tego endpointa. Nie jest to może najlepszy endpoint świata, ale zrobiłem go teraz po to, żeby po prostu Wam pokazać w jaki sposób to działa w next.js. Generalnie jeżeli teraz użytkownik wybierze jakiś plik do uploadu, no to po prostu ta funkcja handle upload odpali nam ten endpoint, a ten endpoint zrobiliśmy po to, żeby z niego móc się komunikować ze światem Amazona i z naszą s3, ponieważ musimy to zrobić po stronie backendu, bo nie możemy w żaden sposób generować linków po stronie klienta, bo wtedy byśmy musieli pokazać sekret całemu światu, więc musimy mieć backend. A teraz sobie szybciutko zainstalujemy bibliotekę o nazwie AWS SDK. Jest to SDK, które umożliwia nam komunikację z różnymi usługami w obrębie Amazona. Oczywiście my dzisiaj będziemy korzystać jedynie ze strójki, ale Amazon ma cały wachlarz różnych usług, więc można tam zrobić różne rzeczy związane z machine learningiem, można stawiać jakieś całe gotowe serwery, bazę danych, więc naprawdę jest tego multu, a my dzisiaj skorzystamy tylko i wyłącznie ze strójki i tutaj jak widzicie właśnie zaciągnąłem typowo s3 po to, żeby nie dołączać wszystkiego z tej biblioteki, bo tylko zobaczcie ile tutaj jest w tym samym panelu różnych usług, a myślę, że w rzeczywistości ich jest jeszcze więcej. Natomiast my dzisiaj się skupiamy na s3, utworzymy teraz szybko nasz bucket. Bucket można utworzyć w różnych regionach. Ja utworzę bucket po prostu we Frankfurcie, jest to chyba najbliżej do Polski, więc ta szybkość, ten ping powinien być odpowiednio niski. Tutaj sobie nazywamy nasz bucket, nazwa musi być unikalna. Tutaj też możemy ustawić jakieś dodatkowe rzeczy, np. szyfrowanie dla naszych plików. Myślę, że warto to ustawić w takich prawdziwych produkcyjnych aplikacjach, pewnie chcielibyście też używać własnego klucza do szyfrowania, natomiast tu użyjemy standardowych rzeczy. Nasz bucket będzie publiczny, ponieważ chcemy umożliwić użytkownikom upload publicznych plików, więc nie będziemy blokować do niego dostępu, jednak jeżeli macie jakiś bucket, w którym chcecie przechowywać jakieś tajne rzeczy, jakieś backupy itd., to oczywiście warto jest zablokować w całości dostęp do tego bucketu, tak żeby nawet ktoś przez przypadek nie mógł w nim utworzyć plików publicznych. My zrobimy publicznie. Tutaj oczywiście możecie się pobawić tym panelem, sobie popatrzeć jakie tutaj są opcje, można ustawić jakieś backupy, jakieś logi, wersjonowanie, a tutaj jedna rzecz, która nas teraz interesuje, to ustawienie odpowiednie korsów, ponieważ będziemy my z naszym bucketem się komunikować z poziomu aplikacji webowej, więc musimy skonfigurować dostęp. I tutaj ja na razie zrobię taką politykę niezbyt poprawną, czyli po prostu zezwolę na to, żeby każdy mógł się komunikować z tą aplikacją. Na pewno w takich już produkcyjnych rozwiązaniach lepiej jest tutaj tę politykę troszeczkę zrobić bardziej, nazwijmy to bezpieczną, wskazać konkretne originy, z których można się łączyć z naszym Amazonem, natomiast na potrzeby takiego treningu edukacyjnego, to myślę, że zrobimy sobie takiego zwykłego bucketa, do którego każdy może się połączyć. Teraz musimy sobie utworzyć klucz dostępu, ponieważ będziemy nasz kod łączyć z Amazonem, no to musimy mieć po prostu jakiś klucz uwierzytelniający. Tutaj Amazon umożliwia nam tworzenie takich kluczy. Oczywiście ja to dzisiaj zrobię tak wszystko pobieżnie, czyli po prostu utworzę byle jakiego użytkownika, który będzie miał prawa pełne do korzystania z usługi S3, ale oczywiście jeżeli ktoś jest bardziej dociekliwy, jeżeli ktoś chce to zrobić lepiej, to możecie na przykład sobie skonfigurować użytkownika tak, żeby on miał dostęp tylko i wyłącznie do jakiegoś konkretnego bucketu albo do kilku różnych bucketów, które macie na swoim koncie. Tutaj naprawdę Amazon i ten panel jest naprawdę potężny, więc możecie tutaj różne rzeczy sobie pokonfigurować, natomiast ja dzisiaj będę to robił wszystko jak najprościej po to, żeby po prostu Wam pokazać jak zrobić ten upload. No i w tym momencie mamy kredensiale, które najlepiej sobie skopiować do pliku .env. Usunąłem już je, więc nie zatrzymujcie filmu, nie kradnijcie tych kredensiali, nic z nimi raczej nie zrobicie. Skopiujcie sobie je, wklepcie je sobie najlepiej do zmiennych środowiskowych w pliku .env albo jeżeli zarządzacie w ten sposób inny, bo te kredensiale będą nam potrzebne do tego, żeby nawiązać tutaj połączenie ze strójką. Więc łączymy się ze strójką, tworzymy nowy obiekt S3, przekazujemy parametr, pierwszym z nich jest region, czyli ten region, w którym utworzyliśmy bucket. Kolejny to jest oczywiście access key, który sobie bierzemy z pliku .env. Z plikami .env uważajcie, bo często trzeba po prostu zresetować na przykład serwer albo otworzyć okno w terminalu jeszcze raz, żeby te .envy się zaktualizowały. Też tutaj eksperci AWS na pewno wiedzą, że te kredensiale można na wiele różnych sposobów przekazywać do łączenia, można je trzymać gdzieś u siebie na dysku, można je przekazywać w takim obiekcie, tak jak widzicie tutaj na ekranie. Ja natomiast, żeby nie utrudniać, to zrobię to wszystko w jednym pliku. Myślę, że też warto sobie tworzyć, jak macie taką prawdziwą aplikację, wiele różnych bucketów, wiele różnych kluczy dostępowych, tak żeby po prostu nie było sytuacji, że używacie klucza, który może zrobić wszystko na waszym Amazonie, bo w sytuacji, gdy on wycieknie, no to oczywiście macie problem. Ale my tutaj wracamy do pisania kodu, mamy file params, tutaj musimy podać parametry pliku, który będziemy za chwileczkę uploadować do bucketa, czyli tak naprawdę teraz nie uploadujemy jeszcze pliku, ale mówimy AWSowi słuchaj, zamierzam zuploadować plik do bucketa Simple Shop Public i ten plik, który chcę zaplodować, to on się będzie nazywał w określony sposób, czyli tutaj muszę podać parametr key i to jest nazwa naszego pliku. Oczywiście możemy tam tworzyć foldery, czyli możemy podać nie tylko nazwę, ale też po backslashu pisać foldery, później podajemy expires, czyli liczbę sekund, po których ten link, który wygeneruje nam S3, będzie nieaktywny, no i content type, czyli jaki typ pliku chcemy zaplodować. I tutaj oczywiście ten czas, kiedy ten link wygaśnie, ma dość duże znaczenie, jeżeli chcecie uploadować duże pliki, czyli np. jeżeli wiecie, że Wasz użytkownik będzie uploadował np. 1TB danych, no to najprawdopodobniej w 600 sekund nie zdąży tego zrobić, więc trzeba to też po prostu sobie odpowiednio dostosować. No i dobra, mamy teraz parametry, to teraz musimy w takim razie wreszcie korzystać z tego klienta S3 i mamy tutaj możliwość wykonania funkcji getSignedURLPromise i ta funkcja nam zwróci promisa, który po prostu będzie zawierał URL. I ten URL za chwileczkę sobie wykorzystamy do tego, żeby zaplodować plik, czyli zobaczcie, nasz backend nie uploaduje de facto pliku, nasz backend tak naprawdę mówi AWS-owi, że zamierzamy zaplodować jakiś plik i Amazon nam zwraca po prostu urla i dopiero tego urla możemy wykorzystać po stronie klienta, by po prostu zaplodować plik. Więc wiem, że to brzmi troszeczkę, brzmi to może głupio i dziwnie, ale ma to sens, ponieważ będziemy uploadować bezpośrednio do Amazon S3 z pominięciem naszego serwera, więc nie będziemy blokować zasobów naszego serwera i też powinno to znacząco wpłynąć na szybkość tego uploadu. No i teraz ten URL sobie tutaj po stronie klienta wylistujemy, tak żeby zobaczyć, czy nasz kod w ogóle działa, czyli w momencie, jak wybierzemy plik, to powinien się nam on pokazać, ten url, oczywiście po chwilce. U, tutaj się stało coś złego. Mamy literóweczkę, oczywiście chcemy wykonać operację nie pub object, ale put object, czyli chcemy wstawić jakiś nowy obiekt na Amazona, więc najprawdopodobniej ten brzydki błąd, który tutaj był, był tym spowodowany, więc wybierzemy jeszcze raz jakiś plik, uploadujemy go, chwileczkę czekamy. O, już widzicie, że mamy url. Ten URL jest ważny przez 600 sekund i możemy go użyć właśnie do wykonania uploadu z klienta. Czyli teraz już w końcu możemy w tej naszej funkcyjce handle upload zrobić jeszcze jedno zapytanie asynchroniczne. Tym razem będzie to fetch, który po prostu wypchnie nasz plik bezpośrednio do S3. Wiem, że to brzmi dziwnie, że fetch coś wysyła, ale no fetch jest funkcją, która właśnie umożliwia nam po prostu wysyłanie zapytań, ale tutaj w tym przypadku nie robimy tak naprawdę zapytania, tylko robimy tak naprawdę wysyłkę naszego pliku. No i tutaj użyjemy sobie metody put. Oczywiście musimy też podać w parametrze body, które jest tak naprawdę obiektem naszego pliku z przeglądarki, który zaplodował użytkownik. No i też możemy podać header, który jest po prostu content type, tak żeby Amazon wiedział co my tak naprawdę tam w tym pliku wysyłamy. No i teraz możemy tutaj troszeczkę poprawić formatowanie kodu, zapisać ten kodzik i zobaczyć jak on zadziała już w praktyce. Co się stanie, gdy po prostu zaznaczymy plik. Otworzymy sobie zakładkę network, żeby zobaczyć co tu się dzieje, czy nie mamy żadnego błędu. Wybieramy nasz plik. O, i tu widzimy kolejny błąd. Wkradł się, a oczywiście tutaj musimy dopisać typ. On oczywiście jest na zmiennej file. I wybieramy plik ponownie. I zobaczymy co się tutaj dzieje. No i nie mamy żadnego błędu. Zapytanie do Amazona zostało wykonane. Tutaj akurat chyba nic nie zobaczymy szczególnego, ale zaraz sobie podglądniemy ten plik w naszym bakecie. Teraz sobie jeszcze zanim podejrzymy ten plik, to sobie zrobimy taki stan w tym komponencie reactowym, do którego plik zaplodowany po prostu przypiszemy sobie do tego stanu url do tego pliku, tak żebyśmy mogli sobie zrobić jakiegoś tam fajnego ifa. I w momencie, gdy plik zostanie zaplodowany, to sobie ustawimy stan i w ifie po prostu wyświetlimy na przykład znacznik img. Wiem, że to nie jest może super rozwiązanie, bo przecież użytkownik może na przykład zaplodować wideo albo jakiś inny plik, ale zrobimy sobie taki prosty kodzik. W ramach zadania domowego możecie go poprawić w taki sposób, żeby użytkownik mógł aplodować tylko i wyłącznie obrazki albo na przykład w momencie, gdy zaploduje coś innego niż obrazek, to żeby też to było ładnie wyświetlone w podglądzie, bo my sobie tutaj zrobimy po prostu tak brzydko. W momencie, gdy ktoś po prostu zakończy się ten upload, nie rzuci nam żadnym błędem, no to sobie po prostu przypiszemy nazwę tego pliku. No i tutaj widzicie, możemy sobie wyświetlić ten plik, tylko tutaj jest taka uwaga, że domyślnie wszystkie pliki są prywatne, czyli widzicie, że nie możemy go wyświetlić w przeglądarce, ponieważ w momencie, gdy uploadujemy plik, powinniśmy ustalić tak naprawdę prawa do odczytu tego pliku. Za chwileczkę to zrobimy, ale tutaj już widzicie, że chodzi mi o to, że po prostu sobie w tym stanie przechowamy nazwę naszego pliku no i wcześniej mamy po prostu string, który jest odpowiedzialny za adres, czyli mamy tutaj HTTPS, nazwę naszego bucketa, S3, nazwę naszego regionu i domenę amazon.aws.com. Tu sobie to zapiszemy w takiej zmiennej pomocniczej, oczywiście to też mogłaby być zmienna środowiskowa, bucket URL. Amazon oczywiście też umożliwia Wam skonfigurowanie bucketa tak, żeby działał on na Waszej własnej domenie, więc może być to na przykład img.chmaroc.com albo jakaś tam inna strona bez żadnego problemu, ale dzisiaj oczywiście nie ma czasu, żebym Wam to pokazał. Tutaj robimy proste sprawdzenie, jeżeli upload file URL zawiera coś w sobie, jeżeli się ewaluuje do true, czyli po prostu ma jakąś przypisaną wartość, to wtedy chcemy wyświetlić znacznik img, w którym w src podajemy właśnie to, co mamy przechowane w tym naszym tymczasowym stanie. Teraz musimy wprowadzić jeszcze jedną zmianę, o której mówiłem przed chwileczką, a mianowicie w naszym endpoint'cie musimy podać specjalny parametr, który się nazywa ACL i to jest parametr odpowiedzialny właśnie za prawa dostępu do tego pliku i tutaj przyznamy dostęp typu public read i teraz w momencie, gdy zaplodujemy ponownie jakiś plik, no to powinien się on nam tutaj wyświetlić. Znajdziemy jakiś pliczek, wrzucamy go i bam, proszę bardzo, widzicie, proszę Państwa, mamy zaplodowany plik do Amazon S3. Ten plik jest dostępny publicznie, jest on super szybki, możemy go wrzucić na różne regiony, możemy uploadować tutaj filmy, gry, cokolwiek tam macie. Więc to wszystko w zasadzie, co przygotowałem dla Was na dziś. Jeżeli macie jakieś pytanka do tego, to zapraszam do sekcji komentarzy. Jak chcecie więcej takich filmików związanych z Amazon, z Next.js, z React'em, to piszcie w komentarzach, postaram się wszelkie Wasze prośby spełnić w ramach tego kanału. Jak się czegoś nauczyłeś, nauczyłaś, to będzie mi bardzo miło, jak zostawisz łapsko w górę. To wszystko, dziękuję bardzo za uwagę, trzymajcie się, pozdrawiam serdecznie, cześć, cześć.