В этом посте вы узнаете больше об Amazon Web Services (AWS) на практическом примере размещения статического веб-сайта на Amazon Simple Storage Service (S3). За пять простых шагов вы можете разместить статический веб-сайт на S3.
Хотя доступно множество облачных провайдеров, я использую AWS, потому что:
- У них есть «Уровень бесплатного пользования», который является огромным преимуществом в сочетании с и без того низкими затратами.
- Их услуги предлагают непревзойденный масштаб, эластичность, производительность и безопасность.
- Это один из самых простых способов выучить, если использовать его в качестве практических примеров.
Существуют и другие облачные платформы, такие как Microsoft Azure, Google Cloud Platform и IBM Cloud Computing. У каждого из них есть сервис, аналогичный S3, поэтому концепции, изложенные в этом посте, применимы и к этим другим провайдерам.
Большинство веб-сайтов становятся статическими, что означает, что на них отсутствует код на стороне сервера и они состоят только из HTML, CSS и JavaScript. Без кода на стороне сервера для запуска нет причин размещать их на традиционном сервере.
Используя функцию хостинга статических веб-сайтов в корзине S3, мы размещаем статические веб-сайты за один-два доллара в месяц и масштабируемся для обслуживания миллионов пользователей.
Я очень верю в обучение на практике. Первым сервисом, который я узнал от AWS, был S3. Я узнал об этом, пройдя через процесс размещения на нем своего личного сайта. Этот скачок положил начало моей страсти ко всему, что связано с Amazon Web Services. Это то, что привело меня к тому, что я стал сертифицированным архитектором решений AWS.
Вы хотите узнать больше об AWS на практическом примере? Тогда приступим.
Немного истории
В ноябре 2004 года Amazon анонсировала свой первый сервис для AWS - Simple Queue Service (SQS). Это было первым намеком на то, что мы часто называем облаком, но это не рассматривалось как серьезное нарушение статус-кво.
Весной 2006 года Amazon представила Simple Storage Service (S3). В отличие от SQS, S3 не только нарушит статус-кво, но и станет основным сервисом AWS.
S3 состоит из корзин, которые являются контейнерами для хранения файлов. Корзина - это хранилище плоских объектов с высокой доступностью и высокой надежностью, не имеющее иерархии.
С 2006 года сервис значительно расширился. S3 является основополагающим строительным блоком для других сервисов AWS в экосистеме. Не верите мне? Посмотрите в журнале событий, когда S3 в Вирджинии отключился в начале этого года.
Как видно из этого рисунка, отключение затронуло множество сервисов AWS. Это связано с тем, что некоторые сервисы AWS внутренне полагаются на S3.
Фактически, AWS Health Dashboard размещается вне S3. Эй, что за переход, верно?
1. Присвоение имени вашей корзине S3
Прежде чем вы начнете размещать свой потрясающий статический веб-сайт из S3, вам сначала понадобится корзина. Для этого сообщения в блоге критически важно, чтобы у корзины было то же имя, что и у вашего домена.
Если домен вашего веб-сайта www.my-awesome-site.com, то имя сегмента должно быть www.my-awesome-site.com.
Причина этого связана с тем, как запросы маршрутизируются на S3. Запрос поступает в сегмент, а затем S3 использует заголовок Host в запросе для маршрутизации в соответствующий сегмент.
Хост: www.my-awesome-site.com
2. Настройка сегмента S3 для статического хостинга веб-сайтов.
Хорошо, у тебя есть ведро. У него то же имя, что и у вашего домена, да? Пришло время настроить ведро для статического хостинга веб-сайтов.
Угадай, что? Включить статический хостинг веб-сайтов для вашей корзины - это всего лишь несколько щелчков мышью в консоли AWS.
- Перейдите к S3 в Консоли AWS.
- Нажмите в ведро.
- Щелкните раздел «Свойства».
- Выберите вариант «Статический хостинг веб-сайтов».
- Выберите «Использовать этот сегмент для размещения веб-сайта».
- Введите index.html в качестве индексного документа.
Или, если вы любите командные строки и не хотите иметь на своем пути графический интерфейс пользователя (GUI), эта команда AWS CLI включает хостинг веб-сайтов для вашей корзины.
aws s3 website s3://www.my-awesome-site.com/ --index-document index.html --error-document error.html
Ваша корзина настроена для статического хостинга веб-сайтов, и теперь у вас есть URL-адрес веб-сайта S3, подобный этому http://www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com/.
Ваша корзина обслуживает ваш статический веб-сайт, поэтому он должен быть доступен для всех в мире. Это называется анонимным доступом к корзине.
По умолчанию любые новые сегменты, созданные в учетной записи AWS, лишают вас возможности добавлять политику сегментов общего доступа. Это ответ на недавние дырявые ведра, в которых конфиденциальная информация была раскрыта злоумышленникам. Однако для нашего случая использования нам нужна политика сегмента общего доступа. Для этого перед добавлением политики корзины необходимо выполнить следующие действия.
- Щелкните в ведре.
- Выберите вкладку «Разрешения» вверху.
- В разделе «Настройки общего доступа» мы хотим нажать «Изменить».
- Измените «Блокировать новые общедоступные политики корзины», «Блокировать общедоступный доступ и доступ между учетными записями, если в корзине есть общедоступные политики» и «Блокировать новые общедоступные списки ACL и загрузку общедоступных объектов» на ложные и Сохранить.
Вы должны выполнить этот шаг перед добавлением политики сегмента в сегмент статического веб-сайта.
Теперь вы должны обновить политику сегмента вашей корзины, чтобы иметь общий доступ на чтение для всех в мире. Чтобы обновить политику корзины в Консоли AWS, выполните следующие действия:
- Перейдите к S3 в Консоли AWS.
- Щелкните в ведре.
- Щелкните раздел «Разрешения».
- Выберите «Bucket Policy».
- Добавьте следующую политику сегмента и затем сохраните
{
"Version": "2008-10-17",
"Id": "PolicyForPublicWebsiteContent",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.my-awesome-site.com/*"
}
]
}
Или для фанатов командной строки, если policy.json - это указанная выше политика корзины, используйте:
aws s3api put-bucket-policy --bucket www.my-awesome-site.com --policy file://policy.json
Важно обратить внимание на "Principal": { "AWS": "*" }section политики корзины. Эта часть политики открывает доступ к вашему ведру для всех в мире. Любой объект в этом сегменте доступен для всех по URL-адресу веб-сайта S3. Не помещайте в этот сегмент ничего, чем вы не хотите делиться со всем миром.
3. Добавление записи CNAME для URL вашего сегмента.
У вас есть корзина, настроенная для статического хостинга веб-сайтов. У него есть URL-адрес веб-сайта S3. Вы понимаете, что это ведро доступно миру? Вы путешествуете прямо через это.
Чтобы пользователь мог загрузить ваш веб-сайт S3, вам необходимо обеспечить сопоставление вашего доменного имени www.my-awesome-site.com с URL-адресом вашего веб-сайта S3 www.my-awesome-site.com.s3 -website-us-east-1.amazonaws.com. Это сопоставление часто называют записью CNAME внутри записей серверов доменных имен (DNS).
www.my-awesome-site.com CNAME www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com
Процесс выполнения этого шага зависит от вашего поставщика DNS. В общем, это то, что вы ищете в своем DNS-провайдере:
- Создайте запись для хоста типа
www - Тип записи должен быть
CNAME (Canonical name) - Значение должно быть URL вашего веб-сайта S3
www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com
4. Загрузка статического веб-сайта
Ваша корзина настроена для статического хостинга веб-сайтов. У вас есть запись CNAME в ваших записях DNS, которая преобразуется в URL-адрес веб-сайта S3? Отлично, тогда пора шоу.
Помните, что S3 - это хранилище плоских объектов, что означает, что каждый объект в корзине представляет ключ без какой-либо иерархии. Консоль AWS S3 заставляет вас думать, что существует структура каталогов, но ее нет. Все, что хранится в S3, - это ключи с префиксами.
Это важно отметить, потому что, если у вас есть такая структура веб-сайта:
about/ index.html contact/ index.html css/ styles.min.css ... ... index.html
Легко предположить, что это традиционная структура каталогов. На самом деле, Консоль AWS S3 тоже заставляет вас поверить в это.
Но на самом деле about не каталог. Это префикс для клавиши index.html.
Разобравшись с этим, давайте загрузим ваш статический веб-сайт в недавно настроенную корзину веб-сайтов S3!
Если вы являетесь пользователем графического интерфейса, вы загружаете свой статический веб-сайт в S3 через консоль AWS, выполнив следующие действия:
- Перейдите к S3 в Консоли AWS.
- Нажмите в ведро.
- Нажмите кнопку «Загрузить».
- Перетащите или выберите «Добавить файлы» и добавьте весь статический каталог веб-сайта.
- Нажмите "Далее".
- Оставьте разрешения по умолчанию, которые предлагает S3.
- Нажмите "Далее".
- Оставьте разрешения по умолчанию для «Установить свойства».
- Нажмите "Далее".
- Щелкните «Загрузить».
Для гуру командной строки эти 10 шагов сводятся к одной операции командной строки.
aws s3 cp personal-blog/src/_site/ s3://www.my-awesome-site.com/ --recursive
5. Убедитесь, что это сработало
Ваш статический веб-сайт был загружен в корзину вашего веб-сайта S3. Вы можете перейти на www.my-awesome-site.com, и ваш статический веб-сайт загрузится из корзины S3.
Преимущества
За пять простых шагов вы узнали, как разместить статический веб-сайт на AWS S3. Не говоря уже о том, что вы получили некоторые преимущества от переноса статического веб-сайта на S3.
Низкая стоимость - размещение веб-сайта в S3 не требует дополнительных затрат. Вы платите стандартные цены S3 за запросы GET и передачу данных из корзины, когда пользователь посещает ваш сайт.
- GET-запросы стоят 0,004 USD за 10 000 запросов.
- Стоимость исходящей передачи данных составляет 0,090 доллара США за ГБ (до 10 ТБ в месяц).
Пример с разбивкой по стоимости. Допустим, www.my-awesome-site.com загружает 20 ресурсов. Общий размер этих ресурсов за посещение составляет 1 МБ. Среднее общее количество посещений в месяц составляет 20 000 человек. Затем мы оцениваем общую ежемесячную стоимость S3 примерно в 1,96 доллара в месяц.
Не так давно вы платили 10 долларов в месяц, так что 2 доллара того стоят.
Техническое обслуживание - ваш статический веб-сайт теперь находится в S3. Больше нет кода на стороне сервера, который нужно поддерживать, и нет веб-серверов, которые нужно настраивать и поддерживать в актуальном состоянии.
Масштабирование - S3 - это высокодоступный и надежный сервис, поддерживаемый AWS. Если количество пользователей вашего веб-сайта увеличивается с 10 до 10 миллионов, S3 автоматически масштабирует ваш сайт.
Безопасность. У вас нет запущенного сервера, который вы обслуживаете. Таким образом вы избегаете ошибок конфигурации, которые делают вас уязвимыми для атак. Вы по-прежнему несете ответственность за безопасность своей корзины . Помните, что корзина вашего веб-сайта является общедоступной!
У вас за плечами несколько серьезных побед. С настройкой веб-сайта S3 у вас есть фундамент для дальнейшего расширения и использования AWS.
Заключение
Существует много информации об AWS и широком спектре услуг, которые они предлагают. Трудно найти информацию, которая вам нужна, чтобы учиться и быстро прогрессировать.
Я надеюсь, что этот пост помог вам прорезать всю информацию и достичь чего-то практического. На мой взгляд, лучший способ изучить AWS - это учиться на практике. Итак, за пять простых и понятных шагов вы смогли узнать, как разместить свой статический веб-сайт на AWS S3.
Вы нашли этот пост полезным для получения дополнительной информации об AWS? Если у вас есть какие-либо вопросы или вы где-то заблокированы, пожалуйста, свяжитесь со мной. Я более чем счастлив помочь.
Изучите AWS на практике
Если вам понравился этот пост и вы хотите узнать больше об Amazon Web Services, я создал новый курс о том, как размещать, защищать и доставлять статические веб-сайты на AWS! Это книга и видеокурс, который рассекает море информации, чтобы ускорить ваше изучение AWS. Предоставляя вам структуру, которая позволяет вам изучать сложные вещи, фактически используя их.
Зайдите на целевую страницу, чтобы получить копию для себя! Используйте промокод medium235, чтобы получить скидку 35%.
Хотите добавить бесплатный SSL на свой статический веб-сайт и оптимизировать задержку доставки? Затем прочитайте мою последующую публикацию о том, как использовать AWS CloudFront для безопасной доставки с малой задержкой на вашем веб-сайте S3.
