= Як використовувати AWS Amplify для розгортання програми React =
== Посібник із розгортання програм React за допомогою AWS Amplify ==
Оскільки я почав консультувати як інженер-програміст, я хотів створити веб-сайт портфоліо, який демонструватиме
особисті та професійні проекти, над якими я працював. Ці зимові канікули я витратив час на проектування, розробку та розгортання сайту свого портфоліо, і в цій статті я розповім вам, як я розгорнув його за допомогою AWS Amplify. Ви можете переглянути веб-сайт на dan-murphy.com і код на GitHub.
= Коротка довідка =
Більшість моєї професійної роботи пов’язана зі створенням додатків на основі даних і оптимізацією конвеєрів даних. Для виконання цих завдань я регулярно використовую Python і Ruby і включаю JavaScript для будь-якої зовнішньої роботи. Щоб зручніше працювати з React, я вирішив використати фреймворк для створення веб-сайту свого портфоліо.
= Налаштування програми =
Першим кроком, який я зробив, було рішення, як структурувати додаток. Я використав
create-react-app як базовий шаблон для моїх каталогів, а потім переструктурував програму за допомогою кількох додаткових папок. Остаточне налаштування виглядає так:
src
компоненти
âÃÂÃÂархіви
âÃÂÃÂдодатки
âÃÂÃÂдані
âÃÂÃÂimgs
сторінки
âÃÂÃÂвміст
âÃÂÃÂдані
стилі
тести
світильники
Деякі з помітних змін:
**компоненти**
, і
**сторінки**
довідники.
**стилі**
,
: тут я зберігаю всі компоненти програми. Завдяки зберіганню компонентів у централізованій папці простіше повторно використовувати та рефакторинг мого коду та інтуїтивно зрозумілий для інших. Деякі з компонентів, які складають веб-сайт мого портфоліо, є
компоненти
заголовок,
Нижній колонтитул, і
ProjectSidebar.
: тут я будую окремі сторінки для програми. Я імпортую необхідні компоненти з
сторінки
папку, а потім об’єднайте їх для дизайну сторінки. Ось приклад того, як я зробив це для
домашня сторінка компонентів:
: тут я визначаю глобальні стилі CSS для програми. Я люблю використовувати
стилі
styled-components для окремих компонентів, але я також знайшов корисним створення глобальних стилів, доступних для кожної сторінки.
Нарешті, щоб відобразити запити на правильні сторінки, ми використовуємо
реагувати-маршрутизатор-дом. Маршрути визначені в
Файл App.js, як показано нижче:
Це буде карта
домашня сторінка,
/projects запитує до
Сторінка проектів,
/про звернення до
AboutPage і
/bookshelf запити до
BookPage. Тепер, коли розробку програми завершено, нам потрібно розгорнути її, щоб інші могли нею користуватися!
/ запити до
= Розгортання за допомогою AWS Amplify =
== Огляд ==
Є кілька способів розгортання веб-сайту React, але я виявив, що один із найпростіших — це використання
**AWS Amplify Amplify описано як «найшвидший і найпростіший спосіб створення масштабованих мобільних і веб-додатків». Щоб досягти цього, AWS екстраполює всі складнощі налаштування сервера, встановлення залежностей і створення робочої збірки вашого веб-сайту, дозволяючи вам зосередитися виключно на створенні інтуїтивно зрозумілого UX. Щоб дізнатися більше про те, що AWS Amplify пропонує для програм, керованих даними (зокрема, веб-сайти з **інтерфейсом** і **бекендом, перегляньте їхню документацію.
== Підключення вашого сховища ==
Щоб розмістити свою веб-програму на AWS Amplify, вам спочатку потрібно підключити репозиторій, що містить ваш вихідний код. Для цього ви можете перейти до
*AWS Amplify* *Початок роботи* **Розмістіть My Web App і натисніть **Connect app repo *сторінка, прокрутіть до*сторінки, прокрутіть до 
Потім ви будете перенаправлені на окрему сторінку, де ви зможете підключити репозиторій, що містить ваш вихідний код. Для цього прикладу я виберу GitHub, але AWS Amplify також підтримує BitBucket, GitLab, AWS CodeCommit і навіть розгортання без постачальника Git.
Після успішної авторизації ви можете вибрати репозиторій, який ви хочете розгорнути, і вибрати гілку, яку AWS Amplify має використовувати для робочих збірок.
Після цього натисніть
**Далі** і AWS попросить вас налаштувати параметри *збірки* та *тестування». Базовий шаблон, який надає AWS, показано нижче.
версія: 1
інтерфейс:
фази:
preBuild:
команди:
- збірка встановлення npm:
команди:
- npm run build
артефакти:
baseDirectory: збірка
файли:
-
кеш:
шляхи:
- node_modules
Додатково під
Перемикач **розширених налаштувань**, ви можете встановити змінні середовища та спеціальний контейнер збірки.
Нарешті, після перегляду налаштувань програми натисніть
**Збережіть і розгорніть **і **AWS почне налаштування та розгортання вашої програми. Коли AWS завершить розгортання, ви можете перейти на домашню сторінку Amplify і побачити свою щойно розгорнуту програму. AWS почне налаштування та розгортання вашої програми. Коли AWS завершить розгортання, ви можете перейти на домашню сторінку Amplify і переглянути свою щойно розгорнуту програму.
Тепер давайте налаштуємо URL-адресу за допомогою
**Керування доменом AWS Amplify
== Додавання власного домену ==
Щоб почати додавати власний домен, перейдіть до лівої бічної панелі та виберіть
**керування доменом 
налаштування **керування доменом**.
Потім виберіть
**додайте домен **налаштуйте домен **введіть своє доменне ім’я (як показано нижче) і натисніть**введіть своє доменне ім’я (як показано нижче) і натисніть 
Після цього ви можете налаштувати будь-які переспрямування, необхідні для вашого домену. Наприклад, у наступному прикладі я створюю перенаправлення з httpsdan-murphy.com на httpswww.dan-murphy.com.
Нарешті, після того, як ваш власний домен буде правильно налаштовано, AWS надасть вам a
**Сертифікат перевірки Ви також можете переглянути цей сертифікат у консолі диспетчера сертифікатів AWS.
== Додавання запису CNAME ==
Останнім кроком у налаштуванні власного домену є додавання запису CNAME. У наступному прикладі я використовую Google Domains, але основні концепції залишаються незмінними для різних реєстраторів доменів.
Спочатку прокрутіть униз до
**Спеціальні записи ресурсів** у Google Domains. Створіть *CNAME *запис, який спрямовує всі субдомени на домен AWS Amplify: Ім’я: введіть ім’я субдомену. Якщо субдомен www.domain.com, введіть . Якщо це www app.domain.com, введіть додаток. Дані: на сторінці керування доменом натисніть «Дії», а потім виберіть «Переглянути записи 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. Після другого
*CNAME* додано, ваші власні записи мають виглядати так: 
Нарешті, давайте додамо
**Синтетичний запис** для налаштування субдомену: Субдомен: введіть URL-адресу домену: www. 
= Підведення підсумків =
Загалом у цій статті ми навчилися структурувати програми React і розгортати їх за допомогою AWS Amplify. Спочатку ми обговорили, як модульувати додаток React
папки *components* *pages*. Потім ми дізналися про **AWS Amplify** і про те, як за допомогою нього розгортати статичні та керовані даними програми. Нарешті ми дізналися про використання **AWS Amplify Domain Management** і **Google Domains **для налаштування домену нашої програми. **і**і
Якщо у вас є будь-які запитання, занепокоєння чи відгуки щодо цієї статті чи сайту мого портфоліо, не соромтеся прокоментувати або надіслати мені електронний лист на
*
[email protected]*. Дякуємо за читання!
