В этом модуле вы настроите в 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://{your-bucket-name}.s3-website.{region}.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. Нажмите «Next» (Далее) на странице «Select Template» (Выбрать шаблон).

  3. Укажите глобальное уникальное имя для корзины веб-сайта, например wildrydes-yourname , и нажмите «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 и файлов изображений) для вашего интернет-приложения. 

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


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

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

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

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

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

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

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

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

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

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

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

    8. Перетащите выбранные файлы из локальной файловой системы в содержимое на вкладке «Objects» (Объекты) на консоли «S3».

    9. Выберите «Upload» (Выгрузить) слева внизу открывшегося диалогового окна.

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

    Пошаговые инструкции по работе с интерфейсом командной строки

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

    1. Выполните следующую команду, обязательно заменив YOUR_BUCKET_NAME на имя, использованное в предыдущем разделе, а YOUR_BUCKET_REGION  – на региональный код (например, us-east-2), для которого создана корзина.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION
    2. При успешном выполнении команды отобразится список объектов, скопированных в вашу корзину.

     

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

    Если невозможно применить ни один из ранее указанных методов, можно запустить предоставленный шаблон CloudFormation для копирования необходимых ресурсов в корзину S3. Запустите шаблон CloudFormation. Для этого выберите регион и перейдите по ссылке «Запустить стек» в разделе «Шаблон CloudFormation» данного модуля.

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

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

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

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


    1. Выберите на консоли S3 имя корзины, созданной в разделе 1.
    2. Выберите вкладку «Permissions» (Разрешения) и затем «Bucket Policy» (Политика корзин).
    3. Введите указанный ниже документ политики в редактор политики корзины, заменив [YOUR_BUCKET_NAME] именем корзины, созданной в разделе 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 как документ index и оставьте документ ошибок пустым. См. документацию по настройке корзины для размещения статического веб-сайта, чтобы получить дополнительные сведения.


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

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

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

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

    wildrydes-homepage