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

Serverless_Web_App_LP_assets-02

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

Для целей данного модуля вы будете использовать предоставленный нами URL-адрес веб-сайта Amazon S3. Он имеет следующий вид: http://{имя_вашей_корзины}.s3-website.{регион}.amazonaws.com. Для работы большинства реальных приложений вам потребуется использовать пользовательский домен, чтобы разместить в нем свой сайт. Если вы заинтересованы в том, чтобы использовать собственный домен, см. инструкции по настройке статического веб-сайта, для которого используется пользовательский домен, в документации по Amazon S3.

Время, необходимое для прохождения модуля: 30 минут

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

Шаблон CloudFormation: если вы уже привыкли работать с сервисом Amazon S3 или хотите пропустить часть материала и перейти к работе с сервисами Lambda и API Gateway, вы можете запустить один из этих шаблонов AWS CloudFormation в выбранном вами регионе, чтобы автоматически создать необходимые ресурсы.

Регион Шаблон CloudFormation
Восток США (Сев. Вирджиния) Запустить стек >
Восток США (Огайо) Запустить стек >
Запад США (Орегон) Запустить стек >
ЕС (Франкфурт) Запустить стек >
ЕС (Ирландия) Запустить стек >
ЕС (Лондон) Запустить стек >
Азия и Тихий океан (Токио) Запустить стек >
Азия и Тихий океан (Сеул) Запустить стек >
Азия и Тихий океан (Сидней) Запустить стек >
Азия и Тихий океан (Мумбаи) Запустить стек >
Serverless_Web_App_LP_assets-17

