= Развертывание приложений React на Amazon S3 =
== 5-минутное руководство по развертыванию приложений React с помощью S3 ==
![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)
Итак, вы завершили свое приложение React и хотите разместить его где-нибудь. Знаете ли вы, что можете использовать Amazon AWS S3 для размещения своих приложений React? Это относительно простое, недорогое и быстрое развертывание.
= Давайте начнем! знак равно
== Предпосылки ==
Прежде чем мы перейдем к хостингу, давайте выполним административную настройку. Убедитесь, что выполнены следующие пункты:
**У вас есть учетная запись AWS Зарегистрируйте учетную запись AWS здесь: httpsaws.amazon.com/resources/create-account/ **Создайте пользователя AWS В консоли AWS перейдите на вкладку IAM и перейдите к Ã Раздел «Пользователи» на боковой панели.
Нажмите «Добавить пользователя» и установите флажок «Программный доступ». ÃÂ.
![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)
Нажмите «Далее: Разрешения» и выберите здесь «Прикрепить существующие политики напрямую». ÃÂ. Отметьте «AdministratorAccess» для целей развертывания.
![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)
Нажмите кнопку «Далее» и, наконец, нажмите «Создать пользователя».
![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)
На последнем этапе мы получаем идентификатор ключа доступа и секретный ключ доступа. Скачать и
**сохраните их на свой компьютер, так как они понадобятся вам позже
== Установите интерфейс командной строки AWS ==
Интерфейс командной строки AWS — это мощный инструмент, который может помочь нам упростить процесс развертывания.
Давайте установим AWS CLI с помощью Homebrew (для macOS). Установите Homebrew, если вы еще этого не сделали.
*Примечание. Если вы используете Windows, вы можете найти инструкции в официальной документации * *здесь*
Откройте терминал и введите
сварить установить awscli.
После установки инструмента CLI мы можем настроить нашу учетную запись AWS с помощью
аус настроить. Здесь вам нужно будет ввести информацию о ключе доступа, которую вы ранее загрузили. Должно получиться что-то вроде следующего.
Что касается региона, вы можете проверить свой URL-адрес в консоли AWS, и там будет указан ваш регион. Например, мой — âÃÂÃÂap-southeast-1âÃÂÃÂ.
![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= Создание приложения React =
Возможно, ваше приложение React уже готово к развертыванию. Однако, если вам нужен пример приложения, вы можете использовать следующие параметры:
- Создайте стандартное приложение React, запустив
npx создать-реагировать-приложение мое-приложение
- Загрузите мой образец приложения React (с примером формы) с httpsgithub.com/harishv7/react-hook-form-example. Это было сделано для руководства по добавлению форм в приложения React. Проверьте это здесь.
После этого убедитесь, что все зависимости установлены с помощью
пряжа установить и запустить приложение, используя
начало пряжи.
= Настройка корзины S3 =
Теперь, когда наш пример приложения готов, давайте настроим корзину S3 для размещения нашего приложения.
В консоли AWS найдите âÃÂÃÂS3âÃÂàи перейдите на панель инструментов S3. Нажмите «Создать ведро» и дайте ведру имя, например, «my-react». -app-2021âÃÂà(или что-то еще, что вы хотите).
*Примечание. Имя корзины должно быть уникальным для всего S3. Поэтому выберите уникальное имя, которого не существует, иначе вы получите ошибку!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)
Включите публичный доступ к корзине, поскольку мы размещаем ее в прямом эфире.
![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)
Остальные настройки оставьте такими, какие они есть, и нажмите «Создать корзину». Вы увидите запись, подобную следующей, на панели инструментов S3.
![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)
Давайте щелкнем и войдем в нашу недавно созданную корзину S3.
![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)
Пусть âÃÂÃÂs щелкните на âÃÂÃÂPropertiesâÃÂàи прокрутите до конца, где вы будете см. «Статический хостинг веб-сайтов».
![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)
Нажмите на «Включить» и введите «А» ÃÂ под Указательным документом.
![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)
Остальные поля оставьте без изменений и нажмите «Сохранить изменения».
= Развертывание на S3 =
Теперь мы готовы развернуть наше приложение на S3. Это можно сделать с помощью следующей команды CLI:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Мы также можем добавить эту команду в наш файл package.json в качестве сценария «deploy».
![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)
Давайте создадим наше приложение, используя
сборка пряжи, которая помогает создать оптимизированную производственную сборку.
Затем давайте запустим команду CLI, указанную выше, или, если вы настроили свой сценарий публикации в package.json, мы можем использовать
пряжа развертывается.
![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)
Вот и все, наше приложение развернуто!
Чтобы узнать, где размещено наше приложение (ссылка на веб-сайт), перейдите в консоль AWS S3 и щелкните созданный вами сегмент.
Перейдите на вкладку «Свойства» и прокрутите вниз до вкладки «Статический веб-сайт». hostingâÃÂàи наш URL будет там.
![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)
Нажмите на нее, и ваше приложение откроется в новой вкладке. Вот моя!
![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)
= Заключение =
Мы успешно развернули наше приложение React на Amazon S3! Это отличный выбор для быстрого развертывания и тестирования прототипов React и обмена ими с другими. Его действительно легко и быстро развернуть.
Надеюсь, этот урок был полезен для вас!
Удачного кодирования! ðÃÂÃÂÔ
*Больше контента на * *plainenglish.io*