Jak skonfigurować proste przesyłanie obrazu za pomocą Node i AWS S3

Przewodnik krok po kroku wyjaśniający, jak przesłać obraz lub dowolny plik do usługi Amazon S3.

To jest pierwsza część samouczka, w którym zajmiemy się częścią kodu dotyczącą serwera (Node.js).

Przygotowałem również samouczek wideo na YouTube. Możesz znaleźć link w zasobach na dole tego artykułu.

1. Co musimy zainstalować i krótki opis.

multer: oprogramowanie pośredniczące do obsługi plików danych. Używany głównie do przesyłania plików. Więcej informacji: Npm Link

multer-s3: rozszerzenie multer umożliwiające łatwe przesyłanie plików do usługi Amazon S3. Więcej informacji: Npm Link

aws-sdk: pakiet niezbędny do pracy z AWS (Amazon Web Services). W naszym przypadku usługa S3. Więcej informacji: Npm Link

Przejdź do swoich projektów i zainstalujmy pakiety:

npm install —-save multer multer-s3 aws-sdk

2. Zarejestruj się w AWS

Najpierw utwórzmy konto na //aws.amazon.com. Amazon oferuje niesamowity darmowy poziom, z którego możesz korzystać przez pierwszy rok. Po zalogowaniu wyszukaj usługę S3.

Mówiąc najprościej, S3 to usługa w chmurze do przechowywania plików.

Musimy stworzyć Bucket . Możesz sobie wyobrazić wiadro jako folder na swoje pliki. Wybierz nazwę zasobnika i region . Ponieważ jest to prosta konfiguracja, nie jesteśmy zainteresowani innymi konfiguracjami. (Domyślna konfiguracja jest w porządku - jeśli coś nie jest jasne, zapytaj w komentarzach). Klikaj „ Dalej ”, aż przejdziesz do przeglądu i utwórz swój zasobnik.

Przejdź do utworzonego zasobnika i sprawdź pasek adresu URL . Zapamiętaj swoją nazwę wiadra (dla mnie „średni test”) i region (dla mnie „my-wschód”).

Teraz musimy uzyskać nasze bezpieczne dane uwierzytelniające . Przejdź przez nazwę swojego konta do „ moich danych uwierzytelniających ”. Następnie „ Klucze dostępu ” i utwórz nowy klucz dostępu .

Nigdy nie udostępniaj nikomu swoich kluczy! Tymczasowo zapisz te klucze w jakimś pliku lub pobierz plik klucza, ponieważ potrzebujemy kluczy, aby skonfigurować przesyłanie pliku.

W porządku. Konfiguracja Amazon zakończona!

3. Przejdź do swojego edytora kodowania

Nie będę tutaj wyjaśniał podstaw Node ani Express. Ten samouczek dotyczy tylko przesyłania plików. Jeśli jesteś zainteresowany realizacją całego projektu, zajrzyj do mojego repozytorium GitHub lub obejrzyj pełny tutorial. (Możesz znaleźć linki na końcu tego wpisu na blogu).

  1. Utwórz usługę przesyłania plików z następującą implementacją (część pierwsza):

Ważna uwaga: nigdy nie ujawniaj swoich tajnych danych logowania bezpośrednio do pliku! Nigdy nie udostępniaj swoich tajnych danych uwierzytelniających! Rozważ skonfigurowanie zmiennych środowiskowych w środowisku lokalnym lub w przypadku wdrożonych projektów, zmiennych u dostawcy chmury. Najlepszym rozwiązaniem byłoby użycie aws-profiles : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

Najpierw importujemy wszystkie nasze zainstalowane pakiety. Druga część jest skonfigurować nasze AWS . Musimy podać nasze tajne klucze i region z paska adresu URL, który pokazałem ci wcześniej.

Po skonfigurowaniu AWS możemy stworzyć instancję naszego Amazon S3. Jeszcze nie skończyliśmy. Teraz zobaczmy drugą część tej implementacji.

