В этой статье я хотел бы продемонстрировать, как вы можете развернуть статический веб-сайт с AWS, загрузив контент вашего сайта в ведро S3, настроив ведро для хостинга веб-сайта и ускорение доставки контента с использованием AWS Cloudfront.
Прежде всего, позвольте мне объяснить некоторые терминологии.
Что такое Amazon S3?
Amazon S3 (простая служба хранения) — это услуга, предлагаемая AWS для хранения объектов через интерфейс веб-сервиса. Его можно использовать для хранения или извлечения любого количества данных, таких как документы, изображения, видео и т. Д. S3 ведро это ресурс в Amazon S3. Это контейнер, в котором могут быть загружены файлы и папки.
Что такое Amazon Cloudfront?
Amazon Cloudfront — это служба доставки контента (CDN), предлагаемой AWS. Он используется для ускорения доставки контента и может быть интегрирован с Amazon S3.
Преимущества использования ведра AWS S3
- Каждый объект может содержать до 5 ТБ данных.
- Ресурс может быть доступен только владельцем до тех пор, пока другие не предоставляются права, что делает его более безопасным.
- Это дешево.
- Вы можете включить многофакторную аутентификацию (MFA) удалить на ведре S3 для предотвращения случайных делеций и непреднамеренных потери данных.
Предварительные условия
Если вы хотите следить за этим руководством, пожалуйста, убедитесь, что следующие требования выполнены.
- AWS аккаунт. Вы можете зарегистрироваться здесь и следуйте этим Учебное пособие в установке.
- Статический сайт. Если у вас нет одного, вы можете клонировать это Демо-проект Отказ
Оглавление
- Создайте ведро S3
- Загрузить веб-файлы на ведро S3
- Закрепите ведро S3 через политику IAM
- Настройте ведро S3
- Служить контент от ведра S3 с Cloudfront
Теперь давайте попадаем в это!
Шаг 1 — Создайте ведро S3
Вам нужно будет создать ведро S3, чтобы поставить файлы и папки вашего сайта.
Для этого войти в консоль управления AWS и нажмите на Услуги На верхней части Навкар. От Услуги Выпадание, выберите S3 от Хранение раздел. Это должно отображать S3 приборная доска.
От приборной панели S3 нажмите Создать ведро Отказ Дайте ведро уникальное имя, имя, которое вы выбираете, должен быть во всем мире уникальным (для лучшей практики, прикрепите идентификатор учетной записи AWS к имени).
Далее выберите предпочитаемый AWS Область от выпадающего.
Под Блокировать настройки общественного доступа для этого ведра Раздел, снимите флажок Заблокируйте весь публичный доступ флажок и принять подтверждение. Это сделано, чтобы сделать ведро, доступное для публики, потому что вы собираетесь провести в этом веб-сайт.
Нажмите на отключить для версии для ведра.
Вы также можете Добавить тег к ведрю для легкой идентификации.
Под Шифрование по умолчанию Раздел, нажмите отключить Для шифрования на стороне сервера.
Затем нажмите на Создать ведро Отказ
Шаг 2 — Загрузить веб-файлы в ведро S3
После создания ведра вам необходимо загрузить файлы и папки вашего сайта.
От S3 Приборная панель, нажмите на Имя ковша, который вы только что создали.
На Объекты Вкладка, вы можете увидеть, что ведро в настоящее время пустое, нажмите на Загрузить кнопка.
Это должно отвести вас в Загрузить страница. Нажмите Добавить файлы . Чтобы добавить файлы сайта и использовать Добавить папку Чтобы добавить папки сайта.
Примечание : Вся папка веб-сайта не должна быть добавлена одновременно. Вместо этого добавьте его содержание один за другим. Например, с Demo Project связан на вершине, я загрузил мой Signup.html Как файл, Signup.js Как файл, CSS. как папка и IMG как папка.
После добавления необходимых файлов и папок прокрутите вниз и нажмите Загрузить Отказ
Загрузка должна быть сделана за несколько минут в зависимости от вашей сети и размера контента. Кроме того, пожалуйста, не закрывайте вкладку, пока продолжается процесс загрузки.
Шаг 3 — Закрепите ведро S3 через политику IAM
Теперь вам нужно добавить некоторые политики для обеспечения вашего ведра.
От S3 Приборная панель, нажмите на Имя ковша, затем нажмите на Разрешения вкладка. Прокрутите вниз до Ковш политика раздел и нажмите на его Редактировать кнопка.
Добавьте следующую политику ведра и убедитесь, что заменить Ведро имя
с именем вашего ведра.
{ "Version":"2012-10-17", "Statement":[ { "Sid":"AddPerm", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::bucket-name/*"] } ] }
Затем прокрутите вниз и нажмите Сохранить изменения Отказ
Это должно изменить ведро Доступ публично, как показано ниже.
Шаг 4 — Настройте ведро S3
Вам необходимо указать страницу по умолчанию и страницу ошибки для вашего сайта.
От S3 Приборная панель, нажмите на Имя ковша, затем нажмите на Свойства вкладка.
Прокрутите вниз до Статический хостинг сайта раздел и нажмите на его Редактировать кнопка.
Выберите Включить для статического хостинга сайта.
Также выберите Хост статический сайт для типа хостинга.
Введите файл для вашего Индекс документ и Ошибка документа . Ошибка документа не является обязательным. Я использовал Signup.html для обоих Индекс документ и Ошибка документа Отказ
Прокрутите вниз и нажмите Сохранить изменения Отказ
После сохранения, если вы нажмете на конечную точку веб-сайта ведра, он отобразит ваш сайт.
Шаг 5 — Обслуживание контента от ведра S3 с Cloudfront
От Услуги Выпадание, прокрутите вниз до Доставка сети и контента раздел и нажмите на Cloudfront Отказ Это должно отвести вас на приборную панель Cloudfront.
Нажмите на Создать распространение Отказ На Выберите способ доставки для вашего контента Страница, нажмите на Начать под Веб раздел.
Под Настройки происхождения Раздел, нажмите на Происхождение доменного имени поле и выберите ведро S3, которое вы создали ранее. В Путь происхождения поле, введите / указать корневой уровень.
Для Ограничить доступ к ведрю Выберите Да Отказ
Для Происхождение Access Identity Выберите Создать новую идентичность Отказ
Для Грант Прочитайте разрешения на ведро Выберите Да, обновите политику ведра Отказ
Прокрутите вниз до Настройки поведения кэша по умолчанию раздел. Для Протокольная политика просмотра Выберите Перенаправить http в https Отказ
Далее прокрутите вниз до Настройки распределения раздел. Внутри Уровень корневого объекта по умолчанию Поле, введите имя файла на корневом уровне, которое должно быть вашей посадочной страницей. Я использовал Signup.html Как мой Уровень корневого объекта по умолчанию Отказ
Оставьте остальные варианты по умолчанию и нажмите на Создать распространение Отказ
Теперь вы можете увидеть распределение, которое вы создали с помощью приборной панели CloudFront. Это может занять несколько минут, чтобы он был развернут.
После развертывания распределения Cloudfront копируйте URL из столбца домена и вставьте его в браузер. Ура! 🎉 Вот и все!
Теперь вы можете получить доступ к вашему сайту с:
- Доменное имя Cloudfront e.g d3450i4qtm1w2p.cloudfront.net
- Конечная точка сайта E.g http://demo-95581515414.s3-website-us-east-hot-1.amazonaws.com.
- S3 Object URL E.G https://demo-95581515414.s3.us-east-1.amazonaws.com/signup.html.
Теперь вы должны знать, как разместить статический веб-сайт с Amazon S3 и ускорить доставку содержимого с помощью AWS Cloudfront. Несмотря на то, что вы должны были пройти через несколько шагов, вы это сделали, и вы потрясающие!
Если вы нашли эту статью полезную, пожалуйста, оставьте сердце или комментарий. Если у вас есть какие-либо вопросы или конструктивные отзывы, пожалуйста, дайте мне знать в разделе «Комментарий».
Кроме того, не забудьте следовать за мной за дополнительные статьи. Спасибо!
Оригинал: «https://dev.to/mariehposa/hosting-a-static-website-with-amazon-s3-i5p»