Umożliwienie użytkownikom zewnętrznym bezpiecznego i bezpośredniego przesyłania plików do Amazon S3

Organizacje są często zobowiązane do przechowywania plików, obrazów i innych zasobów cyfrowych w magazynie. W wielu przypadkach źródłem tych plików są partnerzy lub osoby fizyczne, które nie są połączone z systemami wewnętrznymi i wymagają uwierzytelnienia korporacyjnego w celu załadowania plików.

Klienci tradycyjnie używają serwerów do obsługi przesyłania plików, co może zużywać znaczną ilość sieciowych operacji typu I/O i zasobów obliczeniowych. Ponadto utrzymanie wydajności przesyłania plików w miarę skalowania aplikacji może być niezwykle trudne. Aby spełnić te wymagania, organizacje często utrzymują kosztowną i czasochłonną infrastrukturę do przechowywania i dystrybucji zasobów cyfrowych, która często może być mniej bezpieczna i droższa niż alternatywne konfiguracje.

W tym artykule autorzy pokazują, w jaki sposób klienci mogą zbudować nowoczesną aplikację internetową do bezpiecznego przesyłania wielu plików bezpośrednio do Amazon Simple Storage Service (Amazon S3) przy użyciu AWS Amplify. To rozwiązanie zapewnia bezpieczną metodę, która zezwala użytkownikom zewnętrznym na przesyłanie plików do Amazon S3 bez zapewniania im bezpośredniego dostępu do zasobów pamięci masowej. Ponadto umożliwia wykorzystanie ekonomicznej i całkowicie bezserwerowej architektury, która zmniejsza obciążenie operacyjne związane z zarządzaniem serwerami, a jednocześnie wykorzystuje skalowalność i niezawodność Amazon S3.

Ogólny zarys rozwiązania.

AWS Amplify to zestaw specjalnie zaprojektowanych narzędzi i funkcji, które pozwalają programistom frontendowym i mobilnym w szybki i łatwy sposób tworzyć aplikacje typu full-stack na AWS, z elastycznością w wykorzystywaniu szerokiego zakresu usług AWS w miarę ewolucji ich przypadków użycia. Usługa ułatwia każdemu tworzenie aplikacji internetowych i mobilnych bez konieczności zarządzania podstawową infrastrukturą. Framework AWS Amplify zapewnia biblioteki do przechowywania, uwierzytelniania, GraphQL i wiele innych.

W tym rozwiązaniu do dostarczania treści autorzy wykorzystują Amazon CloudFront i uwierzytelniają użytkowników aplikacji internetowej z przeglądarki poprzez Amazon Cognito, umożliwiając im wgrywanie plików do zasobnika S3, czyli komponentu storage. Aby uprościć wdrożenie tego rozwiązania, korzystają z AWS Cloud9.

Rysunek 1: Używanie AWS Amplify do przesyłania plików z przeglądarki do Amazon S3

Przepływ pracy i architektura rozwiązania działają w następujący sposób:

1. Aplikacja internetowa AWS Amplify ze statycznymi stronami hostowanymi na Amazon S3 i CloudFront obsługuje treści za pośrednictwem protokołu HTTPS.

2. Amazon Cognito zapewnia uwierzytelnianie użytkownika.

3. Po autoryzacji użytkownicy mogą przesyłać pliki do Amazon S3.

Warunki wstępne

• Konto AWS;
• Instancja AWS Cloud9 IDE z pamięcią 8 GB, 2 procesorami vCPU i 20 GB Amazon EBS;
• AWS Amplify CLI.

Konfigurowanie środowiska

Autorzy wdrażają to rozwiązanie w regionie AWS us-east-1. Jeśli chcesz uruchomić go w innym regionie, upewnij się, że dostępne są usługi Amazon Cognito i Amazon S3. Ten krok opisuje, jak utworzyć nowe AWS Cloud9 IDE i jak zbudować w nim rozwiązanie.

Uwaga: instancja AWS Cloud9 IDE jest używana tylko raz do wdrożenia rozwiązania. Wyłączy się po 30 minutach bezczynności.

Aby rozpocząć, musisz najpierw zalogować się na swoje konto AWS. Teraz, aby utworzyć AWS Cloud9 IDE, wykonaj następujące kroki:

