Начало работы с AWS

Создание базового интернет-приложения

Развертывание интернет-приложения и добавление интерактивных элементов с помощью API и базы данных

Модуль 1. Создание статического веб-сайта

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

Введение

В этом модуле мы настроим сервис Amazon Simple Storage Service (S3), чтобы разместить в нем статические ресурсы для своего интернет-приложения. В следующих модулях мы добавим к этим страницам динамические функции, используя AWS Lambda и Amazon API Gateway для вызова удаленных RESTful API. (REST расшифровывается как Representational State Transfer – «передача репрезентативного состояния» – и представляет собой архитектурный шаблон для создания веб-сервисов. API – это прикладной программный интерфейс. Следовательно, RESTful API реализует этот архитектурный шаблон.)

Для нашего примера мы будем использовать предоставленный сервисом Amazon S3 URL-адрес веб-сайта. Он будет указан в форме:

http://{your-bucket-name}.s3-website.{region}.amazonaws.com

Весь ваш статический интернет-контент, включая HTML, CSS, JavaScript, изображения и другие файлы, будет храниться в сервисе Amazon S3. Мы выбрали сервис S3, так как он предоставляет хранилище объектов, в котором можно непосредственно хранить и извлекать файлы. Конечные пользователи смогут легко получать доступ к веб-сайту, используя URL-адрес объекта, предоставляемый сервисом S3.

Если вас беспокоит, что придется работать с таким большим количеством компонентов, не волнуйтесь! В этом модуле не будут использоваться другие сервисы AWS, а также не потребуется запускать никакие веб-серверы («сервер» – это программное или аппаратное устройство, которое принимает запросы по сети и отвечает на них), чтобы сделать веб-сайт доступным.

Наш веб-сайт будет крайне простой страницей Hello World, а в дальнейших модулях мы добавим другие функции.

Для работы большинства реальных приложений вам потребуется использовать пользовательский домен, чтобы разместить свой сайт. («Пользовательский домен» – это уникальное фирменное имя, идентифицирующее веб-сайт, например www.amazon.com. Хотя эти темы не рассматриваются в данном модуле, если вас интересует использование собственного домена, вы можете следовать инструкциям из этого руководства).

Обсуждаемые темы

  • Создание корзины S3
    • Данные хранятся в виде объектов в ресурсах, называемых «корзинами»
  • Отправка файлов в корзину S3
  • Переход в консоль S3 и изменение параметров Bucket (Корзина) и Object (Объект)
  • Изменение уровня безопасности в корзине S3 и предоставление общего доступа к объектам в ней
  • Включение веб-хостинга в корзине S3
    • «Веб-хостинг» предоставляет технологии и сервисы, необходимые для просмотра веб-сайта в Интернете

Основные понятия

Статический веб-сайт. Статический веб-сайт содержит фиксированный контент, в отличие от динамических веб-сайтов. Статические веб-сайты – это самый простой тип веб-сайтов, который проще всего создать. Достаточно создать несколько страниц HTML и опубликовать их на веб-сервере!

Ресурс – объект, с которым можно работать (например, корзина Amazon S3).

Хранилище объектов – архитектура хранения данных на компьютерах, которая управляет данными в виде объектов, в отличие от других архитектур хранилищ, где данные хранятся в виде файлов или блоков.

Объекты S3 – ресурс, который содержит данные и метаданные (набор данных, которые описывают другие данные и предоставляют информацию о них) и связан с уникальным ключом, идентифицирующим его.

Корзина S3 – ресурс, используемый для группирования множества хранимых объектов. Его имя должно быть уникальным в глобальном масштабе.

URL-адрес объекта S3 – доступный из Интернета уникальный адрес, предоставляемый сервисом S3 для хранящегося в нем объекта.

Регионы AWS – отдельные географические области, которые AWS использует для размещения своей инфраструктуры. Они распределены по всему миру, чтобы клиенты могли выбрать ближайший регион для размещения своей облачной инфраструктуры.

 Время выполнения

10 минут

 Используемые сервисы

 Предварительные требования модуля

  • Текстовый редактор. Вот некоторые понравившиеся нам бесплатные программы (в алфавитном порядке):

