Как создать статический сайт с помощью Amazon S3

На этой странице

1. Предпосылки
2. Что мы будем делать?
3. Создание корзины S3
4. Включение хостинга статического веб-сайта
5. Настройка правильной политики корзины
6. Тестирование статической веб-страницы
7. Заключение

Amazon Simple Storage Service (S3) — это веб-сервис, предлагаемый Amazon Web Services (AWS) для хранения и доступа к объектам через Интернет. S3 предлагает веб-сайтам, веб-сервисам и мобильным приложениям возможность загружать данные и хранить их на своих серверах в США. Он работает через HTTP/S с использованием протоколов на основе TCP. Использование S3 бесплатно как для операций ввода (хранение), так и для запросов GET (извлечение).

Для открытия корзины для получения или хранения объектов требуется не только специальный ключ шифрования, но и общий ключ, который предоставляется Amazon после создания учетной записи. Пользователи могут бесплатно зарегистрировать учетную запись, которая предоставляет 5 ГБ дискового пространства каждый месяц без ограничений на объем хранения в корзинах.

Amazon S3 обеспечивает надежность на уровне 99,999999999 %, поскольку данные хранятся на нескольких объектах для обеспечения избыточности. Amazon S3 использует ту же технологию репликации, которую Amazon использует для обеспечения доступности данных на собственном сайте. Сервис направлен на оптимизацию пропускной способности и затрат в зависимости от используемого приложения и объема хранимых данных, обеспечивая при этом защиту от потери данных.

Существуют также функции, которые позволяют пользователям просматривать аналитику о том, сколько данных загружается или загружается через S3, контролировать использование пропускной способности или использовать преимущества мобильных решений. Amazon S3 доступен через Интернет бесплатно для пользователей. Скорость передачи данных не ограничена. Данные могут быть получены из любого места менее чем за 1 секунду с малой задержкой, что обеспечивает доступ к ресурсам практически в реальном времени. Это также устраняет плату за хостинг и планирование емкости, предоставляя альтернативный вариант облачного хранилища, который не требует постоянных капиталовложений в размещение ресурсов.

Amazon S3 поддерживает объекты любого типа, размера и формата. Объекты могут храниться в любой корзине, но они должны быть доступны по имени объекта. Пользователи могут загружать файлы и папки из внутренних и общедоступных систем через HTTP или HTTPS в корзины, которые поддерживают интеграцию функций файловой системы NFS (сетевая файловая система) или POSIX. Пользователи имеют прямой контроль над тем, кто получает доступ к их корзинам, делясь до 70 ГБ дискового пространства с другим пользователем (созданным через AWS), у которого есть учетная запись в Amazon S3.

Создание веб-сайта может быть непростой задачей. Есть так много вариантов и возможностей, что легко растеряться. Но что, если бы вы могли создать веб-сайт, не беспокоясь о хостинге, доменных именах или настройке сервера? С Amazon S3 вы можете легко создать статический веб-сайт, используя только свой компьютер и подключение к Интернету. В этом сообщении блога мы покажем вам, как настроить собственный статический веб-сайт с помощью Amazon S3. Также обсудите некоторые преимущества использования Amazon S3 для вашего веб-сайта. Итак, давайте начнем!

Предпосылки

Чтобы создать статический веб-сайт с помощью Amazon S3, вам понадобятся:

• Учетная запись Amazon AWS для настройки веб-сайта на Amazon S3. В этой демонстрации используется бесплатная многоуровневая учетная запись Amazon, которая бесплатна и дает огромные преимущества только в сочетании со статическим веб-сайтом Amazon S3.

Что мы будем делать?

В этом руководстве мы создадим и настроим простой статический веб-сайт с помощью Amazon S3. Также пройдите настройку этого статического веб-сайта с пользовательской страницей ошибок. Это руководство покажет вам, как создать веб-сайт HTML, CSS, JavaScript, который прост в обслуживании и очень экономичен.

