Создание статического веб-сайта на Amazon S3 с микросервисами

Фон

Тенденция к размещению статических сайтов на Amazon S3 становится очень популярной. Этот подход был принят многими организациями из-за его преимуществ перед традиционным серверным хостингом. Статические веб-сайты — это веб-сайты, которым не требуется среда выполнения, такая как JRE, .NET и т. Д., И в основном они основаны на HTML, CSS, JS и других статических ресурсах (аудио / видеофайлы, документы и т. Д.). AWS предоставляет все необходимые сервисы и инструменты, которые позволяют очень легко создавать статические веб-сайты и управлять ими в облаке AWS.

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

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

Архитектура

S3

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

Route53

Когда вы разместите свой веб-сайт на S3, у вас будет конечная точка веб-сайта по умолчанию для региона AWS, которую вы сможете напрямую использовать для доступа к веб-сайту. У вас также есть возможность сопоставить свой пользовательский домен с указанием конечной точки статического веб-сайта по умолчанию, и именно здесь Route53 вступает в игру. Подробности о том, как использовать Route53 для этой цели, можно найти здесь.

Cognito (необязательно)

Чтобы обеспечить механизм аутентификации для вашего сайта, вы можете использовать AWS Cognito. Вы можете создать пул пользователей и предоставить логин пользователям в этом пуле. Пулы пользователей Cognito предлагают функциональные возможности для поставщиков федеративных удостоверений (например, входа в систему через Facebook и Google), восстановления пароля и безопасности авторизации пользователей в облаке.

Разработка микросервисов (с использованием Lambda, API Gateway и RDS)

Вы можете разрабатывать микросервисы, используя комбинацию API Gateway и AWS Lambda. Эти микросервисы могут быть использованы непосредственно вашим сайтом для получения и отправки данных из источника данных. Следовательно, ваш статический веб-сайт также может иметь функциональность динамической веб-страницы. Например, в случае события (например, нажатие кнопки, отправка формы и т. Д.) Вы можете использовать Jquery Ajax для вызова микросервиса для загрузки данных и отображения на веб-странице.

Вы можете создавать микросервисы для полных операций CRUD и многое другое с помощью этих сервисов на своем веб-сайте, чтобы сделать ваш сайт полностью динамичным. Точно так же вы можете создавать микросервисы, которые взаимодействуют с другими сервисами AWS, такими как SES, в случае, если вы хотите отправлять уведомления по электронной почте через веб-сайт.

По сути, вы используете AWS SDK для написания лямбда-функций, которые обеспечивают функциональность для вашего микросервиса. Через Lambda вы можете общаться с любым сервисом AWS. API Gateway интегрируется с Lambda, чтобы предоставить вам конечную точку API.

Пошаговое руководство

Основные конфигурации

1. Перейдите в консоль S3 и создайте новое ведро с настройками по умолчанию

2. Перейдите в свойства вашего ведра и выберите опцию « Статический хостинг сайтов».

3. Включите опцию « Использовать это ведро для размещения веб-сайта ».

4. Укажите имена HTML, которые будут отображаться в качестве домашней страницы, и HTML-файл, который будет отображаться в случае возникновения ошибки на вашем сайте.

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

Теперь перейдите в раздел « Права » вашего сегмента и добавьте в раздел « Политика сегментов» следующее:

{
   "Version":"2018-07-15",
   "Statement":[{
       "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
         "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::your-bucket-name/*"
       ]
     }
   ]
 }

<!-- Sample policy -->
<CORSConfiguration>
       <CORSRule>
              <AllowedOrigin>*</AllowedOrigin>
              <AllowedMethod>GET</AllowedMethod>
              <MaxAgeSeconds>3000</MaxAgeSeconds>
              <AllowedHeader>Authorization</AllowedHeader>
       </CORSRule>
       <CORSRule>
              <AllowedOrigin>*</AllowedOrigin>
              <AllowedMethod>POST</AllowedMethod>
              <MaxAgeSeconds>3000</MaxAgeSeconds>
              <AllowedHeader>Authorization</AllowedHeader>
       </CORSRule>
</CORSConfiguration>

headerJson.put("Access-Control-Allow-Origin", "*");