Как развернуть приложение ReactJS + NodeJS Express на AWS?

У меня есть приложение ReactJS + NodeJS/ExpressJS + Webpack/Babel, и я хотел бы развернуть его на AWS.

Мой вопрос: должен ли я разворачивать ReactJS и NodeJS/ExpressJS отдельно? Или они могут быть развернуты вместе сразу?

Кроме того, упомянуты какие-либо хорошие руководства, относящиеся к моему стеклу? Посмотрел вокруг, но все, казалось, были специфическими для одного конкретного, будь то просто NodeJS или ReactJS. Ближе всего он нашел https://www.youtube.com/watch?v=WxhFq64FQzA, но я считаю, что он охватывает только NodeJS/ExpressJS, а не ReactJS.

В настоящее время приложение находится под одним проектом, включая все ReactJS + NodeJS/ExpressJS + Webpack/Babel.

ОТВЕТЫ

Ответ 1

1. Если у вас есть два разных проекта

например. a Реакт одностраничное приложение и Node/Express API.

а. Вы можете развернуть

В противном случае вы можете развернуть обе части одновременно на Elastic Beanstalk или EC2. При этом вы пропустите преимущества хостинга на S3 и CloudFront, т.е. более быстрая доставка для ваших пользователей и более дешевые расходы. На мой взгляд, это также более удобно и менее подвержено неожиданным ошибкам для обновления и развертывания отдельно клиентской стороны и серверной части веб-приложения.

б. Почему S3 + CloudFront вместо S3 один?

  • all преимущества использования CDN
  • ваше собственное доменное имя и бесплатный SSL-сертификат в 1 клик
  • перенаправление при ошибках 4xx (необходимо, если ваше приложение использует маршрутизатор на основе HTML5 History)
  • система кэширования
  • http2 и http to https перенаправление

с. Как обращаться с CORS?

Вы можете использовать разные субдомены, например.

  • api.domain.com для API
  • app.domain.com для приложения

Затем включить CORS в API:

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2. Если у вас есть один проект

например. a Node, включая некоторые виды React.

Вам нужно развернуть все приложение на Elastic Beanstalk или EC2.

Примечание. Если у вас есть один проект, включающий два подпроекта (например, папку для приложения React и еще один для API Node), и если оба подпроекта все еще работают, когда они разделены, то вы может развернуть суб-проекты отдельно (см. первую часть ответа).

3. В обоих случаях

Запустите сборку Webpack/Babel до развертывания части React. Вы можете сделать это вручную (до развертывания на AWS) или автоматически (в CI/CD).

4. Если не ограничено AWS

Я просто ответил на связанный вопрос, не ограничиваясь AWS.

Ответ 2

Основные понятия

Чтобы развернуть бесплатное приложение, вам нужно узнать о трех концепциях: микросервисах, контейнерах и менеджерах процессов. Я обсужу их с немного более подробной информацией и несколькими ссылками, чтобы вы начали:

Microservices

Microservices - это архитектура, которая позволяет разделить ваше приложение на более мелкие сервисы. Это имеет несколько преимуществ: 1- Услуги легко проверяются. 2. Услуги могут быть заменены. 3- Услуги могут масштабироваться отдельно.

Монолит против дизайна микросервисов

Контейнерные

Практически каждое полезное приложение имеет как минимум десятки зависимостей. Вы можете устанавливать зависимости на целевые машины, но, безусловно, вы столкнетесь с несколькими проблемами. Такие программы, как Docker, позволяют создавать контейнер для вашего приложения и развертывать этот контейнер в облаке. (Независимо от поставщика облака) Подробнее...

Менеджеры процессов

Менеджеры процессов обеспечивают бесперебойную работу вашего приложения, а все части здоровы. Если ваше приложение выходит из строя, оно может легко перезапустить приложение.

Развертывание серверного приложения NodeJS/React Application

Примечание. Этот подход не работает, если вы выполняете рендеринг сервера с помощью ReactJS. Перейдите к следующему варианту.

Вы можете просто создать свое приложение и развернуть его на статический веб-сайт S3. Этот параметр работает, если вы используете архитектуру микросервисов для ветки вашего API от вашего реагирующего приложения.

Создание статического веб-сайта в S3 очень просто:

  • Создайте ведро в S3 с точным названием веб-сайта. Пример: blog.stackoverflow.com.
  • Включить статический хостинг
  • Создайте запись A в маршруте 53 и подключите ее к создаваемому вами ведру.

Для получения дополнительной информации проверьте, что AWS удобна документация.

Развертывание приложения NodeJS в EC2

Вы можете запускать разные экземпляры EC2 для каждого микросервиса. (API, приложение React и т.д.) Для обеспечения бесперебойной работы вашего приложения вам необходимо использовать диспетчер процессов, например PM2.

Бонус: используйте Sentry для обработки ошибок

В идеале, вы должны иметь модульные тесты, чтобы предотвратить доставку багги-кода для производства. Но мир несовершенен, и хорошо получать любые потенциальные ошибки, которые происходят на клиенте. Введите Sentry