Teraz możemy skonfigurować rozwiązanie do wielokrotnego przesyłania. Musimy nadać obiektowi multer funkcję o następujących właściwościach.

  1. s3 : instancja Amazon S3, którą stworzyliśmy wcześniej.
  2. zasobnik : nazwa naszego zasobnika (w moim przypadku: „średni test”)
  3. acl : kontrola dostępu do pliku („odczyt publiczny” oznacza, że ​​każdy może przeglądać pliki), wszystkie dostępne typy można sprawdzić tutaj: link do amazon
  4. metada : funkcja zwrotna do ustawiania metadanych przesyłanych plików. Tutaj ustawiam dodatkowe metadane dla fieldName . Możesz zobaczyć te dane na poniższym obrazku.

5. klucz: funkcja oddzwaniania do ustawiania właściwości klucza (pod jakim kluczem plik zostanie zapisany w Twoim wiadrze). W naszym przypadku tworzymy znacznik czasu aktualnego czasu i zapisujemy ten plik pod tą nazwą. W ten sposób nazwa naszego pliku zawsze będzie unikalna, ale możesz wybrać dowolną nazwę.

Po zakończeniu konfiguracji eksportujemy obiekt do przesłania , aby użyć go w innych plikach.

4. Skonfiguruj trasę do przesłania obrazu

Prawie skończyliśmy, ale użytkownicy naszej aplikacji nadal nie mają dostępu do przesyłania obrazu. Musimy im udostępnić tę funkcjonalność. Utwórzmy punkt końcowy, aby zapisać plik.

Eksportujemy nasz obiekt do przesyłania, który utworzyliśmy wcześniej i tworzymy z niego nowy. Nowa jest bardziej szczegółowa i zawiera dodatkową konfigurację do przesyłania pojedynczego obrazu . Zapewniamy mu wartość „ obrazu ”. Ta wartość jest bardzo ważna, ponieważ wyślemy nasz plik na serwer pod tym kluczem.

Druga część to sama trasa. Punkt końcowy POST do „ / image-upload ”. Wewnątrz nazywamy singleUpload . Nie zapomnij podać wewnątrz req i res, ponieważ multer pobierze plik, który wysyłamy na serwer z obiektu req.

Szukamy błędu. Jeśli go nie ma, odsyłamy JSON z wartością naszej lokalizacji pliku, która jest po prostu adresem URL do pliku na Amazon .

Aaaa i to wszystko! Możemy teraz przesłać pliki do Amazon S3. Całkiem proste, co o tym myślisz?

5. Przetestujmy to w Postman.

Aby zobaczyć efekty naszej ciężkiej pracy, musimy wysłać zapytanie do serwera z obrazem, który chcemy załadować. W tej części przetestujemy to za pośrednictwem Postmana. W następnej części samouczka stworzymy implementację w aplikacji Angular.

Jeśli nie masz programu Postman, możesz go po prostu pobrać jako rozszerzenie Google Chrome. Po prostu wyszukaj „ listonosz rozszerzenie google chrome ”. Postman to aplikacja służąca do inicjowania, wysyłania i testowania żądań do serwera w prostej sprawie.

  1. Wyślij żądanie wpisu do punktu końcowego, który utworzyliśmy wcześniej. W moim przypadku podałem ścieżkę węzła / image-upload .
  2. Wybierz Ciało z form-data .
  3. Podaj klucz danego obrazu. Zauważysz, że jest to klucz, który ustawiliśmy wcześniej w naszym kodzie. Sprawdź plik i wybierz plik z komputera.
  4. Wyślij zapytanie .

Powinieneś odzyskać JSON z adresem URL przesłanego pliku.

Voilà! To wszystko chłopaki. To jest proste przesyłanie plików dla Node. W następnym artykule będę kontynuować implementację frontendu dla Angulara.

Jeśli podoba Ci się ten samouczek, możesz zapoznać się z moim pełnym kursem na Udemy - Kompletny przewodnik po Angular, React & Node | Aplikacja w stylu Airbnb.

Wykład wideo: wideo z YouTube

Ukończony projekt: Moje repozytorium github

Twoje zdrowie,

Filip