Реализация

  • Создание корзины с публичным доступом
    1. Используя данные для доступа AWS, войдите в консоль Amazon S3.
    2. Нажмите оранжевую кнопку Create bucket (Создать корзину).
    3. Дайте корзине какое-нибудь имя. Все корзины Amazon S3, независимо от того, в каком аккаунте они созданы, используют одно и то же пространство имен, поэтому это имя должно быть уникальным.
    4. Выберите регион, в котором будет располагаться корзина. В данном обучающем курсе выберите ближайший к вам.
    5. Снимите флажок Block all public access (Полностью блокировать публичный доступ). Так как мы размещаем на хостинге веб-сайт, люди должны иметь доступ к нему.
    6. Установите флажок Block public access to buckets and objects granted through new public bucket or access point policies (Блокировать публичный доступ к корзинам и объектам, предоставленный в рамках новых правил для публичных корзин или точек доступа).
    7. Установите флажок Block public and cross-account access to buckets and objects through any public bucket or access point policies (Блокировать публичный доступ и доступ из других аккаунтов к корзинам и объектам по любым правилам для публичных корзин или точек доступа).
    8. Установите флажок, подтверждающий, что содержимое корзины может стать общедоступным. Мы не будем хранить никаких конфиденциальных данных в этой корзине, поскольку ее содержимое может стать общедоступным. Вот как это должно выглядеть:
    Full Stack tutorial bucket settings

    9. Нажмите оранжевую кнопку Create bucket (Создать корзину).

    10. В верхней части экрана должно отобразиться зеленое окно с сообщением: Successfully created bucket (Корзина успешно создана).

  • Настройка корзины для размещения веб-сайта
    1. Найдите свою новую корзину в списке ниже и щелкните ее.
    2. Щелкните серую вкладку Properties (Свойства).
    3. Щелкните поле Static website hosting (Размещение статического веб-сайта).
    4. Щелкните переключатель Use this bucket to host a website (Использовать эту корзину для размещения веб-сайта).
    5. В поле Index Document (Начальный документ) введите index.html.
    6. В поле Error Document (Документ ошибки) введите error.html. Вот как это должно выглядеть:  
    Full Stack tutorial bucket hosting

    7. Нажмите синюю кнопку Save (Сохранить).

    8. Нажмите серую кнопку Overview (Обзор).

    9. Не закрывая браузер, откройте на своем компьютере удобный для вас текстовый редактор. Создайте новый файл и вставьте в него приведенный ниже HTML-код.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    10. Сохраните файл под именем index.html.

    11. Создайте еще один текстовый файл и вставьте в него следующее…

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
    </head>
    
    <body>
        Error Page
    </body>
    </html>

    12. Сохраните второй файл под именем error.html.

    13. Перейдите обратно в браузер.

    14. Нажмите синюю кнопку Upload (Загрузить).

    15. Выберите для загрузки файлы index.html и error.html.  

    Full Stack tutorial upload-html

    16. Нажмите синюю кнопку Next (Далее).

    17. В раскрывающемся меню Manage public permissions (Управление публичными разрешениями) выберите пункт Grant public read access to this object(s) (Предоставить публичный доступ для чтения к объектам). Это необходимо, чтобы любой пользователь мог открыть сайт в своем браузере, в том числе и мы при тестировании.

    Full Stack tutorial GrantPublicRead

    18. Нажмите синюю кнопку Upload (Загрузить) слева.

  • Тестирование статического веб‑сайта
    1. Щелкните в списке пункт index.html.
    2. Щелкните ссылку в области Object URL (URL-адрес объекта).
    3. Должна загрузиться новая вкладка браузера, на которой отобразится собственно базовая веб-страница Hello World.
    4. Поздравляем, вы разместили статический веб-сайт!

Архитектура приложения

Сейчас наша архитектура выглядит так:

Full Stack tutorial Module One app arch

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

Был ли полезен этот модуль?

Спасибо!
Укажите, что вам понравилось.
Close
Приносим извинения за причиненные неудобства
Вы обнаружили устаревшую, неточную или неподходящую информацию? Оставьте свой отзыв, чтобы мы могли улучшить качество предоставляемых услуг.
Close

Создание бессерверной функции