= Wdróż aplikacje React na Amazon S3 =

== 5-minutowy przewodnik dotyczący wdrażania aplikacji React z S3 ==

![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

Ukończyłeś swoją aplikację React i chcesz ją gdzieś hostować. Czy wiesz, że możesz używać Amazon AWS S3 do hostowania swoich aplikacji React? Jest stosunkowo łatwy, tani i szybki we wdrożeniu.

= Zacznijmy! =

== Wymagania wstępne ==

Zanim przejdziemy do hostingu, wykonajmy konfigurację administracyjną. Upewnij się, że wykonano następujące czynności:

**Masz konto AWS Załóż konto AWS tutaj: httpsaws.amazon.com/resources/create-account/ **Utwórz użytkownika AWS W konsoli AWS przejdź do zakładki IAM i przejdź do à Sekcja „Użytkownicy” na pasku bocznym.

Kliknij âÃÂÃÂDodaj użytkownikaâÃÂài zaznacz âÃÂÃÂDostęp programowyâàÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

Kliknij âÃÂÃÂDalej: UprawnieniaâÃÂài tutaj wybierz âÃÂÃÂDołącz istniejące zasady bezpośrednio... Ã. Zaznacz opcję „AdministratorAccess” w celu wdrożenia.

![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

Kliknij przyciski Dalej i na koniec kliknij âÃÂÃÂUtwórz użytkownikaâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)

W ostatnim kroku otrzymujemy Identyfikator klucza dostępu oraz Klucz dostępu Tajny. Pobierz i

**zapisz je na swoim komputerze, ponieważ będą potrzebne później

== Zainstaluj AWS CLI ==

AWS CLI to potężne narzędzie, które może pomóc nam uprościć proces wdrażania.

Zainstalujmy AWS CLI przy użyciu Homebrew (dla macOS). Zainstaluj Homebrew, jeśli jeszcze tego nie zrobiłeś.

*Uwaga: jeśli używasz systemu Windows, możesz znaleźć instrukcje w oficjalnych dokumentach * *tutaj*

Otwórz swój terminal i wprowadź

napar zainstaluj awscli.

Po zainstalowaniu narzędzia CLI możemy skonfigurować nasze konto AWS

konfiguracja aws. W tym miejscu należy wprowadzić wcześniej pobrane informacje o kluczu dostępu. Powinno być coś takiego jak poniżej.

W przypadku regionu możesz sprawdzić swój adres URL w konsoli AWS i będzie on wspominał o twoim regionie. Na przykład mój to âÃÂÃÂap-southeast-1âÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= Tworzenie aplikacji React =

Być może Twoja aplikacja React jest już gotowa do wdrożenia. Jeśli jednak potrzebujesz przykładowej aplikacji, możesz skorzystać z następujących opcji:

- Wygeneruj szablonową aplikację React, uruchamiając

npx utwórz-reaguj-aplikację moja-aplikacja

- Pobierz moją przykładową aplikację React (z przykładem formularza) z httpsgithub.com/harishv7/react-hook-form-example. Zrobiono to na potrzeby samouczka dodawania formularzy do aplikacji React. Sprawdź to tutaj.

Po zakończeniu upewnij się, że wszystkie zależności są zainstalowane za pomocą

zainstalować przędzę i uruchomić aplikację za pomocą

początek przędzy.

= Skonfiguruj wiadro S3 =

Teraz, gdy mamy już gotową przykładową aplikację, skonfigurujmy wiadro S3 do hostowania naszej aplikacji.

W konsoli AWS wyszukaj âÃÂÃÂS3âÃÂài przejdź do S3 Dashboard. Kliknij âÃÂÃÂUtwórz zasobnikâÃÂài nadaj zasobnikowi nazwę, taką jak âÃÂÃÂmy-react -app-2021âÃÂà(lub cokolwiek innego, co chcesz).

*Uwaga: Nazwa zasobnika musi być unikalna w całym S3. Wybierz unikalną nazwę, która nie istnieje, w przeciwnym razie pojawi się błąd!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

Włącz publiczny dostęp do zasobnika, ponieważ udostępniamy go na żywo.

![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

Pozostaw pozostałe ustawienia bez zmian i kliknij opcję Utwórz zasobnik. Na pulpicie nawigacyjnym S3 zobaczysz wpis podobny do poniższego.

![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

Kliknijmy i przejdźmy do naszego nowo utworzonego segmentu S3.

![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

Kliknijmy na âÃÂÃÂWłaściwościâÃÂài przewiń do końca, gdzie będziesz zobacz âÃÂÃÂHosting statycznej strony internetowejâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

Kliknij âÃÂÃÂWłączâÃÂài wpisz âÃÂÃÂindex.htmlâààw dokumencie indeksu.

![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

Pozostaw pozostałe pola bez zmian i kliknij âÃÂÃÂZapisz zmianyâÃÂÃÂ.

= Wdrażanie do S3 =

Teraz jesteśmy gotowi do wdrożenia naszej aplikacji w S3. Sposobem na to jest użycie następującego polecenia CLI:

aws s3 sync build/s3your-bucket-name>--acl public-read
Możemy również dodać to polecenie do naszego pliku package.json jako skrypt âÃÂÃÂdeployâÃÂÃÂ.

![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

Zbudujmy naszą aplikację przy użyciu

budowa przędzy, która pomaga stworzyć zoptymalizowaną konstrukcję produkcyjną.

Następnie uruchommy polecenie CLI podane powyżej lub jeśli skonfigurowałeś skrypt publikowania w package.json, możemy użyć

rozmieszczenie przędzy.

![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

To wszystko, nasza aplikacja jest już wdrożona!

Aby dowiedzieć się, gdzie jest hostowana nasza aplikacja (link do strony internetowej), przejdź do konsoli AWS S3 i kliknij utworzone wiadro.

Przejdź do zakładki „Właściwości” i przewiń w dół do strony „Statyczna” hostingâÃÂài będzie tam nasz adres URL.

![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

Kliknij go, a aplikacja otworzy się w nowej karcie. Oto moja!

![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

= Wniosek =

Pomyślnie wdrożyliśmy naszą aplikację React na Amazon S3! To świetny wybór do szybkiego wdrażania i testowania prototypów React oraz udostępniania ich innym. Jest również bardzo łatwy i szybki do wdrożenia.

Mam nadzieję, że ten samouczek był dla Ciebie przydatny!

Miłego kodowania! ÃÂÃÂÃÂû

*Więcej treści na * *plainenglish.io*