1. W AWS Management Console wyszukaj AWS Cloud9.

2. Wybierz Utwórz środowisko.

Rysunek 2: Tworzenie środowiska AWS Cloud9

3. Wprowadź nazwę i opis środowiska i kliknij przycisk Następny krok.

4. Skonfiguruj środowisko, jak pokazano na następującym ekranie:

5. Pozostaw całą resztę domyślnie i kliknij przycisk Następny krok.

6. Przejrzyj podsumowanie i kliknij Utwórz środowisko. Utworzenie środowiska może zająć kilka sekund.

Po utworzeniu środowiska zobaczysz ekran powitalny AWS Cloud9 z terminalem wiersza poleceń.

Rysunek 4: Terminal AWS Cloud9

Zwiększ wielkość instancji AWS Cloud9

Typowa instancja AWS Cloud9 ma 10 GB miejsca na dysku, z czego 8 GB jest zużywane przez działającą na niej instalację systemu operacyjnego. Nie jest to wystarczające do pobrania i zbudowania aplikacji, należy więc rozszerzyć wielkość Amazon EBS, aby spełnić wymagania do zbudowania aplikacji. EBS z dodatkowymi 10 GB spełnia wymagania.

1. Skopiuj i wklej następujące polecenie w terminalu AWS Cloud9:

curl https://raw.githubusercontent.com/aws-samples/s3uploader-ui/main/cloud9_resize.sh > cloud9\_resize.sh

Rysunek 5: Pobieranie skryptu w celu rozszerzenia woluminu

2. Uruchom skrypt, wydając następujące polecenie na terminalu AWS Cloud9. Spowoduje to zwiększenie wielkości do 20 GB:

sh cloud9\_resize.sh 20

3. Zrestartuj instancję AWS Cloud9, aby zwiększyć objętość.

sudo reboot

4. Poczekaj kilka sekund, a ponowne uruchomienie automatycznie połączy Cię z instancją Cloud9. Po połączeniu sprawdź wolne miejsce za pomocą następującego polecenia:

df -h


Rysunek 6: Wyjście polecenia df -h

Uwaga: W zależności od typu instancji możesz zobaczyć inny dysk, na przykład /dev/nvme0n1p1.

Tworzenie aplikacji internetowej

Aby wdrożyć to rozwiązanie, wykonaj następujące czynności:

1. Otwórz AWS Cloud9 IDE i dodaj plik konfiguracyjny, aby określić domyślny region AWS, kopiując następujące polecenie i wklejając je do terminala AWS Cloud9:

cat <<END > ~/.aws/config
[default]
region=us-east-1
END

2. Utwórz aplikację AWS Amplify, uruchamiając następujące polecenie w terminalu AWS Cloud9:

git clone https://github.com/aws-samples/s3uploader-ui.git

Kiedy tworzysz aplikację, tworzy ona strukturę folderów podobną do poniższego obrazu:

3. Zainstaluj i skonfiguruj interfejs AWS Amplify CLI.

Uwaga: zaleca się uruchomienie tego polecenia z katalogu głównego aplikacji. W tym przykładzie jest to „s3-uploader-ui”. W przypadku następnych kroków, jeśli otrzymasz komunikaty ostrzegawcze o wycofaniu, takie jak „npm WARN przestarzałe”, po prostu je zignoruj. Jeśli pojawi się komunikat taki jak „(node:19991) [DEP0128] Ostrzeżenie o wycofaniu: Nieprawidłowy „główny””, po prostu zignoruj i naciśnij Enter, aby kontynuować.

cd s3uploader-ui

npm install -g @aws-amplify/cli

4. Upewnij się, że AWS Amplify CLI został zainstalowany, wpisując następujące polecenie:

which amplify
Output: ~/.nvm/versions/node/v16.13.1/bin/amplify

Uwaga: w zależności od typu instancji możesz zobaczyć inną wersję.

5. Zainicjuj projekt.

W terminalu AWS Cloud9, w katalogu aplikacji, wpisz polecenie:

amplify init

