Хостинг статического веб-сайта с помощью AWS S3 — это хороший и быстрый способ показать миру свое приложение react-redux. В этом блоге я проведу вас через этот простой процесс.

Если у вас еще нет учетной записи AWS, вы можете посетить Amazon Web Services. А если вы не знакомы с S3, то можете посмотреть здесь: S3.

При входе в Консоль управления AWS выберите S3 в списке «Службы».

1. Создать сегмент

Прежде всего, нам нужно создать корзину, в которой будут храниться файлы нашего приложения. Нажмите синюю кнопку Create bucket.

Нам нужно указать имя корзины и регион. URL-адрес веб-сайта будет состоять из этих двух значений:

bucket-name.s3-website.bucket-region.amazonaws.com

Имя корзины должно быть уникальным, поэтому рекомендуется использовать, например, домен вашей компании.

2. Установите разрешения для сегмента

Как только мы создали корзину, нам нужно сделать ее общедоступной, чтобы любой мог получить к ней доступ. Выберите корзину из списка, затем выберите вкладку Permissions и нажмите Bucket Policy. Вставьте JSON ниже в поле редактирования. Не забудьте настроить значение свойства Resource, чтобы включить ARN вашего сегмента (вы можете найти ARN над полем редактирования). Однако не изменяйте значение Version. Это постоянное выражение, которое указывает версию языка политики IAM, используемую в вашем заявлении о политике, а не дату редакции вашего заявления о политике. Нажмите Save, и теперь любой может получить доступ к данным в корзине.

{ 
   "Version": "2012-10-17", 
   "Statement": [ 
        { 
           "Sid": "AddPerm",
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::s3-hosted-    website.brightinvetnions.pl/*" 
         } 
     ] 
}

3. Включить размещение статического веб-сайта

Выберите вкладку Properties и поле Static website hosting.

Установите флажок Use this bucket to host a website. Укажите имя файла, который является отправной точкой вашего приложения, обычно это index.html. Приложение готово, и вы можете получить к нему доступ по ссылке в верхней части коробки.

Есть еще одна вещь, специфичная для приложений, использующих API истории браузера (например, приложение react-router). Если вы попытаетесь получить доступ к какому-либо ресурсу напрямую, вы получите сообщение об ошибке, как показано ниже:

Это потому, что приложение недостаточно статично :) Допустим, вы хотите получить доступ к http://s3-hosted-website.brightinventions.pl.s3-website.eu-central-1.amazonaws.com/users. AWS не найдет ресурс users напрямую (поскольку статический ресурс в корзине не существует) и поэтому покажет ошибку. Вот почему рекомендуется также установить index.html как Error document. Теперь вместо отображения страницы с ошибкой AWS перенаправит вас на index.html, и приложение сможет успешно направить вас на нужную страницу. Это, однако, перенаправит все ошибки в приложение, поэтому мы должны обязательно обрабатывать их внутри приложения.

И это он! Вы только что разместили свой первый сайт на AWS S3 :)

Первоначально опубликовано на brightinventions.pl 20 апреля 2018 года.

Автор Агнешка Ольшевска, инженер-программист @ Bright Inventions

"Электронное письмо"