Статический веб-сайт — это веб-сайт, состоящий только из статических страниц. Он не содержит никаких языков сценариев на стороне сервера, таких как php, asp или nodejs. Он состоит только из одного html-файла, в котором хранятся все веб-страницы. Хостинг статических веб-сайтов не нов, он существует уже давно.

Используя статический сайт, вам не нужно беспокоиться о каких-либо хакерах, и вам нужна только возможность обслуживать веб-страницы. В сочетании с Amazon S3 стоимость мизерна, например, один или два доллара за сайт. Затем вы можете масштабировать свои веб-страницы, чтобы удовлетворить потребности вашей аудитории с миллионами читателей оттуда.

Чтобы разместить статический веб-сайт, вы создаете корзину Amazon S3.

А затем загрузите свой контент в это ведро.

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

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

У нас есть ссылка на репозиторий GitHub, откуда вы сможете скачать и использовать все файлы, необходимые для выполнения этого пошагового руководства. Вы готовы? Хороший. Вы можете продолжить и войти в свою консоль AWS.

Создание корзины S3

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

1. В консоли AWS перейдите на панель инструментов S3 ---> Создать корзину.

2. Укажите уникальное имя корзины (my-howtoforge-bucket-7Vftzchzw). Убедитесь, что имя вашего сегмента уникально. Имена сегментов могут содержать только строчные буквы, цифры и дефисы. Имя корзины S3 должно быть уникальным для всего Amazon S3, чтобы кто-то другой не мог создать корзину с таким же именем и перезаписать ваш веб-сайт. Также ваш путь должен быть совместим с DNS, так как не может быть двух доменов с одинаковыми именами.

3. Снимите флажок Блокировать весь публичный доступ. Если вы хотите сохранить конфиденциальность своего веб-сайта, установите этот флажок. Если он выбран, только авторизованные учетные записи AWS смогут получить доступ к вашему веб-сайту. В этом случае мы снимем этот флажок, чтобы сделать наш пример общедоступным. Таким образом, любой может получить наши html-файлы из корзины S3 и увидеть нашу веб-страницу. Установите флажок Я подтверждаю, что текущие настройки... .

4. Нажмите «Создать корзину» внизу страницы.

5. Вы получите зеленое сообщение «Успешно созданное ведро» с подробной информацией о вашем новом ведре S3. Нажмите на название своей корзины ---> Копировать ARN. Имя ресурса Amazon (ARN) — это уникальный идентификатор ресурса AWS. Когда вы создаете корзину S3, Amazon создает уникальный ARN для новой корзины. Чтобы обеспечить безопасность ваших ресурсов AWS, Amazon требует, чтобы при создании или изменении ресурсов вы использовали либо собственные уникальные идентификаторы, либо созданные Amazon. Вы будете использовать этот ARN для отслеживания своего сегмента и создания статического веб-сайта.

6. Нажмите Загрузить ---> Добавить файлы ---> Выберите файлы, которые вы загрузили ранее ---> Загрузить.

Загрузка вашего веб-сайта — это самая простая часть настройки статического сайта с помощью Amazon S3. Процесс загрузки может занять несколько минут. После завершения вы увидите зеленое сообщение об успешном завершении.

Включение хостинга вашего статического веб-сайта

Теперь, когда ваш веб-сайт загружен в Amazon S3, вам нужно включить его, чтобы его можно было просматривать. Хостинг статических веб-сайтов позволяет обслуживать статические страницы HTML, CSS и JavaScript с веб-сервера, предназначенного для статического контента. Это более экономично, чем динамические веб-страницы (например, PHP или ASP).

Хостинг статических веб-сайтов можно использовать для обслуживания различных типов файлов, таких как изображения, CSS, JS и другие статические файлы. Эти файлы не меняются очень часто, и их легко обслуживать по очень низкой цене.

1. Нажмите Свойства ---> Хостинг статического веб-сайта ---> Изменить ---> Включить.

2. Нажмите «Включить» ---> «Выберите тип хостинга» для размещения статического веб-сайта. Заполните документ Index как index.html, документ Error  как error.html. Прокрутите вниз и нажмите Сохранить изменения.

