= Как использовать AWS Amplify для развертывания приложения React =
== Руководство по развертыванию приложений React с помощью AWS Amplify ==
С тех пор, как я начал консультировать в качестве инженера-программиста, я хотел создать веб-сайт-портфолио, демонстрирующий
личные и профессиональные проекты, над которыми я работал. Этими зимними каникулами я потратил время на проектирование, разработку и развертывание своего сайта-портфолио, и в этой статье я расскажу вам, как я развернул его с помощью AWS Amplify. Вы можете просмотреть веб-сайт по адресу dan-murphy.com и код на GitHub.
= Краткая предыстория =
Большая часть моей профессиональной деятельности связана с созданием приложений, управляемых данными, и оптимизацией конвейеров данных. Для выполнения этих задач я регулярно использую Python и Ruby и включаю JavaScript для любой работы с интерфейсом. Чтобы освоиться с React, я решил использовать фреймворк для создания своего веб-сайта-портфолио.
= Настройка приложения =
Первым шагом, который я предпринял, было решение о том, как структурировать приложение. я использовал
create-react-app в качестве базового шаблона для моих каталогов, а затем реструктурировал приложение, добавив несколько дополнительных папок. Окончательная установка выглядит так:
источник
составные части
âÃÂÃÂархивы
âÃÂÃÂдополнения
âÃÂÃÂданные
âÃÂÃÂimgs
страницы
âÃÂÃÂсодержание
âÃÂÃÂданные
стили
тесты
светильники
Некоторые из заметных изменений заключаются в
**составные части**
, и
**страницы**
каталоги.
**стили**
,
: Здесь я храню все компоненты приложения. Хранение компонентов в централизованной папке упрощает повторное использование и рефакторинг моего кода и делает его более интуитивно понятным для других. Некоторые из компонентов, которые составляют мой веб-сайт портфолио:
составные части
Заголовок,
Нижний колонтитул и
Боковая панель проекта.
: Здесь я создаю отдельные страницы для приложения. Я импортирую необходимые компоненты из
страницы
папку, а затем объединить их для оформления страницы. Вот пример того, как я сделал это для
главная страница компонентов:
: здесь я определяю глобальные стили CSS для приложения. я люблю использовать
стили
styled-components для отдельных компонентов, но я также счел полезным создавать глобальные стили, доступные для каждой страницы.
Наконец, чтобы сопоставить запросы с правильными страницами, мы используем
реагировать-роутер-дом. Маршруты определены в
Файл App.js, как показано ниже:
Это будет отображать
домашняя страница,
/проекты запросы к
ПроектыСтраница,
/о запросах к
О странице и
/bookshelf просит
Страница книги. Теперь, когда разработка приложения завершена, нам нужно развернуть его, чтобы им могли пользоваться другие!
/ просит
= Развертывание с помощью AWS Amplify =
== Обзор ==
Есть несколько способов развернуть веб-сайт React, но я обнаружил, что один из самых простых — использовать
**AWS Amplify Amplify описывается как «самый быстрый и простой способ создания масштабируемых мобильных и веб-приложений». Для этого AWS экстраполирует все сложности настройки сервера, установки зависимостей и создания рабочей сборки вашего веб-сайта, позволяя вам сосредоточиться исключительно на создании интуитивно понятного UX. Чтобы узнать больше о том, что AWS Amplify предлагает для приложений, управляемых данными (в частности, веб-сайтов с **интерфейсом** и **сервером, ознакомьтесь с их документацией.
== Подключение репозитория ==
Чтобы разместить свое веб-приложение на AWS Amplify, сначала необходимо подключить репозиторий, содержащий ваш исходный код. Для этого можно перейти к
*AWS Amplify* *Начало работы* **Разместите мое веб-приложение и нажмите **Подключить репозиторий приложений *страница, прокрутите до*страницы, прокрутите до 
Затем вы будете перенаправлены на отдельную страницу, где сможете подключить репозиторий, содержащий ваш исходный код. В этом примере я выберу GitHub, но AWS Amplify также поддерживает BitBucket, GitLab, AWS CodeCommit и даже развертывание без поставщика Git.
После успешной авторизации вы можете выбрать, какой репозиторий вы хотите развернуть, и выбрать ветку, которую AWS Amplify должен использовать для производственных сборок.
После этого нажмите
**Далее**, и AWS попросит вас настроить параметры *сборки* и *теста*. Базовый шаблон, предоставляемый AWS, показан ниже.
версия: 1
внешний интерфейс:
фазы:
предварительная сборка:
команды:
- сборка установки npm:
команды:
- запустить сборку npm
артефакты:
базовый каталог: построить
файлы:
-
кеш:
пути:
- node_modules
Кроме того, под
**расширенные настройки**, вы можете установить переменные среды и собственный контейнер сборки.
Наконец, просмотрев настройки вашего приложения, нажмите
**Сохранить и развернуть **и **AWS начнет настройку и развертывание вашего приложения. Когда AWS завершит развертывание, вы можете перейти на домашнюю страницу Amplify и увидеть, что ваше недавно развернутое приложениеAWS начнет настройку и развертывание вашего приложения. Когда AWS завершит развертывание, вы сможете перейти на домашнюю страницу Amplify и увидеть только что развернутое приложение.
Теперь давайте настроим URL, используя
**Управление доменом AWS Amplify
== Добавление личного домена ==
Чтобы начать добавление личного домена, перейдите на левую боковую панель и выберите
**управление доменом 
**управление доменом**настройка.
Затем выберите
**добавить домен **настроить домен **введите имя вашего домена (как показано ниже) и нажмите **введите имя вашего домена (как показано ниже) и нажмите 
После этого вы можете настроить любые редиректы, необходимые для вашего домена. Например, в следующем примере я создаю перенаправление с httpsdan-murphy.com на httpswww.dan-murphy.com.
Наконец, после правильной настройки личного домена AWS предоставит вам
**Сертификат проверки Вы также можете просмотреть этот сертификат в консоли AWS Certificate Manager.
== Добавление записи CNAME ==
Последним шагом в настройке личного домена является добавление записи CNAME. В следующем примере я использую домены Google, но основные понятия остаются одинаковыми для разных регистраторов доменов.
Сначала прокрутите вниз до
**Пользовательские записи ресурсов** в Google Domains. Создайте запись *CNAME *, указывающую все субдомены на домен AWS Amplify: Имя: введите имя субдомена. Если субдомен www.domain.com, введите . Если это www app.domain.com, введите app. Данные. На странице управления доменом нажмите «Действия» и выберите «Просмотреть записи DNS». Затем введите домен AWS Amplify, доступный в разделе «Настройка поставщика DNS». 
На странице **Управление доменами** выберите **Действия **Просмотр записей DNS**.
В целом запись пользовательского ресурса будет выглядеть следующим образом:
Далее добавляем еще один
Запись *CNAME*, указывающая на сервер проверки AWS Certificate Manager. Проверенный менеджер сертификатов AWS обрабатывает TLS для вашего приложения: Имя: введите субдомен сервера проверки. Если запись DNS для подтверждения права собственности на ваш домен — _1234.example.com, введите только _1234. Данные: введите сертификат проверки ACM. Если сервер проверки — _1234.abcdefg.acm-validations.aws., введите _1234.abcdefg.acm-validations.aws.
Вся информация о ваших сертификатах проверки находится в консоли AWS Certificate Manager. После второго
Добавлен *CNAME*, ваши пользовательские записи должны выглядеть так: 
Наконец, давайте добавим
**Синтетическая запись** для настройки субдомена вперед: Субдомен: введите URL-адрес домена: www. 
= Подведение итогов =
В целом, в этой статье мы узнали, как структурировать приложения React и развертывать их с помощью AWS Amplify. Во-первых, мы обсудили, как разбить реагирующее приложение на модули.
*компоненты* *страницы* папки. Затем мы узнали об **AWS Amplify** и о том, как с его помощью развертывать статические приложения и приложения, управляемые данными. Наконец, мы узнали об использовании **AWS Amplify Domain Management** и **Google Domains** для настройки домена нашего приложения. **и и
Если у вас есть какие-либо вопросы, проблемы или отзывы об этой статье или моем сайте-портфолио, не стесняйтесь комментировать или пишите мне по адресу
*
[email protected]*. Спасибо за чтение!
