= Розгорніть програми React на Amazon S3 =
== 5-хвилинний посібник із розгортання React Apps за допомогою S3 ==
Отже, ви завершили створення програми React і хочете її десь розмістити. Чи знаєте ви, що можете використовувати Amazon AWS S3 для розміщення своїх програм React? Його відносно легко, дешево та швидко розгортати.
= Давайте почнемо! =
== Передумови ==
Перш ніж перейти до хостингу, давайте зробимо адміністративне налаштування. Переконайтеся, що виконано наступне:
**У вас є обліковий запис AWS. Зареєструйте обліковий запис AWS тут: httpsaws.amazon.com/resources/create-account/ **Створіть користувача AWS У консолі AWS перейдіть на вкладку IAM і перейдіть до Ã Розділ «Користувачі» на бічній панелі.
Натисніть «Додати користувача» та поставте прапорець «Програмний доступ» ÃÂ.
Клацніть âÃÂÃÂДалі: ДозволиâÃÂàі тут виберіть âÃÂÃÂПрикріпити наявні політики безпосередньоâà ÂÃÂ. Перевірте âÃÂÃÂAdministratorAccessâÃÂàдля мети розгортання.
Клацніть кнопки «Далі» та нарешті клацніть «Створити користувача» .
На останньому кроці ми отримуємо ідентифікатор ключа доступу та секретний ключ доступу. Завантажити і
**збережіть їх на своєму комп’ютері, оскільки вони вам знадобляться пізніше
== Встановити AWS CLI ==
AWS CLI — це потужний інструмент, який може допомогти нам спростити процес розгортання.
Давайте встановимо AWS CLI за допомогою Homebrew (для macOS). Встановіть Homebrew, якщо ви ще цього не зробили.
*Примітка. Якщо ви використовуєте Windows, ви можете знайти інструкції в офіційних документах * *тут*
Відкрийте термінал і ввійдіть
brew встановити awscli.
Після встановлення інструменту CLI ми можемо налаштувати наш обліковий запис AWS
aws налаштувати. Тут вам потрібно буде ввести інформацію про ключ доступу, який ви завантажили раніше. Це повинно бути приблизно так.
Для регіону ви можете перевірити свою URL-адресу на консолі AWS, і там буде вказано ваш регіон. Наприклад, мій âÃÂÃÂap-southeast-1âÃÂÃÂ.
= Створення програми React =
Можливо, у вас уже є готовий додаток React до розгортання. Однак якщо вам потрібен зразок програми, ви можете скористатися такими параметрами:
- Створіть шаблонну програму React, запустивши її
npx create-react-app my-app
- Завантажте мій зразок програми React (із прикладом форми) з httpsgithub.com/harishv7/react-hook-form-example. Це було зроблено для підручника з додавання форм до програм React. Перевірте це тут.
Після цього переконайтеся, що всі залежності встановлено за допомогою
yarn установіть і запустіть програму за допомогою
початок пряжі.
= Налаштувати відро S3 =
Тепер, коли у нас є готовий зразок програми, давайте налаштуємо сегмент S3 для розміщення нашої програми.
На консолі AWS знайдіть âÃÂÃÂS3âÃÂàі перейдіть до S3 Dashboard. Натисніть âÃÂÃÂCreate bucketâÃÂàі дайте відру назву, наприклад âÃÂÃÂmy-react -app-2021âÃÂà(або будь-що інше, що ви бажаєте).
*Примітка. Назва сегмента має бути унікальною для всього S3. Тому виберіть унікальне ім’я, якого не існує, інакше ви отримаєте помилку!* 
Увімкніть публічний доступ до сегмента, оскільки ми розміщуємо його в прямому ефірі.
Залиште решту налаштувань такими, якими вони є, і натисніть âÃÂÃÂСтворити відроâÃÂÃÂ. На інформаційній панелі S3 ви побачите такий запис.
Давайте клацнемо та перейдемо до нашого щойно створеного відра S3.
Давайте клацнемо «Властивості» і прокрутимо донизу див. âÃÂÃÂХостинг статичного веб-сайтуâÃÂÃÂ.
Натисніть âÃÂÃÂУвімкнутиâÃÂàі введіть âÃÂÃÂindex.htmlâààпід Індексним документом.
Залиште інші поля такими ж і натисніть «Зберегти зміни» .
= Розгортання на 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*
СПІЛЬНИЙ ВЕБ-ХОСТИНГ №7
