Если вы были частью сообщества разработчиков в течение последних нескольких лет, вы, вероятно, устали слышать слово безсерверный. Или вы одержимы этой концепцией и хотите сделать все бессерверным. Если вы находитесь в первом лагере, вы также можете спросить себя: «Что за бессерверность вообще означает? Как я могу работать без сервера? ». Я горжусь тем, что вы спросили об этом, и ответ прост.

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

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

Постановка приложения

Поскольку мы живем в будущем, давайте воспользуемся встроенным инструментом CRA для загрузки нового приложения React. Выполните эту команду:

npx create-react-app basicapp

Теперь у вас должно быть очень простое приложение с подходящим названием. Следующее, что нам нужно сделать, это настроить инструмент aws cli, если у вас его еще нет. Само собой разумеется, что вам понадобится учетная запись AWS, если у вас ее еще нет.

Если вы используете Ubuntu, вы можете обновить apt, а затем запустить следующее:

sudo apt-get install awscli

Самый простой способ получить его на OSX - через pip:

pip install awscli

С помощью любого из этих методов вы все равно можете не получить самую последнюю версию инструмента, в зависимости от версии вашей ОС, вашей версии pip и т. Д. Чтобы установить последнюю версию из исходного кода (v2 на момент написания ), запустите в своем терминале следующее:

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

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

aws --version
or
which aws

Если вы получили что-то вроде «команда не найдена» или вообще ничего, вы можете попробовать закрыть и перезапустить терминал или запустить bash --login, прежде чем углубляться в поиск и устранение неисправностей в кроличьей норе.

Магия AWS

А теперь пора зайти на старую консоль и пощелкать по ней. Нам нужно будет создать новую корзину s3, а затем настроить ее как статический веб-хост. Есть несколько мелких вещей, которые нам нужно настроить, чтобы сделать его совместимым с React, но мы вернемся к этому через минуту. Я также опубликую команды awscli, которые вы могли бы запускать вместо этого с помощью консоли после каждого шага (на случай, если вы один из этих людей).

Во-первых, давайте создадим ведро:

Убедитесь, что вы сняли флажок Блокировать весь общий доступ и что все очищено. Вы можете съежиться от этой мысли, но на самом деле AWS рекомендует именно это. Вы можете узнать больше о рекомендуемой политике корзины для статических веб-сайтов здесь.

Чтобы создать новую корзину в командной строке:

aws s3api create-bucket --bucket basic-app-bucket --region us-east-1

Это создает сегмент «базовое приложение-ведро» в регионе us-east-1 и ничего больше. Далее следует преобразование корзины в статический хост. AWS сделал это невероятно легко через консоль (и cli), на самом деле это всего лишь вопрос нескольких щелчков мышью.

Сначала нажмите на название своего ведра в списке ведер (хи-хи). После того, как ваша корзина будет поднята, щелкните вкладку «Свойства», чтобы получить примерно следующее представление:

Затем нажмите «Статический хостинг веб-сайтов» и установите следующие параметры:

Теперь для других типов веб-сайтов, не встроенных в React, документ об ошибке не будет тем же файлом, что и индексный документ. Но, будучи супер особенной снежинкой-единорогом, React нуждается в этом для целей маршрутизации. На самом деле это потому, что файл index.html является точкой отсчета для всех упакованных, миниатюрных Javascript и статических ресурсов вашего приложения после его сборки. Это все AWS и плохие объяснения, которые нам нужны на данный момент.

Ах да, вот как переключить ведро на статический хостинг с помощью awscli:

aws s3 website s3://basic-app-bucket/ --index-document index.html --error-document index.html

Перенос вашего приложения в облако

Единственное, что осталось сделать, - это заставить его жить. Самый простой способ добиться этого - построить свой проект npm run build, а затем скопировать содержимое сборки в S3. Поскольку React поддерживает настраиваемые директивы сценариев в package.json, давайте создадим специальный сценарий развертывания, который значительно облегчит нашу жизнь.

Откройте package.json и добавьте следующую строку в раздел «скрипты»:

"deploy": "aws s3 sync build/ s3://basic-app-bucket",

Это добавит новую директиву npm run, которую мы можем использовать для простого развертывания содержимого нашей папки сборки в выделенной нами корзине S3. Если вы решите повторно использовать этот код для новых проектов, просто убедитесь, что вы изменили имя сегмента, чтобы избежать катастрофы.

Итак, теперь мы можем создать и развернуть наше приложение на S3 с помощью следующей команды:

npm run build && npm run deploy

… И волшебный awscli отправит весь ваш замечательный код приложения в облако, внутри созданного нами ранее ведра. Как это для простого развертывания? Чтобы просмотреть свой веб-сайт, вам просто нужно перейти к конечной точке, которую мы видели ранее на экране конфигурации S3 (не беспокойтесь об использовании моей, она исчезнет, ​​прежде чем вы прочитаете это):

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

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

Поскольку это руководство посвящено развертыванию на S3 с помощью React и awscli, я не буду вдаваться в процесс настройки личного домена и тому подобное. Однако, чтобы выбрать правильный путь, вам необходимо создать дистрибутив CloudFront и новый сертификат в диспетчере сертификатов. Затем вы создадите псевдоним CNAME в Route-53, чтобы указать на ваш дистрибутив CloudFront. Вот и все, что я говорю.

Надеюсь, этот урок помог, а теперь иди и создай что-нибудь потрясающее и отдай мне всю заслугу!

Об авторе

Эндрю - инженер по кибербезопасности и разработчик программного обеспечения, специализирующийся на моделировании фишинга. Когда он не пишет статьи, вы можете поймать его в Twitter или Linkedin.