• Wybierz następujące parametry:
• Wpisz nazwę projektu: s3-uploader-ui (może to być dowolna nazwa; jeśli chcesz, możesz pozostawić domyślne). Naciśnij enter.
• Zainicjuj projekt z powyższą konfiguracją: Tak. Naciśnij enter.
• Wybierz metodę uwierzytelniania, której chcesz użyć: Profil AWS. Naciśnij enter.
• Wybierz profil, którego chcesz użyć: domyślny. Naciśnij enter.

Rysunek 8: Wzmocnij dane wyjściowe init po udzieleniu odpowiedzi na pytania.

Dodawanie uwierzytelniania do aplikacji internetowej

Dodaj uwierzytelnianie Amazon Cognito do aplikacji AWS Amplify za pomocą polecenia amplify add auth.

1. W terminalu AWS Cloud9, w katalogu aplikacji, wpisz polecenie:

amplify add auth

2. Wybierz następujące parametry:

• W polu Czy chcesz używać domyślnej konfiguracji uwierzytelniania i zabezpieczeń? wybierz opcję Konfiguracja domyślna. Naciśnij enter.
• W polu Jak użytkownicy mają się logować? wybierz opcję Nazwa użytkownika. Naciśnij enter, aby potwierdzić.

3. Dla Czy chcesz skonfigurować ustawienia zaawansowane? Wybierz Nie, skończyłem.

Rysunek 9: Widok polecenia amplifikuj dodaj auth po udzieleniu odpowiedzi na pytania.

Dodawanie zasobu pamięci do aplikacji internetowej

W tym kroku tworzysz zasobnik, aby umożliwić uwierzytelnionym użytkownikom przesyłanie plików.

1. W terminalu AWS Cloud9, w katalogu aplikacji, wpisz polecenie: amplify add storage.

2. Wybierz następujące parametry:

• W polu Wybierz jedną z wymienionych poniżej usług wybierz Zawartość (obrazy, audio, wideo itp.). Naciśnij enter, aby potwierdzić.

3. Podaj przyjazną nazwę dla swojego zasobu, która będzie używana do oznaczenia tej kategorii w projekcie - na przykład: s35e505e53 (może to być dowolna nazwa; jeśli chcesz, zaakceptuj wartości domyślne). Naciśnij enter.

4. Podaj nazwę zasobnika. To jest zasobnik, do którego użytkownicy będą przesyłać pliki. Na przykład: s3uploaderxxxxx. Nazwa musi być niepowtarzalna; w przeciwnym razie zaakceptuj sugerowane wartości domyślne i wybierz enter, aby potwierdzić. Zapamiętaj ten zasobnik; użyjesz go później.

• Kto powinien mieć dostęp: Wybierz tylko użytkownicy Auth, użyj klawiszy strzałek, aby przechodzić między opcjami i naciśnij Enter, aby wybrać.
• Jaki rodzaj dostępu chcesz dla uwierzytelnionych użytkowników? Użyj klawisza strzałki, aby wybrać tworzenie/aktualizację, a następnie naciśnij spację, aby go wybrać. Wybierz Enter, aby potwierdzić.
• Czy chcesz dodać Lambda Trigger do swojego zasobnika S3? Wybierz Nie i naciśnij enter, aby potwierdzić.

Rysunek 10: Ekran polecenia amplifikuj dodaj pamięć po udzieleniu odpowiedzi na pytania.

Dodaj hosting dla aplikacji

Dodaj hosting za pomocą polecenia amplify hosting, które tworzy zasobnik do przechowywania statycznej zawartości aplikacji.

1. W terminalu AWS Cloud9, w katalogu aplikacji, wpisz polecenie: amplify hosting add

2. Wybierz następujące parametry:

• W polu Wybierz moduł wtyczki do wykonania wybierz Amazon CloudFront i S3. Naciśnij Enter, aby wybrać.
• W opcji Wybierz konfigurację środowiska wybierz PROD, a następnie naciśnij enter, aby potwierdzić.
• Jako nazwę zasobnika hostingu wybierz s3uploaderui-2022-hostingbucket. Ta nazwa również powinna być unikalna; możesz zaakceptować sugerowaną nazwę. To kolejny zasobnik, który zostanie utworzony automatycznie do obsługi statycznych stron internetowych aplikacji.