При включении хостинга веб-сайтов необходимо загрузить индексный документ. Индексный документ — это первый файл, который видят пользователи, заходя на ваш веб-сайт с помощью имени корневого домена, например, http://my-bucket.s3.amazonaws.com/.

Если вы не создадите индексный документ или удалите его позже, Amazon S3 вернет либо страницу с ошибкой 404, либо индексный файл по умолчанию. Индексный файл по умолчанию может отображать имя корзины, дату последнего доступа и другую общую информацию. Имя документа индекса чувствительно к регистру и должно точно совпадать с именем документа индекса, который вы загружаете в корень сайта, поэтому убедитесь, что имя документа индекса написано правильно.

Документ об ошибке — это страница, которую видят пользователи, если возникает ошибка при попытке доступа к вашему веб-сайту. Этот файл является необязательным, но рекомендуется. Если вы не загружаете свой собственный документ об ошибке, Amazon S3 возвращает либо страницу ошибки 404 по умолчанию, либо индексный документ, если он существует. Имя документа с ошибкой также чувствительно к регистру, поэтому убедитесь, что имя документа с ошибкой, которое вы загружаете, написано правильно.

3. Когда вы успешно включите размещение статического веб-сайта для своей корзины, вы увидите зеленую надпись «Успешно отредактировано размещение статического веб-сайта» на панели AWS S3. Вы также видите конечную точку корзины вашего сайта. Это имя вашего сегмента, за которым следует s3.website.yourregion.amazonaws.com.

4. Откройте этот URL-адрес в своем любимом браузере. Вы получите сообщение 403 Forbidden. То потому что правильная политика не назначена. На следующем шаге мы установим соответствующую политику для доступа к вашей корзине.

Настройка правильной политики корзины

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

1. На панели инструментов S3 щелкните вкладку Разрешения ---> Изменить.

2. Скопируйте и вставьте строки из этого файла JSON в редактор JSON. Замените  фактическим ARN, который вы сохранили ранее.

• Версия: 2012-10-17 – это версия политики сегмента.
• Утверждение.  PublicReadGetObject – это действие, которое должно выполняться для всех объектов в указанном сегменте.
• Principal. Элемент Principal указывает учетную запись AWS, пользователя IAM или группу, которым разрешено выполнять указанное действие над объектом. Если в операторе указано несколько принципалов, вы должны указать, какой из них может выполнить действие, установив для элемента «Действие» значение «Разрешить» или «Запретить».
• Действие. Элемент «Действие» указывает тип разрешенного доступа.
• Ресурс. Элемент Resource указывает объект, к которому применяются разрешения.
• В этом случае мы настроили правило PublicReadGetObject, которое позволяет всем получать доступ к вашей корзине и брать любой объект (s3:GetObject) из корзины. Отсюда и звездочка * в строке Принципал. Звездочка * в ресурсе указывает, что политика корзины S3 применяется ко всем объектам в корзине. Убедитесь, что после редактирования политики звездочка должна стоять в конце, как показано.

3. Когда закончите, нажмите Сохранить изменения.

Теперь ваше ведро общедоступно, как показано ниже. Вы можете видеть, что ваша политика вступает в силу немедленно.

Тестирование вашей статической веб-страницы

Теперь, когда вы настроили политику сегментов, вы можете получить доступ к своим статическим веб-страницам, открыв URL-адрес конечной точки в браузере.

1. Вернитесь в браузер, где вы ранее открывали URL-адрес конечной точки корзины S3. Перезагрузите URL-адрес конечной точки корзины S3, и на этот раз вы должны увидеть, что ошибка 404 исчезла. Если вы видите ошибку 404, это означает, что что-то не так с вашей политикой корзины. Ваши статические веб-страницы будут отображаться в браузере, как показано ниже. Теперь вы должны увидеть хорошо отформатированную HTML-версию вашей страницы.

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

Заключение

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

Вам помогла эта статья? Легко ли было понять? Вы можете поделиться своим мнением, оставив комментарий ниже. Обладая этими новыми знаниями, вы теперь можете автоматизировать развертывание статических веб-сайтов в Amazon S3.