Часть 2 полного шаблона AWS

Это второй учебник из серии Полный шаблон AWS для быстрого создания целых интернет-продуктов в облаке Amazon.

Добро пожаловать в The Complete AWS Boilerplate. Сегодня мы узнаем, как размещать веб-сайты на Amazon S3 за 0,01 доллара в месяц (на самом деле затраты могут вырасти до 0,39 доллара в месяц на 1 миллион посетителей). Начнем с нескольких концепций.

Что такое Amazon S3?

S3 расшифровывается как «Simple Storage Service», что по сути является облачным жестким диском. Вы можете размещать изображения, видео, текст и даже код и веб-сайты. S3 организован по «корзинам», в которых мы группируем и храним файлы. У вас может быть до 100 корзин, прежде чем потребуется запрашивать дополнительные корзины у Amazon.

Сегодня мы расскажем только о том, как размещать веб-сайты на S3, чтобы вы могли показать своим друзьям и получить мотивацию (увидеть - значит поверить). Для начала загрузите этот zip-файл здесь и распакуйте его. Вы должны увидеть следующее содержимое:

Эти файлы представляют собой веб-сайт, который мы собираемся разместить на S3. Перейдите в Консоль AWS, найдите S3 и выберите первый вариант.

Затем нажмите «Create Bucket», и вы увидите экран ниже:

Здесь следует отметить кое-что важное. Мы можем дать корзине любое случайное имя, но если мы хотим размещать на доменном имени (например, https://www.mydomain.com), вам нужно будет назвать вашу корзину S3 www.mydomain.com. В моем случае я хочу разместить свой домен на https://learnaws.tech, поэтому я буду называть свою корзину learnaws.tech. Когда будете готовы, нажмите «Далее».

Обратите внимание, что я не включил www в свое доменное имя. Это действительно имеет значение, потому что теперь я не могу получить доступ к своему веб-сайту www.learnaws.tech. Есть 2 способа обойти это. Я могу либо создать еще одну корзину S3 с этим именем, либо использовать AWS Route53 для перенаправления всех запросов на www.learnaws.tech на learnaws.tech. Мы узнаем, как это сделать, в следующем уроке.

Следующий экран - «Параметры настройки». В будущем расширенном руководстве мы рассмотрим все эти параметры, а пока мы просто добавим тег use-case со значением website-hosting. Помните, что теги - это часть хороших привычек, которые мы хотим выработать для чистого облака. После добавления тега нажмите «Далее».

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

Когда будете готовы, нажмите «Далее».

И «Создать ведро», чтобы все закончить.

Теперь мы вернулись к консоли S3. Щелкните только что созданную корзину, а затем нажмите кнопку «Загрузить» в верхнем левом углу.

Перетащите файлы из архива, который вы скачали ранее, и нажмите «Загрузить». Вы увидите индикатор выполнения ниже.

Когда загрузка будет завершена, вы увидите свои загруженные файлы.

Щелкните файл index.html, и вы попадете на этот экран:

Щелкните «URL-адрес объекта» внизу, и вы попадете на экран «Доступ запрещен».

По умолчанию AWS ограничивает публичный доступ на уровне объекта, поэтому нам действительно нужно указать AWS разрешить просмотр index.html из Интернета. Вернитесь в корзину S3 и установите флажок в верхнем левом углу, чтобы выбрать все объекты в корзине S3.

Затем щелкните раскрывающийся список «Действия» и выберите «Сделать общедоступным».

Теперь попробуем просмотреть изображение. Щелкните paw-favicon.png и просмотрите Object URL. Вы должны увидеть это сейчас:

Но если мы попытаемся просмотреть index.html файл, мы получим пустой экран. Почему мы можем просматривать изображения, но не index.html?

Чтобы действительно просматривать файл index.html как веб-сайт, нам необходимо настроить S3 для отображения его как веб-сайта. Это просто, просто вернитесь в корзину S3 и щелкните вкладку «Свойства».

Теперь щелкните карточку «Статический хостинг веб-сайтов» и выберите «Использовать этот сегмент для размещения веб-сайта». Заполните поле «Индексируемый документ» с помощью index.html, чтобы сообщить вашей корзине S3, что она должна использовать index.html в качестве основного файла веб-сайта.

Теперь скопируйте URL-адрес, показанный в Конечной точке, и нажмите Сохранить. Если мы откроем новую вкладку и вставим только что скопированный URL-адрес, мы увидим наш размещенный веб-сайт живым!

Http://learnaws.tech.s3-website-us-east-1.amazonaws.com

Поздравляю! Вы только что разместили свой первый веб-сайт на S3. Поделитесь этой ссылкой со своими друзьями и коллегами.

Несколько замечаний

Итак, хостинг веб-сайтов S3 работает, но, как вы могли заметить, есть несколько ограничений:

  • URL длинный и некрасивый. Как получить персональный домен https://learnaws.tech вместо http://learnaws.tech.s3-website-us-east-1.amazonaws.com
  • Если мы перейдем к определенному маршруту, например, /about-us, мы получим страницу 403 Forbidden.
  • Нет зеленой полосы HTTPS
  • Потенциально медленная загрузка

Не волнуйтесь, мы можем использовать Amazon CloudFront поверх S3 для решения всех этих проблем. Ознакомьтесь с содержанием, чтобы увидеть мое руководство по CloudFront.

Рассмотрение

Сегодня мы узнали, как:

  • Настройте корзину S3 с разрешениями общего доступа
  • Загружать файлы в корзину S3 с разрешениями общего доступа
  • Настройте S3 для работы в качестве хоста веб-сайта

Вот что мы узнаем в следующих нескольких статьях:

  • Создайте учетную запись «CTO» в IAM
  • Настройте дополнительную безопасность с помощью двухфакторной аутентификации
  • Разместите наш сайт в CloudFront с личным доменом

Увидимся в следующем уроке!