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