Как разместить статический веб-сайт на Amazon S3 – CloudSavvy IT

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

Подождите, мне не нужен сервер?

Если ваш сайт не использует какую-либо обработку на стороне сервера (например, PHP), простое хранение файлов на S3, настройка корзины для размещения сайта и указание вашего DNS на корзину заменит использование NGINX или Apache.

«Обработка на стороне сервера» намного менее широкая, чем кажется. То, что ваш веб-сайт «статичен», не означает, что он выглядит как страница GeoCities 1990-х годов без JavaScript. Все, что «статичность» означает, что все ваши ресурсы (HTML-страницы, JS-код, таблицы стилей CSS) не изменяются в ответ на запросы. В таких языках, как PHP, вся обработка выполняется на стороне сервера; если два пользователя запрашивают страницу своего профиля, сервер отправит им разные страницы. Это невозможно сделать на S3, поэтому, если вы используете PHP, вам придется настроить настоящий веб-сервер. В первую очередь это относится к WordPress, который использует PHP для обслуживания контента.

Однако все чаще веб-сайты становятся большими приложениями JavaScript. В такой среде, как React, все, что нужно доставить, – это один файл bundle.js. Это задача клиента, а не сервера, запускать этот файл и запускать приложение. Подобные приложения можно без проблем размещать на S3. Это также не избавит вас от вашего бэкэнда – ваше приложение все еще может взаимодействовать с сервером API и взаимодействовать с базой данных, вам просто нужно будет аутентифицировать запросы, поступающие от клиента. В сочетании с AWS API Gateway и Lambda вам, возможно, не придется запускать один сервер EC2.

Не дайте себя обмануть простой настройкой – для небольших сайтов S3 может сократить ваши расходы до копейки на доллар, а поскольку нет серверов, о которых нужно беспокоиться, он отлично масштабируется до миллионов пользователей. Вы просто платите фиксированную плату за входящую и исходящую пропускную способность, а также любые связанные с этим расходы на Lambda, RDS или любые другие услуги, которые вы используете с вашим приложением. Даже для крупных предприятий, развертывающих производственные приложения, хостинг от S3 является очень жизнеспособным и экономичным вариантом, если ваше приложение может его поддерживать.

S3 не поддерживает HTTPS для статических веб-сайтов, что было бы препятствием, но вы можете поставить его за CloudFront (CDN AWS), который, помимо улучшенного кэширования и производительности, может использовать собственный домен с HTTPS. У него даже есть более щедрый уровень бесплатного пользования для передачи данных – 50 ГБ вместо 1 ГБ для S3.

Настройка этого

В этом руководстве вместо развертывания простой HTML-страницы мы развернем стартовый проект из приложения create-react-app, поскольку он лучше демонстрирует истинный потенциал S3.

После запуска yarn build у нас остались следующие ресурсы в папке / build:

Вся эта папка будет скопирована на S3. Перейдите в Консоль управления S3и нажмите “Создать сегмент”.

Дайте ему имя (оно должно быть уникальным для всех аккаунтов AWS) и нажмите «Далее». Здесь вы можете включить управление версиями, но больше не о чем думать. Снова нажмите «Далее».

На следующем экране снимите флажок «Блокировать весь общий доступ». По умолчанию это включено, чтобы объекты в корзинах не были видны в открытом Интернете, что сделало бы вашу корзину недоступной. Появится всплывающее окно AWS с предупреждением о необходимости снова включить его, если вы не используете «конкретные и проверенные варианты использования», такие как статический хостинг веб-сайтов. Поскольку это именно то, что мы делаем, вы можете игнорировать это.

Нажмите «Создать» на ведре и откройте его.

Вы можете вручную перетащить содержимое своей HTML-папки в корзину, но лучше использовать интерфейс командной строки AWS для синхронизации всей папки с корзиной. Команда довольно проста:
aws s3 синхронизация. s3: // имя-ведра
Теперь вы должны увидеть содержимое своей папки в корзине:

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

Это включает статический хостинг веб-сайтов, но не предоставляет явно доступ для чтения. Для этого вам необходимо добавить следующую политику корзины в разделе Permissions> Bucket Policy:
{“Версия”: “2012-10-17”, “Заявление”:[{
“Sid”:”PublicReadGetObject”,
“Effect”:”Allow”,
“Principal”: ““,
“Action”:[“s3:GetObject”], «Ресурс»:[“arn:aws:s3:::example-bucket/“
]}]}

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

Теперь ваша корзина будет доступна для просмотра со следующей конечной точки:
http://BUCKET-NAME.s3-website.REGION.amazonaws.com/

Большой! Все работает правильно. Клиент запрашивает корзину, которая обслуживает файл index.html, который загружает все необходимые ресурсы JS и CSS и отображает вращающийся логотип React.

Однако эта конечная точка явно не удобна для пользователя, поэтому вы, вероятно, захотите настроить собственный домен для своего сайта S3. Самый простой способ – использовать CloudFront для обслуживания запросов, что в любом случае является единственным способом поддерживать HTTPS. Если вы не хотите использовать CloudFront, вы можете настроить собственный домен с помощью Route 53 в качестве псевдонима конечной точки вашего сегмента по умолчанию.

Перейдите в CloudFront Console. Выберите «Создать распространение» и выберите «Интернет» в качестве типа. На следующем экране в разделе «Исходное доменное имя» выберите свой сегмент S3 из раскрывающегося списка. Не забудьте также установить флажок «Перенаправить HTTP на HTTPS».

Далее вы захотите настроить свой домен. Введите альтернативное доменное имя и выберите «Пользовательский SSL». Запросите один из ACM; Проверка может занять до получаса в зависимости от вашего DNS-провайдера, хотя, если вы используете Route 53, вы можете создать и проверить запись автоматически в течение нескольких минут.

После этого нажмите «Создать распространение» внизу и подождите около 15 минут, чтобы CloudFront все уладил. Как только это будет сделано, вы сможете посетить свое собственное доменное имя и увидеть, как ваше приложение обслуживается непосредственно из S3.

Если вы хотите упростить управление версиями, вы можете настроить конвейер автоматического развертывания с помощью AWS CodePipeline. Просто выберите развертывание на S3, и AWS автоматически развернет обновления исходного кода, включая артефакты сборки.