Uwaga: Wybranie PROD tworzy dystrybucję CloudFront zapewniającą bezpieczny dostęp do aplikacji przez HTTPS.

Rysunek 11: Wzmocnij dodanie hostingu po udzieleniu odpowiedzi na pytania.

Zainstaluj wszystkie moduły i zależności niezbędne do zainicjowania aplikacji. W terminalu AWS Cloud9, w katalogu aplikacji, wpisz polecenie:

npm install


Rysunek 12: Przykład wyjścia z polecenia npm install

Na poprzednim ekranie właśnie potwierdziłeś, czego potrzebujesz do aplikacji. Aby utworzyć wybrane zasoby w AWS, użyj polecenia amplifikuj push. W terminalu AWS Cloud9, w katalogu aplikacji, wpisz polecenie:

amplify push

Dla Czy na pewno chcesz kontynuować? Wpisz Tak i naciśnij enter, aby potwierdzić.

Uwaga: utworzenie zasobów może zająć kilka minut

Nadszedł czas, aby opublikować aplikację i udostępnić ją publicznie. W tym przykładzie udostępniany jest komponent front-endowy w Amazon S3. Wpisz następujące polecenie w terminalu AWS Cloud9, w katalogu aplikacji:

amplify publish

Uwaga: zanotuj adres URL utworzony na końcu tego polecenia. Będzie to używane do uzyskania dostępu do Twojej aplikacji.

Figure 14: Screen of the command amplify publish output with the application URL.

Testowanie aplikacji

1. W przeglądarce przejdź do publicznego adresu URL, korzystając z wyjściowego adresu URL z poprzedniego polecenia.

Rysunek 15: Ekran logowania po otwarciu adresu URL aplikacji w przeglądarce

2. Zarejestruj użytkowników.

Po przejściu do adresu URL aplikacji zobaczysz tylko przycisk Zaloguj się, aby zalogować się do aplikacji. Ze względów bezpieczeństwa przycisk Zaloguj się jest ukryty, aby nikt nie mógł zarejestrować się jako użytkownik. Jeśli chcesz, aby wszyscy mogli zobaczyć zakładkę rejestracji (Utwórz konto), tak jak na poniższym zrzucie ekranu, wykonaj następujące kroki. W przeciwnym razie, jeśli wolisz pozostawić ukrytą kartę rejestracji, przejdź do kroku 3 (ręczne tworzenie uwierzytelnionych użytkowników).

Rysunek 16: Zaloguj się i Utwórz konto

2.1 W konsoli AWS Cloud9 przejdź do ścieżki folderu: s3-uploader-ui/src/. Otwórz plik css.

 W pliku przejdź do wersu 15, jak pokazano na poniższym ekranie:

Rysunek 17: Wyświetlanie przycisku rejestracji na stronie uwierzytelniania Amazon Cognito

• Usuń ukośniki na początku i na końcu wiersza. Będzie to wyglądać następująco:

Line 15: 
*This CSS hide the signUp tab

• Zapisz plik i użyj następujących poleceń, aby wyświetlić kartę Utwórz konto.

amplify push

amplify publish

Wróć do adresu URL aplikacji i sprawdź, czy widzisz zakładkę Utwórz konto.

Rysunek 18:Zaloguj się i Utwórz konto

3. Ręcznie utwórz uwierzytelnionych użytkowników.

Jeśli chcesz zachować aplikację tylko z interfejsem logowania, możesz dodawać użytkowników za pomocą AWS Management Console. Aby to zrobić, wykonaj następujące kroki:

• Przejdź do konsoli Amazon Cognito i wybierz Zarządzaj zasobami użytkowników. Wybierz pulę użytkowników utworzoną przez AWS Amplify; może zaczynać się od S3uploadxxxxxxx_userpool_xxx-dev.
• W Ustawieniach ogólnych wybierz Użytkownicy i grupy.
• W zakładce Użytkownik wybierz Utwórz użytkownika.
• Wpisz nazwę użytkownika, hasło tymczasowe i e-mail. Odznacz pole obok opcji Oznacz numer telefonu jako zweryfikowany?

Rysunek 19: Utwórz użytkownika z konsoli Amazon Cognito

4. Zaloguj się do aplikacji internetowej.