Инструкции по запуску CloudFormation

  1. Щелкните ссылку Launch Stack (Запустить стеки) выше для выбранного вами региона.

  2. На странице Select Template (Выбор шаблона) нажмите кнопку Next (Далее).

  3. В поле Website Bucket Name (Имя корзины веб-сайта) задайте глобально уникальное имя, например wildrydes-ваше_имя, и нажмите кнопку Next (Далее).

  4. На странице Options (Параметры) оставьте все значения, используемые по умолчанию, и нажмите кнопку Next (Далее).

  5. На странице Review (Проверка) установите флажок, чтобы согласиться с тем, что CloudFormation создаст ресурсы IAM, и нажмите кнопку Create (Создать).

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

  6. Подождите, пока стек wildrydes-webapp-1 перейдет в состояние CREATE_COMPLETE.

  7. Выбрав стек wildrydes-webapp-1, перейдите на вкладку Outputs (Исходящие данные) и щелкните ссылку WebsiteURL.

  8. Убедитесь, что домашняя страница Wild Rydes загружается правильно, и перейдите к следующему модулю «Управление пользователями».


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

  • Шаг 1. Выбор региона


    Это интернет-приложение можно развернуть в любом регионе AWS, в котором поддерживаются все сервисы, используемые в данном приложении: Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 и Amazon DynamoDB.

    Сведения о том, какие регионы поддерживают необходимые сервисы, см. в таблице регионов. Среди поддерживаемых регионов имеются следующие:

    • Восток США (Сев. Вирджиния)
    • Восток США (Огайо)
    • Запад США (Орегон)
    • ЕС (Франкфурт)
    • ЕС (Ирландия)
    • ЕС (Лондон)
    • Азия и Тихий океан (Токио)
    • Азия и Тихий океан (Сеул)
    • Азия и Тихий океан (Сидней)
    • Азия и Тихий океан (Мумбаи)

     

    Выберите необходимый регион в раскрывающемся списке в правом верхнем углу Консоли управления AWS.

    region

    (Нажмите, чтобы увеличить изображение.)

    region
  • Шаг 2. Создание корзины S3

    Сервис Amazon S3 можно использовать для размещения статических веб-сайтов, не настраивая при этом никакие веб-серверы и не управляя ими. На этом шаге вы создадите корзину S3, которую затем используете для размещения всех статических ресурсов (например, HTML, CSS, JavaScript и файлов изображений) для интернет-приложения. 

    На этом шаге для создания корзины Amazon S3 вы будете использовать консоль или интерфейс командной строки (CLI) AWS. Помните, что имя корзины должны быть глобально уникальным. Рекомендуется использовать имена, подобные следующему: wildrydes-имя-фамилия. Если появится сообщение об ошибке, в котором сказано, что выбранное имя корзины уже существует, попробуйте добавить к имени дополнительные цифры или буквы, чтобы создать имя, которое еще не используется.


    1. В Консоли управления AWS в разделе Storage (Хранилище) выберите Services (Сервисы), а затем S3.
    2. Выберите +Create Bucket (Создать корзину)
    3. Укажите глобально уникальное имя корзины, например wildrydes-имя-фамилия. Если появится сообщение об ошибке, в котором сказано, что выбранное имя корзины уже существует, попробуйте добавить к имени дополнительные цифры или буквы, чтобы создать имя, которое еще не используется.
    4. В раскрывающемся списке выберите регион, который вы планируете использовать для данного семинара.
    5. Нажмите кнопку Create (Создать) в нижнем левом углу диалогового окна, не выбирая корзину, из которой необходимо скопировать параметры.
  • Шаг 3. Отправка контента

    На этом шаге вы отправите ресурсы веб-сайта, используемые в данном модуле, в корзину S3. Чтобы выполнить этот шаг, вы можете воспользоваться Консолью управления AWS (для этого нужен браузер Google Chrome), интерфейсом командной строки AWS (AWS CLI) или предоставленным шаблоном CloudFormation. Если на локальном компьютере уже установлен и настроен интерфейс командной строки AWS (AWS CLI), рекомендуем использовать именно его. В противном случае используйте консоль (если у вас есть Google Chrome последней версии). 

    Пошаговые инструкции для консоли

    Чтобы отправить все файлы и вложенные каталоги из локального каталога с помощью Консоли управления AWS, нужен браузер Chrome последней версии. Если по каким-либо причинам у вас нет возможности работать с Chrome, выполните инструкции либо для интерфейса командной строки AWS (AWS CLI), либо воспользуйтесь предоставленным шаблоном CloudFormation.

    1. Загрузите архив данного репозитория по этой ссылке.

    2. Распакуйте загруженный архив на локальном компьютере.

    3. Откройте Консоль управления AWS в браузере Chrome. Щелкните Services (Сервисы), а затем в разделе Storage (Хранилище) выберите пункт S3.

    4. Выберите корзину, которую вы создали на предыдущем шаге, и откройте вкладку Overview (Обзор).

    5. Откройте Проводник Windows или Finder в macOS и перейдите к распакованному содержимому ZIP-файла, который вы загрузили на первом шаге.

    6. Перейдите в каталог WebApplication/1_StaticWebHosting/website на локальном компьютере.

    7. Выберите все файлы и вложенные каталоги в каталоге website. Убедитесь, что сам каталог website не выбран.

    8. Перетащите выбранные файлы из файловой системы локального компьютера в область контента на вкладке Overview (Обзор) в консоли S3.

    9. В нижнем левом углу открывшегося диалогового окна нажмите кнопку Upload (Отправить).

    10. Подождите, пока завершится отправка, и убедитесь, что содержимое каталога веб-сайта отображается в консоли S3. Если отображается только один каталог website, удалите его из корзины и еще раз выполните указанные выше инструкции. Прежде чем перетащить контент в консоль S3, убедитесь, что вы выбрали только содержимое каталога.

    Пошаговые инструкции при использовании интерфейса командной строки (CLI)

    Если на компьютере уже установлен и настроен интерфейс командной строки (CLI), с его помощью вы можете скопировать необходимые веб-ресурсы из каталога s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website в свою корзину.

    1. Выполните указанную ниже команду, заменив выражение ИМЯ_ВАШЕЙ_КОРЗИНЫ именем, которое вы использовали в предыдущем разделе, а выражение РЕГИОН_ВАШЕЙ_КОРЗИНЫ кодом региона (например, us-east-2), в котором вы создали свою корзину.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://ИМЯ_ВАШЕЙ_КОРЗИНЫ --region РЕГИОН_ВАШЕЙ_КОРЗИНЫ
    2. Если команда будет выполнена успешно, отобразится список объектов, скопированных в вашу корзину.

     

    Пошаговые инструкции при использовании CloudFormation

    Если у вас нет возможности использовать ни один из описанных выше методов, вы можете скопировать необходимые ресурсы в свою корзину S3, запустив предоставленный шаблон CloudFormation. Чтобы запустить шаблон CloudFormation, выберите необходимый регион и щелкните ссылку Launch stack (Запустить стек) в разделе Шаблон CloudFormation данного модуля.

  • Шаг 4. Добавление политики корзины для разрешения общедоступного чтения

    С помощью политики корзин вы можете указать, кому разрешен доступ к контенту в ваших корзинах S3. Политики корзин представляют собой документы JSON, в которых указано, каким принципалам разрешено выполнять различные действия над объектами в вашей корзине.

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

    Вот пример политики, которая предоставляет доступ «только для чтения» анонимным пользователям. В этом примере политики просматривать ваш контент разрешено всем пользователям в Интернете. Самый простой способ обновить политику корзины – воспользоваться консолью. Выберите корзину, перейдите на вкладку с разрешениями и щелкните пункт Bucket Policy (Политика корзин).


    1. В консоли S3 выберите имя корзины, которую вы создали в разделе 1.
    2. Перейдите на вкладку Permissions (Разрешения) и щелкните пункт Bucket Policy (Политика корзин).
      1. В консоли S3 выберите имя корзины, которую вы создали в разделе 1.
      2. Перейдите на вкладку Permissions (Разрешения) и выберите параметр Public access (Общий доступ).
      3. Щелкните пункт Edit (Изменить) и снимите указанные ниже флажки.
        • «Block new public bucket policies» (Блокировать новые общедоступные политики корзин)
        • «Block public and cross-account access if bucket has public policies» (Блокировать общий доступ и доступ между аккаунтами, если для корзины используются общедоступные политики)
      4. Нажмите кнопку Save (Сохранить).
      5. В открывшемся модальном окне подтверждения введите confirm и нажмите кнопку Confirm (Подтвердить). 
      6. Не уходя с вкладки Permissions (Разрешения), щелкните пункт Bucket Policy (Политика корзин).  
    3. Введите указанный ниже документ политики в редакторе политик корзин, заменив выражение [ИМЯ_ВАШЕЙ_КОРЗИНЫ] именем корзины, которую вы создали в разделе 1.
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. Нажмите кнопку Save (Сохранить), чтобы применить новую политику.
  • Шаг 5. Включение функции хостинга для веб-сайта

    По умолчанию объекты в корзине S3 доступны по URL-адресу со структурой http://.amazonaws.com//. Чтобы предоставлять ресурсы из корневого URL-адреса (то есть /index.html), вам необходимо включить функцию хостинга веб-сайта в корзине. После этого ваши объекты станут доступны по адресу веб-сайта, зависящего от региона AWS корзины: .s3-website-.amazonaws.com.

    Для своего веб-сайта вы также можете применять пользовательский домен. Например, веб-сайт http://www.wildrydes.com размещен в сервисе S3. Порядок настройки пользовательского домена не рассматривается в данном семинаре, но вы можете найти подробные инструкции в нашей документации.

    На этом шаге вы включите хостинг статического веб-сайта с помощью консоли. Это можно сделать на вкладке Properties (Свойства) после того, как вы выберете корзину. Задайте файл index.html в качестве начального документа и оставьте документ с ошибками пустым. Дополнительные сведения см. в документации по настройке корзины для статического веб-сайта.


    1. На странице сведений о корзине в консоли S3 откройте вкладку Properties (Свойства).
    2. Выберите карточку Static website hosting (Размещение статического веб-сайта).
    3. Выберите пункт Use this bucket to host a website (Использовать эту корзину для размещения веб-сайта) и введите index.html в поле начального документа. Оставьте остальные поля пустыми.
    4. Прежде чем нажать кнопку Save (Сохранить), запишите URL-адрес Endpoint (Адрес), указанный в верхней части диалогового окна. Вы будете использовать этот URL-адрес для просмотра своего интернет-приложения до самого окончания семинара. С данного момента этот URL-адрес будет использоваться в качестве базового URL-адреса вашего веб-сайта.
    5. Нажмите кнопку Save (Сохранить), чтобы сохранить внесенные изменения.
  • Шаг 6. Проверка реализации

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

    Перейдите по базовому URL-адресу веб-сайта (это URL-адрес, который вы записали в предыдущем разделе) в удобном для вас браузере. Должна отобразиться домашняя страница Wild Rydes. Если вам необходимо посмотреть базовый URL-адрес, перейдите в консоль S3, выберите свою корзину и щелкните пункт Static Web Hosting (Размещение статического веб-сайта) на вкладке Properties (Свойства).

    Если страница отображается правильно (см. снимок экрана с примером ниже), вы можете перейти к следующему модулю «Управление пользователями».

    wildrydes-homepage