= Hostowanie aplikacji React z AWS w 30 minut =
Ten samouczek jest bardzo obrazowy i skierowany do całkowicie początkujących. Wyjaśnia, w jaki sposób możesz hostować swoją aplikację React na stronie internetowej z kompletnym systemem autoryzacji. Przywołuje moc AWS MobileHub poprzez Mobilehub CLI (Interfejs wiersza poleceń). Samouczek nie wymaga żadnych umiejętności z usługami AWS, a także pokaże, jak skonfigurować aplikację szablonową React.
Jeśli masz już aplikację React,
**możesz przejść do sekcji 2, w której instalujemy awsmobile-cli i dodajemy go do naszej aplikacji
= Zanim zaczniemy, musimy skonfigurować kilka rzeczy na twoim komputerze =
**Środowisko Node 8.x zainstalowane na Twoim komputerze**
- To jest środowisko wykonawcze dla serwerów aplikacji Javascript. Wynika to z menedżera pakietów węzłów (NPM).
- NPM służy do instalowania pakietów węzłów, takich jak React, AWS Amplify, pakiet konektorów AWS-JS i to w zasadzie wszystko.
- httpsnodejs.org/en/download/
**Konto bezpłatnego poziomu AWS
- Otrzymujesz bezpłatny dostęp do usług AWS w ramach Free Tier. W przypadku tego samouczka powinno to wystarczyć. Pamiętaj jednak, że każda usługa ma limit użytkowania w każdym miesiącu, a to może kosztować prawdziwe pieniądze.
- httpsaws.amazon.com/free/
**Zainstaluj AWS CLI (interfejs wiersza poleceń), aby wywoływać usługi AWS bezpośrednio z konsoli** **W tym kursie użyjemy szablonu serwisu Facebook, twórców React **Wybrany przez Ciebie edytor
- Sugeruję zacząć od Visual Studio Code, wysoce modyfikowalnego lekkiego edytora, który może obsługiwać większość języków programowania i frameworków.
Wskazówka: w procesie instalacji VS Code upewnij się, że zaznaczono pole, które dodaje go do nazw ścieżek środowiska. Daje to dostęp do otwartego kodu VS z terminala, wpisując âÃÂÃÂcode filename.jsâÃÂàlub âÃÂà Âkod .âÃÂàdla całego projektu, w którym uczestniczysz. **Terminal, w którym jesteś Czujesz się komfortowo
- Większość programistów powinna mieć zainstalowanego Gita na swoim komputerze. Daje to dostęp do Git Bash, z którego korzysta wielu programistów.
Zaczynajmy!
**1. Utwórz aplikację React i wejdź do folderu projektu przez terminal**
Wejdź do terminala i zlokalizuj folder, w którym przechowujesz aplikacje. Sugeruję folder o nazwie âÃÂÃÂdevâÃÂÃÂ.
npx utwórz-reaguj-aplikacja-nazwa-projektu&& cd nazwa-projektu
lub
npm -g install create-react-app create-react-app nazwa-projektu
Tutaj tworzymy aplikację React opartą na szablonie. âÃÂÃÂnpxâÃÂàto narzędzie Node, które używa serwera npm do wywoływania zdalnych pakietów. Drugi fragment kodu instaluje lokalnie aplikację create-react-app
*npm -g install create-react-app* **a następnie tworzy aplikację. Sugeruję używanie npx, aby zawsze być na bieżąco z aplikacją create-react-a następnie tworzy aplikację. Sugeruję używanie npx, aby zawsze być na bieżąco z aplikacją create-react-app. **2. Zainstaluj awsmobile CLI na swoim komputerze i uruchom go w projekcie**
Od tego momentu powinieneś zwracać uwagę na swoją aplikację React w swoim edytorze kodu. Zostaną dodane foldery, takie jak /awsmobile i niektóre dodatki do pliku package.json.
W oknie terminala wpisz
npm install -g awsmobile-cli
zainstalować globalnie awsmobile-cli. Użyjemy tego po wykonaniu pewnych prac w konsoli AWS Mobile Hub.
Upewnij się, że jesteś w swoim projekcie i wpisz
awsmobile init
Zostaniesz poproszony o zestaw pytań, w których wartości domyślne są dobre, więc naciskaj enter przez każde ustawienie, aż automatycznie otworzy się AWS w domyślnej przeglądarce. Zaloguj się na swoje konto Free Tier, jeśli jeszcze tego nie zrobiłeś.
Zapewnia to awsmobile-cli, że jesteśmy połączeni z właściwym kontem AWS. Wróć do terminala i naciśnij Enter, aby kontynuować.
AWS musi skonfigurować użytkownika do kontrolowania aplikacji. Zostanie to zrobione automatycznie przez awsmobile-cli, gdy będziesz nadal naciskać enter.
Po wykonaniu tej czynności zostaniesz przeniesiony do AWS IAM, gdzie po prostu „Dalej” ¢ÃÂàswoją drogę do kompletności! W drugim kroku powinien automatycznie zaznaczyć âÃÂÃÂAdministrator AccessâÃÂÃÂ, który daje Użytkownikowi dostęp do wszystkich potrzebnych nam funkcji AWS.
Po zakończeniu bardzo ważne jest pobranie pliku .csv z tajnymi danymi uwierzytelniającymi, ponieważ będą one wyświetlane tylko raz w AWS. Te klucze będą używane w kolejnych krokach okna terminala.
Spowoduje to pomyślne utworzenie aplikacji AWS MobileHub i automatyczną instalację aws-amplify& aws-amplify-react do lokalnego projektu React
Po zakończeniu tego procesu (~1 min) możesz pisać
konsola awsmobile
aby wyświetlić aplikację Mobile Hub w domyślnej przeglądarce. Możesz także wpisać âÃÂÃÂawsmobileâÃÂÃÂ, aby wyświetlić listę różnych działań. Odtąd dodamy Logowanie Cognito za pomocą przeglądarki, ale możesz to zrobić z interfejsu CLI awsmobile.
**3. Właściwie dodawanie logowania i hostingu Cognito**
W ostatnim kroku dodamy AWS Cognito do naszego projektu za pośrednictwem konsoli AWS MobileHub. Możesz także sprawdzić Hosting, który jest już domyślnie włączony.
Aby przetestować Hosting, kliknij funkcję w konsoli, a następnie kliknij podany adres URL. Treść tutaj jest szablonem AWS, ale wkrótce nadpiszesz go aplikacją React.
**Aby dodać Logowanie użytkownika Cognito, przewiń w dół, aby znaleźć âÃÂÃÂLogowanie użytkownikaâÃÂài kliknij to. **Umożliwia to korzystanie z pul użytkowników Cognito z systemem uwierzytelniania. Użyj âÃÂÃÂE-mailâÃÂàz adresu e-mail lub numeru telefonu, aby wymusić adres e-mail jako nazwę użytkownika podczas logowania. Lub możesz użyć nazwy użytkownika i włączyć opcję âÃÂÃÂE-mailâÃÂà+ âÃÂÃÂNazwa użytkownikaâà Âàaby umożliwić użytkownikowi wybór. Tak czy inaczej otrzymasz kod potwierdzający e-mailem.
Akceptujemy e-maile, ponieważ AWS nie pobiera opłat za wysyłanie kodów potwierdzających rejestrację na e-mail, podczas gdy wysyłanie SMS-ów kosztuje prawdziwe pieniądze.
Co skutkuje w:
Jeśli klikniesz Akcja >Edytuj w Cognito, zobaczysz konsolę Cognito do zarządzania użytkownikami i zaawansowanymi funkcjami bezpieczeństwa. Niektóre ustawienia wykonane w tym kroku są nieodwracalne, ale zawsze możesz usunąć swoją pulę użytkowników i utworzyć nową.
To kończy konfigurację AWS Cognito wewnątrz MobileHub. Czas dodać kod. Jak dużo? 5 linii! A 3 z nich to tylko import w React.
= Dodanie ustawień do projektu React i opublikowanie na Twojej stronie internetowej =
W swoim terminalu możesz w dowolnym momencie użyć awsmobile pull lub awsmobile push, aby odpowiednio pobrać zmiany z konsoli AWS MobileHub online do swojej aplikacji lub wypchnąć lokalne zmiany dokonane przez awsmobile CLI w terminalu.
W tym przypadku chcemy pobrać wprowadzone przez nas zmiany. Wróć do terminala i wpisz
Po powrocie do VS Code zobaczysz, że Twój projekt został zmodyfikowany. Możesz sprawdzić swoje lokalne konfiguracje w ./awsmobile/backend/mobile-hub-project.yml
Ponadto w ./package.json znajdziesz dwie podświetlone biblioteki dodane przez awsmobile init, co zrobiliśmy wcześniej.
Teraz użyjemy ich do zawinięcia naszej aplikacji w okno logowania Cognito. Otwórz ./src/index.js i zmodyfikuj to:
do tego:
importuj reakcję z „reaguj”;
zaimportuj ReactDOM z „react-dom”;
importuj index.css';
importuj aplikację z aplikacji”;
importuj registerServiceWorker z registerServiceWorker';
importuj awsMobile z aws-exports';
importuj wzmocnienie z „aws-wzmacniaj”;
zaimportuj { withAuthenticator } z „aws-amplify-react”Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