Po zarejestrowaniu nowego użytkownika w aplikacji, zaloguj się przy użyciu utworzonych wcześniej poświadczeń.

Po zalogowaniu się do aplikacji zobaczysz interfejs użytkownika z przyciskiem Wybierz plik(i). Wybierz ten przycisk i co najmniej jeden plik do przesłania. Po wybraniu plików kliknij Prześlij, aby wysłać te pliki do S3.

Rysunek 20: Aplikacja internetowa z wybranymi wieloma plikami.

Uwaga: interfejs nie przeprowadza żadnej weryfikacji plików pod względem rozmiaru ani typu, ale możliwe jest dostosowanie rozwiązania, aby uwzględnić dodatkową weryfikację danych przed ich przesłaniem do Amazon S3.

Aby sprawdzić, czy przesłane pliki były przechowywane w zasobniku S3, najpierw przejdź do Konsoli zarządzania AWS i wybierz usługę Amazon S3. Wybierz zasobnik utworzony przez aplikację AWS Amplify do hostowania Twoich plików. Jest to zasobnik utworzony w kroku 4 tego artykułu („Dodawanie zasobu pamięci masowej do aplikacji internetowej”).

Rysunek 21: Konsola zarządzania AWS pokazująca obiekty S3

Uwaga: jeśli zapomniałeś zanotować nazwę zasobnika, możesz ją znaleźć w danych wyjściowych CloudFormation wygenerowanych przez AWS Amplify.

• Przejdź do konsoli AWS CloudFormation. W lewym rogu wybierz Stosy.
• Włącz Widok zagnieżdżony, jak na poniższym ekranie:

Rysunek 22: Włączanie stosu widoków

• Dla projektu zostaną utworzone cztery stosy. Wszystkie mają te same inicjały. Wybierz te, które mają w nazwie „pamięć”. Na przykład (amplify-s3uploaderui-dev-151739-storages).
• Przejdź do zakładki Outputs w wybranym stosie. Wartość BucketName w stosie to miejsce, w którym przesyłane są pliki.
• Teraz, gdy znasz nazwę zasobnika, uzyskaj dostęp do zasobnika S3 w konsoli zarządzania AWS, aby sprawdzić przesłane pliki.

Rysunek 23: Zasobnik, w którym zapisywane są przesłane pliki.

Porządkowanie

Po zakończeniu tego rozwiązania instruktażowego możesz usunąć swoją aplikację AWS Amplify, jeśli nie będziesz już jej używać.

Uwaga: tej czynności nie można cofnąć. Po usunięciu projektu nie można go odzyskać. Jeśli będziesz potrzebować go ponownie, musisz wdrożyć go od nowa.

 1. Aby usunąć aplikację z AWS, uruchom z terminala następujące polecenie:

amplify delete



Rysunek 24: Powyższy ekran wyświetla wyniki polecenia amplifikuj usuwanie

2. Usuń instancję AWS Cloud9.

Wnioski

W tym artykule pokazano, jak zbudować aplikację bezserwerową do obsługi przesyłania plików do Amazon S3 przez użytkowników zewnętrznych. Korzystając z zaledwie kilku usług AWS, takich jak AWS Amplify, Amazon S3, Amazon CloudFront i Amazon Cognito, możesz łatwo zbudować aplikację internetową do bezpiecznego przechowywania plików w Amazon S3. Rozwiązanie zapewnia uwierzytelniony dostęp przy użyciu hostowanego interfejsu użytkownika do logowania i rejestracji użytkowników, zbudowanego przy użyciu interfejsu użytkownika hostowanego przez Amazon Cognito.

Dzięki temu rozwiązaniu problemy związane z konserwacją i skalowalnością można zastąpić usługami zarządzanymi w szybki i bezpieczny sposób. Możesz zapewnić użytkownikom zewnętrznym łatwy i bezpieczny sposób na umieszczanie ich plików w zasobnikach S3, a wszystko to bez zapewniania im dostępu do zasobników. Może to pomóc w zmniejszeniu zagrożenia jakimikolwiek naruszeniami bezpieczeństwa, jednocześnie umożliwiając korzystanie z danych zewnętrznych w celu realizacji celów biznesowych lub spełnienia wymagań biznesowych.

źródło: AWS