Превратите свое статическое одностраничное приложение в динамическое сервисно-ориентированное веб-приложение
Одностраничные приложения - это здорово
Большинство веб-приложений на основе React - это одностраничные приложения. А одностраничные приложения - это здорово! Вы можете создавать бесшовные пользовательские интерфейсы. Вы применяете современный стиль. Вы манипулируете DOM. Вы используете анимацию.
Вы можете разместить свое одностраничное приложение где угодно. GitHub Pages, Bitbucket и GitLab Pages предлагают бесплатный хостинг. Вы строите свой проект на своей машине разработчика. Вы помещаете index.html и app.bundle.js в папку docs. Вот и все.
Жизнь хороша. Не правда ли?
Что, если вам нужно настроить одностраничное приложение под конкретного пользователя? «Нет, проблема!» вы говорите: «Я просто звоню в службу RESTful. Кусок торта! »
Гм. Я имею в виду что-то конкретное для вашего одностраничного приложения. Служба, по которой вы хотите позвонить, пока не существует.
«Отдайте это бэкэнд-команде! Они несут ответственность за услуги ».
Но это небольшая услуга. Он тесно связан с вашим приложением.
«Не зли меня! Просто передайте его бэкэнд-команде и дайте мне описание интерфейса. Серьезно! »
К сожалению, бэкэнд-команды нет. Либо потому, что это побочный проект. Или вы подписали контракт как full-stack разработчик. «Вздох.»
Первый сервис Express.js
Ok. Давайте использовать Express.js. Это не так уж сложно. Следующий фрагмент - это все, что вам нужно для запуска службы. Просто запустите node express-service.js (при условии, что это имя файла).
Только одно. Давайте использовать порт 3001. Потому что мы уже используем 3000 для нашего одностраничного приложения.
Разверните свой сервис!
Запустить наш сервис Express.js локально было несложно. Это было? Но как его развернуть?
GitHub Pages? Bitbucket? GitLab Pages? Они работают только со статическими файлами (HTML, CSS, JS).
Разместим его на Amazon Web Services (AWS). Я просто погуглил aws express. Вот мой первый хит.
«Ты серьезно ?! Этот урок длится 60 минут. Развертывание простой функции не может быть таким сложным! »
Ты прав! В этом руководстве используются экземпляры EC2 с автоматическим масштабированием, DynamoDB и уведомления по электронной почте с помощью Simple Notification Service (SNS). Это уже перебор. Извините за волнение.
AWS Lambda больше подходит для нашего сервиса. И мы можем разместить наше одностраничное приложение на AWS Simple Storage Service (S3). Есть только одна проблема. Нам нужно настроить эту инфраструктуру до мельчайших деталей.
В следующем файле показана такая конфигурация.
Совершенно чудовище! Я даже не стал беспокоить вас соответствующими webpack.config.js и скриптами развертывания!
Мне нужно стать инженером DevOps ?! спросите вы? Мой ответ - нет. Вот почему.
Какая альтернатива?
Альтернатива - Инфраструктура-Компоненты. Это React-компоненты (также известные как функции). Они сделают за вас всю техническую настройку. Вам не нужно становиться DevOps-инженером. Но вы можете сосредоточиться на написании бизнес-логики своего приложения.
Следующий фрагмент кода представляет собой полное сервисно-ориентированное приложение React, которое можно построить, запустить (локально) или развернуть (в AWS) одной командой.
Что тут происходит? В этом файле вы по умолчанию экспортируете компонент <ServiceOrientedApp/>-. Этот компонент определяет архитектуру вашего приложения.
<Envrionment/>-компоненты определяют время выполнения вашего приложения. Например, у вас может быть dev и prod среда. Вы можете запускать и развертывать каждую среду отдельно.
Ваше приложение состоит из <Route/>- компонентов. Это страницы вашего приложения. Они работают как <Route/> в react-router. Они содержат пользовательский интерфейс вашего приложения. Все, что вы видите. Все, с чем вы можете взаимодействовать.
Вот учебник по работе с маршрутами.
<Service/>-компонент - это все, что вам нужно, если вы хотите добавить службу в свое приложение. Требуется три параметра.
idдолжен быть уникальной строкой. Подробнее оidчерез несколько секунд.path(с начальным/) указывает относительный путь URL-адреса вашей службы.methodдолжен быть одним изGET,POST,UPDATE,DELETE. В нем указывается HTTP-запрос, который мы используем при вызове службы.
Каждый <Service/>-компонент может иметь один или несколько <Middleware/>-компонентов в качестве дочерних. <Middleware/> принимает функцию обратного вызова в качестве параметра. Эта функция содержит код, который выполняется на сервере! Это промежуточное ПО Express.js. Работает так же. Вот краткое руководство по промежуточному программному обеспечению Express.js.
Для удобства Инфраструктура-Компонент предоставляет async function callService(). Эта функция принимает service-id, объект Javascript (который должен быть отправлен как тело запроса, только при использовании POST), функцию обратного вызова успеха и ошибки.
С чего начать?
Есть три способа (A, B или C) начать работу с Infrastructure-Components.
Инфраструктура-Компоненты позволяют вам создать собственный шаблонный код с помощью нескольких щелчков мышью.
- Выберите свою архитектуру, укажите имя для своего приложения React (например,
myapp) и имя среды (например,dev) - Загрузите и распакуйте свой настраиваемый шаблонный код
- Устанавливаем все зависимости, запускаем:
npm install
B Как вариант, вы можете скачать или разветвить этот репозиторий GitHub. Затем установите зависимости с npm install.
C Вы можете настроить компоненты инфраструктуры вручную, выполнив следующие действия:
1. Библиотека Infrastructure-components содержит компоненты React, которые вы можете использовать непосредственно в исходном коде вашего приложения. Кроме того, <ServiceOrientedApp/>-архитектура требует дополнительных библиотек во время выполнения.
npm install --save \ infrastructure-components \ @babel/polyfill \ express \ isomorphic-fetch \ serverless-http
2. Библиотека Infrastructure-scripts включает скрипты, необходимые для сборки, запуска и развертывания приложения. . Поскольку эта библиотека содержит множество инструментов, которые вам понадобятся только во время разработки / развертывания, установите эту библиотеку как devDependency. Вам также необходимо установить несколько бессерверных библиотек.
npm install --save-dev \ infrastructure-scripts \ serverless-dynamodb-local \ serverless-offline \ serverless-pseudo-parameters \ serverless-single-page-app-plugin
3. Отредактируйте команду build в своем package.json файле. Сценарии инфраструктуры библиотеки предоставляют команду scripts. Запустите его с аргументами build и относительным путем к файлу, который экспортирует компонент <ServiceOrientedApp/>, например src/index.tsx.
"scripts": {
"build": "scripts build src/index.tsx"
}
Процесс build добавляет в ваш package.json. Это позволяет запускать программный стек в автономном режиме в режиме горячей разработки и развертывать его в AWS.
Начать офлайн
npm run start-{your-env} запускает ваше веб-приложение и службы локально. Ваше веб-приложение работает на localhost:3000. Службы работают на localhost:3001.
Подготовьте свой аккаунт AWS
Для развертывания вашего приложения требуются следующие одноразовые действия:
1. Конечно, вам понадобится учетная запись AWS, которую вы можете создать на https://aws.amazon.com.
2. Вам нужен технический пользователь (с программным доступом / API-ключом)
В консоли AWS откройте меню IAM и создайте нового пользователя со следующей политикой:
Вы получите AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY
3. Поместите их в файл.env в корне вашего проекта.
AWS_ACCESS_KEY_ID=***...*** AWS_SECRET_ACCESS_KEY=***...***
Развертывание
Если у вас есть учетные данные в нужном месте, вы можете развернуть их в AWS с помощью одной команды: npm run deploy-{your-env}.
Замените {your-env} именем, указанным в компоненте <Environment/>. Компоненты инфраструктуры поддерживают несколько сред для каждого проекта, например dev-среда и prod-среда.
После запуска команды deploy сценарии создают весь стек инфраструктуры в вашей учетной записи AWS. Вы получите URL-адрес типа https://{your_app_name}-abcdefg-{your-environment-name}.s3.amazonaws.com, который теперь обслуживает ваше приложение.
Куда идти дальше?
С Инфраструктурой-Компонентами вы можете сконцентрироваться на пользовательском интерфейсе и бизнес-логике вашего веб-приложения. Вам не нужно становиться экспертом по DevOps.
Как насчет добавления базы данных? Этот пост покажет вам, как создать полноценное приложение на React. Это первый шаг к тому, чтобы стать полноценным разработчиком React.
Вы передумали? Вы предпочитаете хранить свои сервисы отдельно от React-приложения? Вы также можете создать одностраничное приложение. <SinglePageApp/>-компонент позволяет создавать, запускать и развертывать React-приложение без сервисов.
Вам нравится концепция архитектуры как функции? Вот пост о том, как это может помочь вам уберечь рабочее место от велоцирапторов.
Еще не убедили? Этот пост дает еще несколько аргументов в пользу использования React-компонентов при настройке инфраструктуры.
С React вы можете разделить контент, стиль, макет, состояние и инфраструктуру вашего приложения.
Инфраструктура-Компоненты находятся в активной разработке. Если вы обнаружите ошибку, если ваше развертывание выдает ошибку - это не связано с вашим кодом ;-) - или когда вам нужна какая-либо поддержка, сообщите об этом на странице https://spectrum.chat/infrastructure. Спасибо!
В документации более подробно описано, как использовать Компоненты инфраструктуры.
Компоненты инфраструктуры имеют открытый исходный код! Так что загляните в наш репозиторий GitHub.
