Несколько недель назад я написал Статическое приложение React за 20 минут с DigitalOcean, чтобы помочь другу создать сайт для своего дизайнерского портфолио. Я говорил о том, что современные инструменты для разработки веб-приложений могут быть запутанными и часто ненужными для случайного разработчика. Большинство из нас просто хотят быстро создать сайт.

Поэтому, когда я позже пересмотрел сообщение в блоге, я заметил, что минимальная настройка nginx, React и Digitalocean на самом деле звучит довольно сложно. Настройка статического приложения React должна выполняться с меньшим количеством конфигураций. Взглянув еще раз на проблему, я обнаружил, что то, что в DigitalOcean требовало дюжины шагов, можно было сделать в AWS менее чем за несколько шагов.

В этом посте я расскажу о том, как получить простое приложение React, размещенное в AWS, менее чем за 20 минут.

Настройка АМС

  1. Зарегистрируйте учетную запись AWS.
  2. Перейдите в конструктор статических веб-сайтов консоли AWS. (К чему мы вернемся позже.)

Создайте приложение React и загрузите

Создать React-приложение

Предпосылки:

  1. Если у вас его еще нет, вам понадобится Доморощенный
  2. После установки Homebrew вам необходимо установить nvm:
    brew install nvm
  3. С установленным nvm установите последнюю версию node:
    nvm install node && nvm use node
  4. Используйте также последнюю версию npm:
    npm install -g npm

Создайте приложение React:

npm install -g create-react-app
create-react-app hello_world
cd hello_world

Ради интереса мы также установим Styled Components!

npm install --save styled-components

Подавайте свое приложение локально и просматривайте его в своем браузере с помощью npm start.

Давайте сделаем его немного более интересным с фиолетовым фоном.

Просто добавьте несколько стилизованных компонентов, как показано на скриншоте.

Результат потрясающий.

Загрузите приложение в AWS

Процесс загрузки прост:

  1. Создайте приложение React и заархивируйте его:
    npm run build
    zip -r build.zip build
  2. Вернитесь к конструктору статических веб-сайтов консоли AWS и создайте новый веб-сайт.
  3. Введите имя для вашего сайта:

4. Загрузите свой build.zip в AWS

Вот и все! Затем AWS будет обслуживать ваш веб-сайт из корзины S3 (где хранятся ваши файлы) через Cloudfront (для быстрой доставки контента). Диаграмма Используемые сервисы AWS прекрасно объясняет это.

Завершение настройки Cloudfront может занять несколько минут, но вы сможете просматривать свое приложение React по вашему URL-адресу .cloudfront.net после его завершения.

Следующие шаги

Все, что нам нужно сделать, когда мы хотим выпустить новую сборку нашего приложения React, это:

  1. Создайте приложение React и заархивируйте его:
    npm run build
    zip -r build.zip build
  2. Перейдите в конструктор статических веб-сайтов консоли AWS и загрузите файл build.zip.

Наконец, следует отметить, что, как и DigitalOcean, AWS является платным сервисом. Хотя некоторые сервисы AWS предлагают уровень бесплатного пользования, обязательно ознакомьтесь с их ценовой структурой для сервисов S3 и Cloudfront, чтобы понять свои затраты.

Если вы хотите обслуживать приложение React с помощью личного домена, обязательно создайте зону хостинга в Настройках AWS Route 53 и создайте запись A, указывающую на ваш дистрибутив Cloudfront.