= Розміщення програми React за допомогою AWS за 30 хвилин =
Цей підручник дуже важкий і орієнтований на повних початківців. Тут пояснюється, як ви можете розмістити свою програму React на веб-сайті з повною системою авторизації. Він використовує потужність AWS MobileHub через CLI (інтерфейс командного рядка) Mobilehub. Підручник не потребує навичок роботи з сервісами AWS, а також покаже, як налаштувати шаблонну програму React.
Якщо у вас вже є програма React,
**ви можете перейти до розділу 2, де ми встановимо awsmobile-cli та додамо його до нашої програми
= Перш ніж почати, нам потрібно налаштувати кілька речей на вашому комп’ютері =
**На вашому комп’ютері встановлено середовище Node 8.x**
- Це середовище виконання для серверів програм Javascript. Це слідує з менеджером пакетів вузлів (NPM).
- NPM використовується для встановлення пакетів вузлів, таких як React, AWS Amplify, пакет конектора AWS-JS, і це, по суті, усе.
- httpsnodejs.org/en/download/
**Обліковий запис безкоштовного рівня AWS
- Ви отримуєте безкоштовний доступ до Сервісів AWS через Free Tier. Для цього підручника цього має бути більш ніж достатньо. Однак пам’ятайте, що кожна служба має обмеження на використання щомісяця, і це може коштувати вам реальних грошей.
- httpsaws.amazon.com/free/
**Установіть AWS CLI (інтерфейс командного рядка), щоб викликати служби AWS безпосередньо з вашої консолі** **Для цього курсу ми будемо використовувати підтримуваний шаблон від Facebook, творців React **Редактор на ваш вибір
- Я пропоную почати з Visual Studio Code, легкого редактора з можливістю модифікації, який може запускати більшість мов програмування та фреймворків.
Професійна порада: у процесі інсталяції VS Code обов’язково встановіть прапорець, який додає його до імен шляхів середовища. Це дає вам доступ до відкриття VS Code з терміналу, ввівши âÃÂÃÂcode filename.jsâÃÂàабо âÃÂà Âcode .âÃÂàдля всього проекту, у якому ви перебуваєте. **Термінал, у якому ви перебуваєте Вам комфортно в
- Більшість розробників повинні мати встановлений Git на своєму комп’ютері. Це дає вам доступ до терміналу Git Bash, який використовують багато розробників.
Давайте почнемо!
**1. Створіть додаток React і увійдіть до папки проекту через термінал**
Увійдіть у термінал і знайдіть папку, де зберігаються програми. Я пропоную папку з назвою âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app назва проекту&& назва проекту cd
або
npm -g install create-react-app create-react-app назва проекту
Тут ми створюємо додаток React на основі шаблону. âÃÂÃÂnpxâÃÂà— це інструмент Node, який використовує сервер npm для виклику віддалених пакетів. Другий фрагмент коду встановлює create-react-app локально за допомогою
*npm -g install create-react-app* **а потім створює додаток. Я пропоную використовувати npx, щоб завжди бути в курсі create-react-app, а потім створює додаток. Я пропоную використовувати npx, щоб завжди бути в курсі create-react-app. **2. Встановіть awsmobile CLI на свій комп’ютер і запустіть його в проекті**
З цього моменту вам слід звернути увагу на додаток React у вашому редакторі коду. Будуть додані папки, такі як /awsmobile, і деякі доповнення до файлу package.json.
У вікні терміналу введіть
npm install -g awsmobile-cli
щоб установити awsmobile-cli глобально. Ми скористаємося цим після певної роботи в консолі AWS Mobile Hub.
Переконайтеся, що ви знаходитесь у своєму проекті та введіть
awsmobile ініціал
Вам буде запропоновано набір запитань, у яких параметри за замовчуванням прийнятні, тож натискайте клавішу Enter для кожного параметра, доки він автоматично не відкриє AWS у вашому браузері за умовчанням. Увійдіть за допомогою облікового запису Free Tier, якщо ви цього ще не зробили.
Це гарантує awsmobile-cli, що ми підключені до правильного облікового запису AWS. Поверніться до терміналу та натисніть Enter, щоб продовжити.
AWS потрібно налаштувати користувача для керування програмою. Це буде зроблено автоматично awsmobile-cli, коли ви продовжуєте натискати enter.
Виконавши це, ви перейдете до AWS IAM, де ви просто перейдете далі. ¢ÃÂàваш шлях до повноти! На другому кроці він мав автоматично перевірити «Доступ адміністратора», який надає користувачеві доступ до всіх необхідних функцій AWS.
Коли завершите, дуже важливо завантажити файл .csv із вашими секретними обліковими даними, оскільки вони відображатимуться в AWS лише один раз. Ці ключі слід використовувати в наступних кроках у вікні терміналу.
Це успішно створить вашу програму AWS MobileHub і автоматично встановить aws-amplify& aws-amplify-react у ваш локальний проект React
Коли цей процес буде завершено (~1 хв), ви можете друкувати
консоль awsmobile
щоб побачити програму Mobile Hub у браузері за умовчанням. Ви також можете ввести âÃÂÃÂawsmobileâÃÂÃÂ, щоб переглянути список різних дій. Звідси ми додамо Cognito Login із браузером, але ви можете зробити це з awsmobile CLI.
**3. Фактично додаємо вхід Cognito та хостинг**
Для останнього кроку ми додамо AWS Cognito до нашого проекту через консоль AWS MobileHub. Ви також можете перевірити Хостинг, який уже ввімкнено за замовчуванням.
Щоб перевірити хостинг, клацніть функцію на консолі та клацніть URL-адресу, яку ви надали. Вміст тут є шаблоном від AWS, але ви незабаром перезапишете його за допомогою програми React.
**Щоб додати вхід користувача Cognito, прокрутіть униз, щоб знайти âÃÂÃÂUser Sign-inâÃÂàі клацніть його. **Це вмикає пули користувачів Cognito із системою автентифікації. Використовуйте âÃÂÃÂEmailâÃÂàз адреси електронної пошти або номера телефону, щоб використовувати електронну адресу як ім'я користувача під час входу. Або ви можете використати ім’я користувача та ввімкнути âÃÂÃÂЕлектронна поштаâÃÂà+ âÃÂÃÂІм'я користувачаâà ÂÃÂ, щоб користувач міг вибрати. Ви отримаєте код підтвердження електронною поштою в будь-якому випадку.
Ми приймаємо електронну пошту, тому що AWS не стягує плату за надсилання кодів підтвердження реєстрації на електронну пошту, тоді як надсилання SMS коштує реальних грошей.
Що призводить до:
Якщо ви натиснете «Дія» >«Редагувати» в Cognito, ви побачите консоль Cognito для керування своїми користувачами та розширеними функціями безпеки. Деякі налаштування, які ви зробили на цьому кроці, не можна відмінити, але ви завжди можете видалити свій пул користувачів і створити новий.
На цьому налаштування AWS Cognito в MobileHub завершено. Настав час додати код. Скільки? 5 рядків! І 3 з них є лише імпортованими в React.
= Додавання ваших налаштувань до проекту React і публікація на вашому веб-сайті =
У вашому терміналі ви можете в будь-який час використовувати awsmobile pull або awsmobile push, щоб відповідно перенести ваші зміни з онлайн-консолі AWS MobileHub у вашу програму, або перенести ваші локальні зміни, внесені через awsmobile CLI в терміналі.
Для цього випадку використання ми хочемо отримати внесені зміни. Поверніться до свого терміналу та введіть
Повернувшись до VS Code, ви побачите, що ваш проект зараз змінено. Ви можете перевірити свої локальні конфігурації в ./awsmobile/backend/mobile-hub-project.yml
Крім того, у ./package.json ви знайдете дві виділені бібліотеки, додані awsmobile init, що ми робили раніше.
Тепер ми використовуватимемо їх, щоб загорнути нашу програму у вікно входу Cognito. Відкрийте ./src/index.js і змініть це:
до цього:
імпорт React з 'react';
імпорт ReactDOM з 'react-dom';
імпорт index.css';
імпорт програми з програми';
імпорт registerServiceWorker з registerServiceWorker';
імпорт awsMobile з aws-exports';
імпортувати Amplify з 'aws-amplify';
import { withAuthenticator } from "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
