= Размещение приложения 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 в рамках уровня бесплатного пользования. Для этого урока этого должно быть более чем достаточно. Однако имейте в виду, что каждый сервис имеет ограничение на использование каждый месяц, и это может стоить вам реальных денег.
- httpsaws.amazon.com/free/
**Установите AWS CLI (интерфейс командной строки), чтобы вызывать сервисы AWS непосредственно с консоли** **В этом курсе мы будем использовать поддерживаемый шаблон от Facebook, создателей React **Редактор на ваш выбор
- Я предлагаю начать с Visual Studio Code, облегченного редактора с широкими возможностями модификации, который может работать с большинством языков программирования и фреймворков.
Совет для профессионалов. В процессе установки VS Code обязательно установите флажок, который добавляет его к путям вашей среды. Это дает вам доступ к открытому коду VS из терминала, набрав âÃÂÃÂcode имя_файла.jsâÃÂàили âÃÂà Âкод .âÃÂàдля всего проекта, в котором вы находитесь. **Терминал, в котором вы находитесь. мне комфортно в
- Большинство разработчиков должны установить Git на свои компьютеры. Это дает вам доступ к Git Bash, к которому многие разработчики обращаются через терминал.
Давай начнем!
**1. Создайте приложение React и войдите в папку проекта через терминал**
Войдите в терминал и найдите папку, в которой вы храните приложения. Я предлагаю папку с именем âÃÂÃÂdevâÃÂÃÂ.
npx имя проекта create-реагировать на приложение&& cd имя-проекта
или
npm -g install create-реагировать-приложение создать-реагировать-приложение имя-проекта
Здесь мы создаем приложение 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 установить -g awsmobile-кли
для глобальной установки awsmobile-cli. Мы воспользуемся этим после некоторой работы в консоли AWS Mobile Hub.
Убедитесь, что вы находитесь внутри своего проекта и введите
awsmobile инициализация
Вам предлагается набор вопросов, в которых значения по умолчанию хороши, поэтому нажимайте клавишу ввода для каждого параметра, пока он автоматически не откроет AWS в вашем браузере по умолчанию. Войдите в свою учетную запись уровня бесплатного пользования, если вы еще этого не сделали.
Это гарантирует awsmobile-cli, что мы подключены к правильной учетной записи AWS. Вернитесь к своему терминалу и нажмите Enter, чтобы продолжить.
AWS необходимо настроить пользователя для управления приложением. Это будет сделано автоматически awsmobile-cli, когда вы продолжите нажимать ввод.
Выполнив это, вы будете перенаправлены в AWS IAM, где вам останется только «Далее». ¢ÃÂàваш путь к полноте! На втором этапе он должен был автоматически отметить «Доступ администратора», который дает пользователю доступ ко всем необходимым функциям AWS.
Когда это будет сделано, очень важно, чтобы вы загрузили файл .csv со своими секретными учетными данными, поскольку они будут отображаться в AWS только один раз. Эти клавиши будут использоваться на следующих шагах вашего окна терминала.
Это успешно создает ваше приложение AWS MobileHub и автоматически устанавливает aws-amplify& aws-amplify-react в ваш локальный проект React
Когда этот процесс будет завершен (~ 1 мин), вы можете ввести
awsmobile консоль
чтобы увидеть ваше приложение Mobile Hub в браузере по умолчанию. Вы также можете ввести «awsmobile», чтобы увидеть список различных действий. Отсюда мы добавим Cognito Login с помощью браузера, но вы можете сделать это из интерфейса командной строки awsmobile.
**3. Фактическое добавление входа в Cognito и хостинга**
На последнем этапе мы добавим AWS Cognito в наш проект через консоль AWS MobileHub. Вы также можете проверить Хостинг, который уже включен по умолчанию.
Чтобы протестировать хостинг, щелкните функцию в консоли и щелкните URL-адрес, который вы предоставили. Содержимое здесь представляет собой шаблон от AWS, но вы скоро перезапишете его приложением React.
**Чтобы добавить вход пользователя Cognito, прокрутите вниз, чтобы найти «Вход пользователя» и щелкните его. ** Это включает пулы пользователей Cognito с системой аутентификации. Используйте âÃÂÃÂEmailâÃÂàс адреса электронной почты или номера телефона, чтобы указать адрес электронной почты в качестве имени пользователя при входе в систему. Или вы можете использовать имя пользователя и включить âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà ÂÃÂ, чтобы позволить пользователю выбирать. Код подтверждения вы получите по электронной почте в любом случае.
Мы принимаем электронную почту, потому что AWS не взимает плату за отправку кодов подтверждения регистрации по электронной почте, в то время как отправка SMS стоит реальных денег.
Что приводит к:
Если вы нажмете «Действие» >«Редактировать» в Cognito, вы увидите консоль Cognito для управления вашими пользователями и расширенными функциями безопасности. Некоторые настройки, которые вы сделали на этом шаге, необратимы, но вы всегда можете удалить свой пользовательский пул и создать новый.
На этом настройка AWS Cognito в MobileHub завершена. Пришло время добавить код. Сколько? 5 строк! И 3 из них — это только импорт в React.
= Добавление ваших настроек в проект React и публикация на вашем веб-сайте =
В своем терминале вы можете в любое время использовать awsmobile pull или awsmobile push, чтобы соответствующим образом загружать свои изменения из онлайн-консоли AWS MobileHub в свое приложение или отправлять локальные изменения, сделанные через интерфейс командной строки awsmobile в терминале.
Для этого варианта использования мы хотим получить сделанные нами изменения. Вернитесь к своему терминалу и введите
Вернувшись в VS Code, вы увидите, что ваш проект был изменен. Вы можете проверить свои локальные конфигурации в ./awsmobile/backend/mobile-hub-project.yml.
Кроме того, в ./package.json вы найдете две выделенные библиотеки, добавленные с помощью awsmobile init, который мы сделали ранее.
Теперь мы будем использовать их для переноса нашего приложения в окно входа в систему Cognito. Откройте ./src/index.js и измените это:
к этому:
импортировать React из «реагировать»;
импортировать ReactDOM из 'react-dom';
импортировать index.css';
импортировать приложение из приложения';
импортировать registerServiceWorker из registerServiceWorker';
импортировать awsMobile из aws-exports;
импортировать Amplify из «aws-amplify»;
импортировать { withAuthenticator } из «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
