create-react-app упрощает разработку приложения React. Но это оставляет вас без поддержки, когда дело доходит до развертывания вашего приложения на сервере.
Инфраструктура-компоненты восполняют этот пробел. Эти компоненты React выполняют всю техническую настройку за вас и позволяют создавать, запускать и даже развертывать приложение React с помощью одной команды.
create-react-app от Facebook - это простой способ начать разработку с помощью React. Это позволяет вам сконцентрироваться на разработке ваших компонентов, вместо того, чтобы требовать от вас сначала научиться настраивать Typescript, Webpack и Babel.
С create-react-app вы можете легко создать свое приложение React. И вы можете запустить его локально. Все идет нормально.
Но веб-приложение бесполезно, если оно не в сети, верно?
Есть только одна проблема: Как развернуть приложение?
Если вы введете в Google развернуть приложение для создания реакции, первым результатом будет Учебник Facebook. Он говорит вам, что вам нужно:
- сервер (да! какое-то оборудование!), на котором запущен Node.js
- приложение веб-сервера, например express.js
- маршрутизация и относительные пути
Конечно, это выполнимо. Но они требуют, чтобы вы настроили веб-сервер. Вы съезжаете с легкой create-react-app дороги…
Действительно ли нам нужен веб-сервер? Почему мы не размещаем наш create-react-app в облаке (например, на AWS)?
Фактически, Amazon поддерживает обслуживание одностраничных приложений непосредственно из своей Simple Storage Service (S3). После настройки вы можете загрузить свое связанное приложение React и простой HTML-файл. Затем S3 предоставляет технический URL-адрес (http://yourbucket.s3-website-us-east-1.amazonaws.com), обслуживающий этот HTML-файл, который загружает и отображает ваше приложение React.
Не плохо. И настройка этой единственной услуги тоже не слишком сложна. Но если вы захотите использовать правильный домен, например www.your-domain.com, вам придется настроить и некоторые другие ресурсы AWS:
- IAM (управление доступом)
- CloudFront (служба доставки контента)
- Route53 (настройка личного домена)
- Диспетчер сертификатов (настройка ssl-сертификата)
Amazon предоставляет обширную документацию. Здесь, на Medium.com, есть много руководств по этой теме. Но вы наверняка сойдете с легкой create-react-app дороги…
Вы говорите, давайте использовать бессерверный фреймворк? Вы говорите, что это мощный инструмент для создания облачной инфраструктуры?
Это определенно! Но с большой силой приходит большая ответственность!
Бессерверный режим не освобождает вас от настройки всех ресурсов AWS. Он просто заменяет ручную настройку в консоли AWS скриптом. Все ваши настройки помещаются в файл serverless.yml.
И поверьте, создание работающей бессерверной конфигурации занимает довольно много времени. Он не дает немедленной обратной связи, когда вы делаете что-то неправильно. Вместо этого ваша инфраструктура просто не работает! Непростой путь.
Кроме того, вам необходимо указать каждую мельчайшую деталь ресурсов AWS. Действительно! Как я уже сказал: это мощный инструмент с множеством параметров.
AWS, Azure, Google Cloud Platform и т. Д. - они предоставляют инфраструктуру как услугу (IaaS). Инфраструктура не привязана к определенной цели. Вы можете использовать его для чего угодно. Но вы должны указать именно то, что хотите.
Если вы загуглите бессерверное приложение для создания реакции, вы получите руководство для разработчиков бессерверного стека. Это отличный ресурс, который стоит прочитать. Но это более 100 страниц. Когда вы закончите, вы можете называть себя DevOps-инженером. Поздравляю ... подождите. Мы снова свернули с легкой create-react-app дороги.
Нет ли возможности развернуть приложение React, не став сначала DevOps Engineer? Является ли приложение create-response-app тупиком?
Позвольте предложить выход. Я называю это дорогой Архитектура как функция.
Инфраструктура-компоненты предоставляют простые React-компоненты (также известные как функции), которые позволяют указать архитектуру вашего приложения, а не его инфраструктуру.
Архитектура находится на другом уровне абстракции. Вы просто указываете своему приложению быть <SinglePageApp /> или <IsomorphicApp />. Вот и все!
Вам не нужно указывать и настраивать все технические детали. Достаточно указать, что вы хотите создать <SinglePageApp />.
Вам не нужно указывать, что ваши файлы на S3 должны быть доступны через Интернет. Конечно, есть.
Вам не нужно указывать, что index.html загружает скрипт, содержащий ваше приложение React. Что еще надо загрузить?
Вам не нужно указывать, что зарегистрированный вами домен указывает на этот index.html. Абсолютно!
Вам не нужно… Думаю, вы понимаете мою точку зрения.
Инфраструктура-компоненты - это функции, как и любой другой React-компонент. Функция служит очень конкретной цели. Компонент <SinglePageApp /> делает одно: создает одностраничное приложение. Вам не нужно беспокоиться о том, как это работает внутри компании. Вы просто работаете с возвращенным результатом.
Давайте кратко рассмотрим Инфраструктуру-Компоненты в действии:
- Вы экспортируете
<SinglePageApp />компонент по умолчанию в этот файл - Вы указываете
<Environment />, который указывает среду выполнения, которую можно запустить локально или развернуть. Вы просто подключаете свой домен к среде. - Компонент
<Route />(вы можете использовать более одного) позволяет легко обслуживать разные маршруты.
Теперь давайте поговорим о том, как создать, запустить (локально) и развернуть это приложение с помощью одной команды.
- На www.infrastructure-components.com вы можете создать шаблонный код индивидуализированного проекта Infrastructure-Components.
- Загрузите и распакуйте свой шаблонный код
- Внутри каталога проекта запустите
npm i. - Создайте технического пользователя IAM с этими правами
- Поместите учетные данные пользователя в свой
.env-файл:
AWS_ACCESS_KEY_ID=*** AWS_SECRET_ACCESS_KEY=***
Теперь все готово!
- Создайте свой проект:
npm run build - Запустите свой проект локально:
npm run {your-project-name} - Разверните свой проект:
npm run deploy-{your-env-name}
Примечание: вам необходимо собрать проект хотя бы один раз, прежде чем вы сможете запустить или развернуть его.
Вы также можете подключить к своему приложению свой собственный домен. Этот пост расскажет, как это сделать.
Вы хотите добавить серверные службы в свое одностраничное приложение? Этот пост показывает, как создать сервис-ориентированное веб-приложение на React. Вы даже можете добавить базу данных.
Вот и все!
С Инфраструктурой-Компонентами вы можете сконцентрироваться на разработке своего React-приложения.
С React вы можете разделить контент, стиль, макет, состояние и инфраструктуру вашего приложения.
Вам не нужно сначала становиться DevOps-инженером.
Поддержка и ресурсы
Компоненты инфраструктуры находятся в стадии активной разработки. Если вы обнаружите ошибку, ваше развертывание выдает ошибку или когда вам нужна какая-либо поддержка, сообщите об этом на странице https://spectrum.chat/infrastructure. Спасибо!
Наша Документация более подробно описывает, как использовать Компоненты инфраструктуры.
Компоненты инфраструктуры имеют открытый исходный код! Так что загляните в наш репозиторий GitHub.
