= Jak używać AWS Amplify do wdrażania aplikacji React =
== Przewodnik po wdrażaniu React Applications z AWS Amplify ==
Odkąd zacząłem konsultować się jako inżynier oprogramowania, chciałem stworzyć witrynę z portfolio, która prezentuje
projekty osobiste i zawodowe, nad którymi pracowałem. Tej przerwy zimowej spędziłem czas projektując, rozwijając i wdrażając moją witrynę z portfolio, aw tym artykule przeprowadzę Cię przez proces wdrażania jej z AWS Amplify. Witrynę można obejrzeć pod adresem dan-murphy.com, a kod w serwisie GitHub.
= Krótkie tło =
Większość mojej pracy zawodowej polega na budowaniu aplikacji opartych na danych i usprawnianiu potoków danych. Aby wykonać te zadania, regularnie używam Pythona i Ruby oraz włączam JavaScript do wszelkich prac frontendowych. Aby lepiej poznać Reacta, zdecydowałem się użyć tego frameworka do zbudowania mojej strony z portfolio.
= Konfigurowanie aplikacji =
Pierwszym krokiem, jaki podjąłem, było podjęcie decyzji, jak ustrukturyzować aplikację. wykorzystałem
create-react-app jako podstawowy szablon dla moich katalogów, a następnie zreorganizowałem aplikację, dodając kilka dodatkowych folderów. Gotowa konfiguracja wygląda następująco:
źródło
składniki
Archiwa
âÃàdodatki
¢ÃÃÂdane
âÃÃÂimgs
strony
¢ÃÃÂspis
¢ÃÃÂdane
style
testy
armatura
Niektóre z godnych uwagi zmian to
**składniki**
, oraz
**strony**
katalogi.
**style**
,
: Tutaj przechowuję wszystkie komponenty aplikacji. Przechowywanie komponentów w scentralizowanym folderze ułatwia ponowne użycie i refaktoryzację mojego kodu oraz jest bardziej intuicyjne dla innych do zrozumienia. Niektóre elementy, które składają się na moją witrynę z portfolio, to
składniki
Nagłówek,
Stopka i
Pasek boczny projektu.
: W tym miejscu tworzę odrębne strony dla aplikacji. Importuję potrzebne komponenty z
strony
folder, a następnie agregować je w celu zaprojektowania strony. Oto przykład, jak to zrobiłem dla
strona główna komponentów:
: Tutaj definiuję globalne style CSS dla aplikacji. Uwielbiam używać
style
styled-components dla poszczególnych komponentów, ale odkryłem również, że przydatne jest tworzenie globalnych stylów, które są dostępne dla każdej strony.
Na koniec, aby zmapować żądania na odpowiednie strony, używamy
reaguj-router-dom. Trasy są określone w
Plik App.js, jak pokazano poniżej:
Spowoduje to zmapowanie
Strona główna,
/projekcje żądań do
ProjektyStrona,
/o prośbach do
O stronie i
/prośby o półkę na książki do
Strona książki. Teraz, gdy rozwój aplikacji jest zakończony, musimy ją wdrożyć, aby inni mogli z niej korzystać!
/prośby do
= Wdrażanie za pomocą AWS Amplify =
== Przegląd ==
Istnieje kilka sposobów wdrożenia witryny React, ale odkryłem, że jednym z najprostszych jest użycie
**AWS Amplify Amplify jest opisywane jako „najszybszy i najłatwiejszy sposób tworzenia skalowalnych aplikacji mobilnych i internetowych”. Aby to osiągnąć, AWS ekstrapoluje wszystkie komplikacje związane z konfiguracją serwera, instalacją zależności i tworzeniem wersji produkcyjnej Twojej witryny, pozwalając Ci skupić się wyłącznie na budowaniu intuicyjnego UX. Aby dowiedzieć się więcej o tym, co AWS Amplify oferuje dla aplikacji opartych na danych (w szczególności stron internetowych z **frontendem** i **backendem), zapoznaj się z ich dokumentacją.
== Łączenie twojego repozytorium ==
Aby hostować swoją aplikację internetową w AWS Amplify, musisz najpierw połączyć repozytorium zawierające kod źródłowy. Aby to zrobić, możesz przejść do
*AWS Amplify* *Pierwsze kroki* **Hostuj moją aplikację internetową i kliknij **Połącz repozytorium aplikacji *stronę, przewiń do*strony, przewiń do 
Następnie zostaniesz przekierowany na oddzielną stronę, na której możesz podłączyć repozytorium zawierające Twój kod źródłowy. W tym przykładzie wybiorę GitHub, ale AWS Amplify obsługuje również BitBucket, GitLab, AWS CodeCommit, a nawet wdrażanie bez dostawcy Git.
Po udanej autoryzacji możesz wybrać repozytorium, które chcesz wdrożyć, i wybrać gałąź, której AWS Amplify ma używać do kompilacji produkcyjnych.
Następnie kliknij
**Next** i AWS poprosi o skonfigurowanie ustawień *kompilacji* i *testu*. Podstawowy szablon udostępniany przez AWS pokazano poniżej.
wersja 1
nakładka:
fazy:
prekompilacja:
polecenia:
- npm zainstaluj kompilację:
polecenia:
- npm uruchom kompilację
artefakty:
Bazowy katalog: kompilacja
pliki:
-
Pamięć podręczna:
ścieżki:
-moduły_węzłów
Dodatkowo pod
**zaawansowane ustawienia** przełączają, możesz ustawić zmienne środowiskowe i niestandardowy kontener kompilacji.
Na koniec, po przejrzeniu ustawień aplikacji, kliknij
**Zapisz i wdróż **i **AWS rozpocznie konfigurowanie i wdrażanie Twojej aplikacji. Po zakończeniu wdrażania AWS możesz przejść do strony głównej Amplify i zobaczyć, jak nowo wdrożona aplikacja AWS rozpocznie konfigurowanie i wdrażanie Twojej aplikacji. Po zakończeniu wdrażania AWS możesz przejść do strony głównej Amplify i zobaczyć swoją nowo wdrożoną aplikację.
Teraz dostosujmy adres URL za pomocą
**AWS Wzmocnij zarządzanie domeną
== Dodawanie domeny niestandardowej ==
Aby rozpocząć dodawanie domeny niestandardowej, przejdź do lewego paska bocznego i wybierz
**zarządzanie domenami
**zarządzanie domeną**ustawienie.
Następnie wybierz
**dodaj domenę **skonfiguruj domenę **wprowadź nazwę swojej domeny (jak pokazano poniżej) i kliknij **wprowadź nazwę swojej domeny (jak pokazano poniżej) i kliknij 
Następnie możesz skonfigurować przekierowania, które są niezbędne dla Twojej domeny. Na przykład w poniższym przykładzie tworzę przekierowanie z httpsdan-murphy.com do httpswww.dan-murphy.com.
Na koniec, po poprawnym skonfigurowaniu domeny niestandardowej, AWS dostarczy Ci
**Certyfikat walidacyjny Możesz również wyświetlić ten certyfikat w konsoli Menedżera certyfikatów AWS.
== Dodawanie rekordu CNAME ==
Ostatnim krokiem w konfigurowaniu domeny niestandardowej jest dodanie rekordu CNAME. W poniższym przykładzie używam Google Domains, ale podstawowe pojęcia pozostają takie same w przypadku różnych rejestratorów domen.
Najpierw przewiń w dół do
**Niestandardowe rekordy zasobów** w Google Domains. Utwórz rekord *CNAME *, który wskazuje wszystkie subdomeny na domenę AWS Amplify: Nazwa: wprowadź nazwę subdomeny. Jeśli subdomena to www.domena.com, wprowadź . Jeśli jest to www app.domain.com, wpisz app. Dane: na stronie zarządzania domeną kliknij Czynności, a następnie wybierz Wyświetl rekordy DNS. Następnie wprowadź domenę AWS Amplify dostępną w Konfiguruj dostawcę DNS. 
Strona **Zarządzanie domenami**, wybierz **Akcje **Wyświetl rekordy DNS**
W sumie niestandardowy rekord zasobu będzie wyglądał następująco:
Następnie dodaj jeszcze jeden
Rekord *CNAME* wskazujący serwer sprawdzania poprawności Menedżera certyfikatów AWS. Zwalidowany Menedżer certyfikatów AWS obsługuje protokół TLS dla Twojej aplikacji: Nazwa: wprowadź subdomenę serwera weryfikacyjnego. Jeśli rekord DNS służący do weryfikacji własności Twojej domeny to _1234.example.com, wpisz tylko _1234. Dane: wprowadź certyfikat walidacji ACM. Jeśli serwer sprawdzania poprawności to _1234.abcdefg.acm-validations.aws., wprowadź _1234.abcdefg.acm-validations.aws.
Wszystkie informacje dotyczące Twoich certyfikatów walidacyjnych znajdują się w konsoli Menedżera certyfikatów AWS. Po drugim
Dodano *CNAME*, Twoje niestandardowe rekordy powinny wyglądać tak: 
Na koniec dodajmy
**Rekord syntetyczny**, aby skonfigurować przekierowanie subdomeny: Subdomena: wprowadź adres URL domeny: www. 
= Podsumowanie =
Ogólnie rzecz biorąc, w tym artykule dowiedzieliśmy się, jak ustrukturyzować aplikacje React i wdrożyć je za pomocą AWS Amplify. Najpierw omówiliśmy, jak zmodularyzować aplikację reagującą
*komponenty* *strony* foldery. Następnie dowiedzieliśmy się o **AWS Amplify** i o tym, jak za jego pomocą wdrażać aplikacje statyczne i oparte na danych. Na koniec dowiedzieliśmy się, jak używać **AWS Amplify Domain Management** i **Google Domains **do dostosowywania domeny naszej aplikacji. **i i
Jeśli masz jakieś pytania, wątpliwości lub opinie na temat tego artykułu lub mojej witryny z portfolio, napisz do mnie w komentarzu lub napisz do mnie na adres
*
[email protected]*. Dziękuje za przeczytanie!
