Проекты на AWS

Разработка современного интернет‑приложения

Развертывание интернет‑приложения, подключение к базе данных и анализ поведения пользователей

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

В этом модуле мы разместим статический веб-сайт на Amazon S3 и настроим облачную среду IDE – AWS Cloud9.  

Обзор

В этом модуле мы будем размещать статический контент (html, js, css, мультимедийный контент и т. д.) веб-сайта Mythical Mysfit на Amazon S3 (Simple Storage Service). Недорогой сервис хранения объектов S3 обладает высокой степенью надежности и доступности и может доставлять хранимые объекты непосредственно через HTTP. Таким образом, он станет незаменимым для доставки статического веб-контента непосредственно в веб-браузер для сайтов в Интернете.

Прежде чем приступить к размещению контента веб-сайта Mythical Mysfits в S3, давайте настроим AWS Cloud9 для работы. Cloud9 – это облачная интегрированная среда разработки (IDE), которая позволяет создавать, запускать и отлаживать код, используя только браузер.  

Схема архитектуры

создание статического веб‑сайта

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

20 минут

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

 Попробуйте на GitHub

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

  • А. Вход в Консоль AWS

    Чтобы приступить к работе, выполните вход в Консоль AWS для аккаунта AWS, который вы будете использовать в ходе этого практикума.

    Б. Выбор региона

    Это интернет-приложение может быть развернуто в любом регионе AWS, в котором поддерживаются все сервисы, используемые в данном приложении. Из таблицы регионов можно узнать, в каких из них имеются поддерживаемые сервисы. Далее приведены поддерживаемые регионы:

    • us-east-1 (Сев. Вирджиния);
    • us-east-2 (Огайо);
    • us-west-2 (Орегон);
    • eu-west-1 (Ирландия).

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

  • А. Создание новой среды AWS Cloud9

    На главной странице Консоли AWS введите Cloud9 в служебной строке поиска и выберите соответствующий результат.

    создание бота Lex Bot

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

    На главной странице Cloud9 щелкните Create Environment (Создать среду).

    создание бота Lex Bot

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

    создание бота Lex Bot

    Присвойте среде имя MythicalMysfitsIDE, добавив любое описание по вашему желанию, и щелкните Next Step (Следующий шаг).

    создание бота Lex Bot

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

    создание бота Lex Bot

    Оставьте настройки среды по умолчанию и щелкните Next Step (Следующий шаг).

    создание бота Lex Bot

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

    создание бота Lex Bot

    Нажмите Create Environment (Создать среду).

    создание бота Lex Bot

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

    создание бота Lex Bot

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

    создание бота Lex Bot

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

    создание бота Lex Bot
    Б. Клонирование репозитория практикума Mythical Mysfits

    На нижней панели откроется готовая к использованию командная строка терминала. Запустите указанную далее команду git в терминале, чтобы клонировать код, необходимый для выполнения заданий, описанных в этом учебном пособии.

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    После клонирования репозитория вы увидите, что в обозревателе проекта отображаются клонированные файлы.

    клонированные файлы

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

    клонированные файлы

    В терминале измените каталог на каталог только что клонированного репозитория.

    cd aws-modern-application-workshop
  • А. Создание и настройка корзины S3 для размещения веб-сайта

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

    Прежде всего, вы создадите корзину S3 и замените указанное ниже имя (mythical-mysfits-bucket-name) на уникальное имя корзины по вашему выбору. Примечание. Ознакомьтесь с требованиями к именам корзин. Скопируйте выбранное имя и сохраните: оно вам потребуется еще несколько раз во время этого практикума.

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    После создания корзины необходимо задать параметры конфигурации, чтобы корзину можно было использовать для размещения статического веб-сайта. В этой конфигурации предусмотрены запросы объектов в корзине с использованием зарегистрированного публичного имени DNS для корзины, а также прямые запросы веб-сайта по базовому пути имени DNS к главной странице выбранного веб-сайта (в большинстве случаев index.html).

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    Б. Обновление политики для корзины S3

    Все корзины, созданные в Amazon S3, являются частными по умолчанию. Чтобы веб-сайт был публичным, необходимо создать политику корзины S3, в которой будет указано, что к объектам, хранимым в этой корзине, может быть предоставлен публичный доступ для любого лица. Политики корзин представлены в виде документов JSON, в которых определены действия S3 (вызовы API S3), которые можно (или нельзя) выполнять различным субъектам (в данном случае широкой публике, т. е. кому угодно).

    Путь к документу JSON для необходимой политики корзины выглядит следующим образом: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. Этот файл содержит строку, которую необходимо заменить на выбранное вами имя корзины (эта строка имеет вид REPLACE_ME_BUCKET_NAME).

    Примечание. В ходе выполнения заданий этого практикума вам не раз придется открывать файлы, некоторые элементы которых необходимо заменить (все они имеют префикс REPLACE_ME_ для облегчения поиска с помощью функций CTRL-F для Windows или ⌘-F для Mac). 

    Чтобы открыть файл в Cloud9, в проводнике на панели слева дважды щелкните файл website-bucket-policy.json.

    открытие файла в Cloud9

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

    открытие файла в Cloud9

    На панели редактора файлов откроется файл bucket-policy.json. Замените указанную строку на выбранное вами имя корзины, которое использовалось в предыдущих командах.

    замена имени корзины

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

    замена имени корзины

    Введите указанную далее команду в интерфейс командной строки, чтобы добавить общую политику корзины на веб-сайт.

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    В. Публикация контента веб-сайта в S3

    Теперь для корзины на нашем новом веб-сайте заданы надлежащие настройки, и мы можем добавить первую итерацию главной страницы веб-сайта Mythical Mysfits в корзину. Чтобы скопировать локальную страницу index.html из среды IDE в новую корзину S3 (с соответствующей заменой имени корзины), введите в интерфейс командной строки S3 указанную ниже команду, аналогичную команде Linux для копирования файлов (cp).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Теперь откройте ваш любимый веб-браузер и вставьте соответствующий URI в адресную строку. Один из приведенных ниже идентификаторов URI содержит «.» перед названием региона, а другой содержит «-». Эти символы используются в зависимости от региона.

    Строка, которую необходимо заменить, т. е. REPLACE_ME_YOUR_REGION, должна соответствовать региону, в котором была создана корзина S3 (например, us-east-1).

    Для регионов us-east-1 (Сев. Вирджиния), us-west-2 (Орегон) и eu-west-1 (Ирландия) используйте:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Для региона us-east-2 (Огайо) используйте:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Поздравляем! Вы создали базовый статический веб-сайт Mythical Mysfits.

    На этом мы завершаем модуль 1.

После этого разместите приложение на веб-сервере.