Как дела? Добро пожаловать в Tech Stack Playbook, ваше руководство по приложениям, программному обеспечению и технологиям (но в веселой форме, я обещаю).

На прошлой неделе я посетил очень интересный семинар AWS, организованный для AWS Community Builders, посвященный очень интересной службе, которую я раньше не использовал, под названием AppConfig. Как описано в документации, AWS AppConfig – это сервис, позволяющий разработчикам создавать, управлять и быстро развертывать изменения, модификации, функции или исправления приложений, которые работают на Amazon EC2 (Elastic Cloud Compute), AWS Lambda, контейнерах, мобильных приложениях или IoT-устройствах.

В этой статье блога я расскажу о семинаре, коде, который я использовал для запуска, скриншотах процесса развертывания, а также о том, как использовать Linux и экземпляр Amazon EC2 для развертывания всего кода в VM (виртуальной машине).

Мы создадим простое приложение для аренды жилья Airbnb-for-Cribs и включим карусель просмотра изображений для каждого из перечисленных домов через AWS AppConfig. Вот как это будет выглядеть (к сожалению, особняки IRL не включены):

У меня есть стартовая репозиция, которую создал AWS, связанная на моем GitHub здесь под веткой initial. У меня также есть код ветки final для справки.

Если вам интересно, читайте дальше!

☁️ Построение для масштаба (в облаке)

Давайте сделаем шаг назад и поговорим о масштабе. О “построении для масштаба” говорят многие, но очень редко мы планируем, чтобы масштабирование происходило так, как мы хотим. Для того чтобы стать “однодневным успехом”, могут потребоваться месяцы, годы, а в некоторых случаях даже десятилетия. Мы редко знаем, когда произойдет “масштабный удар”, поэтому мы должны обеспечить будущее технологии, чтобы она масштабировалась в соответствии с нашими потребностями, когда они нам понадобятся.

Представьте себе, что вы выпускаете функцию для базы из более чем миллиона пользователей. Что, если эта функция включает в себя разрушающее изменение с ошибкой, которая снижает использование на 60% в неделю на пользователя. Это может привести к катастрофе. Мы хотим опередить эти проблемы, поэтому AWS AppConfig может помочь нам проанализировать функцию, выпущенную для избранного (но растущего) числа пользователей с течением времени, чтобы мы могли адаптироваться к изменениям, увидеть, как они влияют на нашу базу пользователей, и внести соответствующие изменения.

Когда вы думаете о “построении для масштаба”, конечно, одной из ведущих компаний, которая приходит мне на ум, является Facebook (… то есть Meta… все еще не привык так говорить). В отчете о доходах Meta за первый квартал 2022 года компания сообщила о 2,94 миллиардах ежемесячных активных пользователей по состоянию на 31 марта 2022 года (Meta Q1 2022 Earnings Report).

Одно из интервью, которое особенно запомнилось мне, – это интервью Рида Хоффмана “Masters of Scale” с генеральным директором Meta Марком Цукербергом. Еще в 2017 году Марк Цукерберг рассказал немного больше о контексте своей мантры “Двигайся быстро и ломай вещи”, которая позволила ему создать крупнейшую платформу социальных сетей на планете.

Марк поделился следующим:

“В любой момент времени существует не одна версия Facebook, а, возможно, 10 000. Любой инженер в компании может решить, что он хочет что-то протестировать. Существуют определенные правила в отношении деликатных вещей, но в целом инженер может протестировать что-то, и он может запустить версию Facebook не для всего сообщества, а, возможно, для 10 000 человек или 50 000 человек – все, что необходимо для хорошего тестирования опыта”. (Предприниматель)”.

Посмотрите интервью здесь:

4. Несовершенство – это совершенство, с Марком Цукербергом из Facebook

Если вы Стив Джобс, вы можете подождать, пока ваш продукт станет совершенным. Для остальных: если вы не смущаетесь своего первого продукта, значит, вы выпустили его слишком поздно. Несовершенство – это совершенство. Почему? Потому что ваши предположения о том, чего хотят люди, никогда не бывают абсолютно верными. Большинство предпринимателей создают отличные продукты благодаря тесной обратной связи с реальными клиентами, использующими реальный продукт. Поэтому не бойтесь несовершенства; оно не сделает и не сломает вашу компанию. Что сделает или сломает вас, так это скорость. И никто не знает этого лучше, чем Марк Цукерберг из Facebook. Он делится историей происхождения своей мантры “Двигайся быстро и ломай вещи” и рассказывает о том, как эта этика применялась, когда Facebook превратился из студенческого проекта в технологического гиганта.Читать стенограмму этого эпизода: https://mastersofscale.comSubscribe Подписаться на еженедельную рассылку Masters of Scale: http://eepurl.com/dlirtX

art19.com

Вы можете подумать, зачем нужно что-то подобное? У всех пользователей разный пользовательский опыт? Разве это не противоречит UI/UX тестированию, гибкой разработке и масштабированию?

Не обязательно… потому что, допустим, вы тестируете внедрение функции или опыта. Конечно, вы можете протестировать его в контролируемой среде, но она все равно остается контролируемой. Более оптимальным является тестирование на реальных людях, использующих ваше приложение реальным образом, без ощущения, что вы находитесь под микроскопом, чтобы вы могли понять, действительно ли функция “попадает” или резонирует с ожидаемой базой пользователей в ожидаемое время.

По сей день мне всегда было интересно, как динамическое добавление функций или динамическое тестирование пользователей работает в производстве. Благодаря программе AWS Community Builders Program я смог увидеть нечто подобное в действии, чем и поделюсь с вами сегодня.

☁️ Введение в AWS AppConfig

С помощью AWS AppConfig мы собираемся добавить функцию под названием “Photo Slider”, которая позволит пользователям переключаться между фотографиями в приложении для каждой кроватки. Однако она не будет видна всем сразу, как только функция будет запущена.

AWS AppConfig позволяет нам установить детали развертывания запуска, где мы можем выпустить приложение для 1% пользователей, затем для 5%, затем для 10% и так далее. Выпускать новую функцию сразу для всех пользователей может быть рискованно, поэтому нам необходимо это учесть. В AWS AppConfig есть функция “Feature Flags”, которая позволяет нам отключить функцию, если в приложении произойдет что-то неожиданное или катастрофическое, и почти мгновенно вернуться назад.

☁️ Куда вписывается AWS AppConfig?

На этой диаграмме архитектуры, предоставленной командой AWS, показано, где все “живет”.

• Развертывание; через AWS Amplify
• База данных: через DynamoDB
• Front-end: через HTML, CS и JS
• AppConfig: подключен через функцию AWS Lambda к фронтенду.

Источник: AWS

☁️ Установка флага функции

В консоли AWS Console перейдите к службе AWS AppConfig.

• Нажмите Get Started
• На странице “Создать приложение” назовите ваше приложение: AWSomeCribRentals.
• Добавьте описание: Это для флагов функций, связанных с приложением AWSomeCribRentals.
• Нажмите Создать приложение

Это будет наш контейнер для всех флагов, связанных с нашим приложением. Считайте его оберткой.

Затем мы должны создать профиль конфигурации в приложении AppConfig. Это позволит нам определить тип флага функции и его настройку. Его можно рассматривать как элемент в обертке (т.е. у вас может быть несколько профилей конфигурации, возможно, даже несколько флагов функций в одном профиле, которые находятся в приложении AppConfig).

• Давайте назовем профиль конфигурации нашего добавления функции карты: CardFeatureFlag.
• Добавим описание: связано с карточкой.

Затем мы добавим новый флаг, нажав Add new flag, который будет краткосрочным флагом, так как в будущем мы его упраздним, если все пройдет успешно:

• Имя: showcarousel.
• Описание: это позволит пользователям пролистывать изображения, а не показывать их только по одному на кроватку.
• Выбрать: short-term-flag
• Нажмите Создать флаг, чтобы создать наш первый Feature Flag с помощью AWS AppConfig.
• Нажмите Сохранить новую версию, чтобы продолжить.

☁️ Обновление пагинации фотографий для флага характеристики

Перейдите к CardFeatureFlag, который мы только что создали, и нажмите Добавить новый флаг

• Имя: pagination.
• Описание: изменить количество домов на странице.
• Атрибуты: number
• Тип: number
• Значение: 8
• Требуемое значение: [✅]
• Ограничение: 5 минимум и 12 максимум.
• Нажмите Создать флаг

Включите флаг пагинации с помощью переключателя, а затем нажмите сохранить новую версию

☁️ Разверните флаг пагинации.

Вы должны увидеть что-то вроде этого, что говорит о том, что у нас есть два флага функций (пагинация, которая включена, и showcarousel, которая выключена), добавленные в конфигурационный профиль CardFeatureFlag.

Мы хотим развернуть это, поэтому вот что мы сделаем:

• Нажмите Начать развертывание
• Нажмите Создать среду
• Назовите среду: Beta.

Далее нам нужно будет создать стратегию развертывания. Важно учитывать такие факторы, как время Bake: количество времени, в течение которого AppConfig отслеживает тревоги CloudWatch, прежде чем перейти к следующему развертыванию или шагу, например, откату функции.

Имеется 3 предопределенных варианта: AppConfig.AllAtOnce – мгновенное развертывание для всех, AppConfig.Linear50PercentEvery30Seconds – развертывание для половины цели каждые 30 секунд, время развертывания составляет 1 минуту (т.е. полезно для тестирования или демонстраций), и AppConfig.Canary10Percent20Minutes (AWS Recommended) – развертывание медленно с течением времени (т.е. полезно для производственной нагрузки).

Однако мы создадим стратегию развертывания:

• Name: FFWorkshop_Deployment.
• Тип: Linear.
• Процент шагов: 10
• Время развертывания: 1 минута
• Время запекания: 1 минутаg

Выберите Create deployment strategy и затем Start deployment, что займет около пары минут до полного развертывания. В конечном итоге после полного развертывания он будет выглядеть следующим образом:

☁️ Настройте AWS Lambda

Функции AWS Lambda – это частные функции, которые работают в облаке и позволяют выполнять код без необходимости запускать сервер. Вам просто нужно вызвать скрипт для подключения к ним, после чего вы можете запускать вычисления без необходимости предоставлять для них бэкэнд.

Для получения некоторой информации о AWS Lambda ознакомьтесь с частями 1 и 2 моей статьи “Бессерверные рабочие процессы с пошаговыми функциями и Lambda” здесь:

Чтобы настроить Lambda для нашего проекта, нам нужно:

• Перейдем к AWS Lambda
• Нажмите Создать функцию
• Имя: FF_Lambda
• Время выполнения: Node.js 14.x
• Нажмите Создать функцию

В редакторе кода добавьте этот код (щедро предоставленный нам AWS), который позволяет нам включать и выключать Feature Flag:

const http = require('http');
const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {

    const res = await new Promise((resolve, reject) => {
        http.get(
            "http://localhost:2772/applications/AWSomeCribRentals/environments/Beta/configurations/CardFeatureFlag",
            resolve
        );
    });

    let configData = await new Promise((resolve, reject) => {
        let data = '';
        res.on('data', chunk => data += chunk);
        res.on('error', err => reject(err));
        res.on('end', () => resolve(data));
    });

    const parsedConfigData = JSON.parse(configData);

    const DynamoParams = {
        TableName: 'AWSCribsRentalMansions'
    };

//Fetching the listings from DynamoDB

    async function listItems() {
        try {
            const data = await docClient.scan(DynamoParams).promise();
            return data;
        } catch (err) {
            return err;
        }
    }

//Checking for the Caraousel Feature Flag
    if (parsedConfigData.showcarousel.enabled == true) {
        let returnhtml = ``;

        try {

            const data = await listItems();

            for (let i = 0; i < parsedConfigData.pagination.number; i++) {
                returnhtml += `<div class="col-md-4 mt-4">
                <div class="card profile-card-5">
                    <div class="card-img-block">

                        <div class="slideshow-container">`;

                for (let j = 0; j < data.Items[i].Image.length; j++) {
                    returnhtml += `<div class="mySlides` + (i + 1) + `">
                    <img class="card-img-top" style="height: 300px;" src="` + data.Items[i].Image[j].name + `" style="width:100%">
                  </div>`;
                }

                returnhtml += `</div>`;

                if(data.Items[i].Image.length > 1) {
                    returnhtml += `<a class="prev" onclick="plusSlides(-1, ` + i + `)">&#10094;</a>
                            <a class="next" onclick="plusSlides(1, ` + i + `)">&#10095;</a>`;
                }

                    returnhtml += `</div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">` + data.Items[i].Name + ` <span style="font-size: 0.7em;color:rgb(255, 64, 64)">(` + data.Items[i].Location + `)</span></h5>
                    <p class="card-text">` + data.Items[i].Description + `</p>
                    <a class="btn btn-primary"style="display: inline" href="#">Check Availability</a>
                    <span style="float: right;cursor: pointer;" onclick="favoriteStar(this)"><span class="fa fa-star"></span></span>
                  </div>
                </div>
            </div>`;
            }

            return {
                statusCode: 200,
                body: returnhtml,
            };

        } catch (err) {
            return {
                error: err
            }
        }

    } else {

        let returnhtml = ``;

        try {

            const data = await listItems();
            console.log("dynamo db data: ", data)

//Checking for Pagination Numbers
            for (let i = 0; i < parsedConfigData.pagination.number; i++) {
                returnhtml += `<div class="col-md-4 mt-4">
                <div class="card profile-card-5">
                    <div class="card-img-block">
                    <img class="card-img-top" style="height: 300px;" src="` + data.Items[i].Image[0].name + `" style="width:100%"
                        alt="Card image cap" style="height: 300px;">
                    </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">` + data.Items[i].Name + ` <span style="font-size: 0.7em;color:rgb(255, 64, 64)">(` + data.Items[i].Location + `)</span></h5>
                    <p class="card-text">` + data.Items[i].Description + `</p>
                    <a class="btn btn-primary"style="display: inline" href="#">Check Availability</a>
                    <span style="float: right;cursor: pointer;" onclick="favoriteStar(this)"><span class="fa fa-star"></span></span>
                  </div>
                </div>
            </div>`;
            }

            return {
                statusCode: 200,
                body: returnhtml,
            };

        } catch (err) {
            return {
                error: err
            };
        }
    }
};

Теперь мы хотим добавить слой к нашей Lambda-функции (прокрутите страницу в самый низ и найдите Добавить слой).

• Выберите AWS-AppConfig-Extension
• Нажмите Добавить

Если все идет хорошо, все должно выглядеть следующим образом:

⚠️ Предупреждение

Если вы не видите AWS-AppConfig-Extension в выпадающем списке слоев, предоставляемых AWS… убедитесь, что вы действительно используете Node.js версии 14.x (а не 16.x, как указано ниже). На момент написания этой статьи в блоге Node.js 16.x еще не был настроен для использования расширения AppConfig.

☁️ Настройка URL-адреса функции AWS Lambda

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

Под обзором функции:

• Нажмите Конфигурация
• Нажмите URL функции, а затем Создать URL функции
• Auth Type: NONE.
• Настройте кросс-оригинальный обмен ресурсами (CORS) [✅].
• Мы включим подстановку * для этого демо для Allow origin, Expose headers, Allow headers, и Allow methods… но вы захотите настроить более безопасные методы соединения для origin/headers в производстве.
• Нажмите Сохранить и сохраните URL функции для дальнейшего использования.

Далее нам нужно обновить роль исполнения, чтобы убедиться, что наша функция Lambda имеет правильные разрешения IAM для доступа к AppConfig, используя лучшую практику AWS и принцип “наименьших привилегий”. По сути, не разрешайте больше разрешений, чем требуется для данной потребности/ресурса.

• Перейдите в IAM (Управление идентификацией и доступом)
• Выберите Политики
• Перейдите к Создать политику, затем Выберите службу и выберите AppConfig.
• Для действий выберите Все действия AppConfig.
• Для ресурсов выберите Все ресурсы
• Нажмите Далее, чтобы продолжить шаги, а затем в конце под именем напишите AppConfigAllAccess, чтобы назвать эту роль IAM.

Далее мы прикрепим эти политики к нашей функции Lambda Function:

• AmplifyFullAccess
• AppConfigFullAccess
• AppConfigAllAccess – это та, которую мы только что создали
• AmazonDynamoDBFullAccess .

После успешного обновления функции и присоединения политик экран будет выглядеть следующим образом:

☁️ Создание и заполнение таблицы DynamoDB с помощью экземпляра EC2 (VM)

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

Вы можете настроить сервер EC2 и выполнять все команды, как на обычном компьютере, но вместо этого на арендованном сервере/компьютере, в облаке!

Вот тут-то и начинается настоящее веселье…

Сначала мы настроим экземпляр EC2, чтобы у нас был запущен сервер реального времени, к которому можно подключиться по SSH.

• Перейдите к службе EC2 в списке инструментов AWS.
• Запустите экземпляр
• Выберите: t2.medium (это даст нам немного больше мощности, чем t2.micro, но учтите, что сервер t2.medium будет нести расходы. Если вы не хотите нести расходы, выберите сервер t2.micro).
• Включите публичный доступ к серверу (это только для демонстрационных/тестовых целей, если вы собираетесь использовать сервер в производстве, то лучше заблокировать его).
• После подтверждения всех настроек сохраните пару ключей на компьютер/диск (важно не потерять ее) и нажмите кнопку Launch.

После запуска сервер будет выглядеть следующим образом:

☁️ Создание таблицы DynamoDB внутри сервера EC2 с помощью Linux

EC2 заставит вас chmod 400 ключевой пары, чтобы только ваш пользователь мог читать/редактировать файл – всем остальным потребуется sudo. Убедитесь, что путь указывает на ваш терминал (Mac) или PowerShell (Windows). СОВЕТ: Вы можете легко перетащить файл из Finder или Windows Explorer в командную строку, чтобы автоматически создать путь к файлу.

chmod 400 /User/FF_Workshop_Keypair.cer

Теперь мы подключимся к серверу по SSH с парой ключей и публичным DNS.

• Мы будем использовать ec2-user в первой части, так как это EC2 Instance.
• Затем мы вытащим публичный IPv4 DNS экземпляра EC2, который вы увидите на скриншоте выше справа в сводке экземпляра: ec2-3-82-148-71.compute-1.amazonaws.com.

ssh -i /User/FF_Workshop_Keypair.cer ec2-user@ec2-3-82-148-71.compute-1.amazonaws.com

Это будет выглядеть так, если вы успешно вошли на сервер:

Теперь нам нужно настроить aws внутри сервера.

Элементы, для которых нам нужно настроить атрибуты, следующие: Регион по умолчанию, ID ключа доступа, секретный ключ доступа и AWS Session Token. Они были сгенерированы для нас через AWS Event Bridge, но без их настройки нам нужно будет настроить профиль aws (ссылка на более подробную информацию об этом в документации AWS).

Мы напишем aws configure и введем, а затем скопируем и вставим все эти значения в командную строку и нажмем Enter, когда появится запрос на каждое из них. А затем в разделе Формат вывода поставим json.

AWS_DEFAULT_REGION=us-east-1
AWS_ACCESS_KEY_ID=MSIA...MQ5U
AWS_SECRET_ACCESS_KEY=YI2d...JuZU
AWS_SESSION_TOKEN=IQoJ...wef4

Это будет выглядеть следующим образом:

☁️ Далее в командной строке нужно убедиться, что для сессии активна нужная учетная запись AWS.

Прямо сейчас, вы настроили AWS выше, но он не настроен для подключения к чему-либо… мы знаем это, потому что если мы затем попытаемся сделать: aws sts get-caller-identity мы получим следующую ошибку: Или фрагмент кода:

An error occurred (InvalidClientTokenId) when calling the GetCallerIdentity operation: The security token included in the request is invalid.

Чтобы исправить это, нам нужно добавить учетные данные в командную строку в качестве переменных окружения и экспортировать (напечатать) их в профиль для AWS в экземпляре Linux (те же значения, что и раньше):

export AWS_DEFAULT_REGION=us-east-1
export AWS_ACCESS_KEY_ID=MSIA...MQ5U
export AWS_SECRET_ACCESS_KEY=YI2d...JuZU
export AWS_SESSION_TOKEN=IQoJ...wef4

Мы можем проверить, что переменные окружения сохранены в нашей сессии Linux с помощью printenv AWS_DEFAULT_REGION или printenv AWS_ACCESS_KEY_ID.

Если на выходе будет напечатано то, что мы ввели ранее, значит, все получилось!

Чтобы проверить, что наша учетная запись AWS аутентифицирована/синхронизирована, введите aws sts get-caller-identity. Если все сработало правильно, вы должны увидеть распечатку, похожую на приведенную ниже:

{
    "Account": "354789352487", 
    "UserId": "AROAVFGYX4QT3O2UKAPLI:MasterKey", 
    "Arn": "arn:aws:sts::354789352487:assumed-role/TeamRole/MasterKey"
}

В нашем аккаунте AWS, в правом верхнем углу, вы увидите правильный Account # (такой же, как в “Account” в терминале).

Отлично, мы сделали это!

Для дальнейшего подтверждения этого, если мы используем aws ec2 describe-instances, мы должны получить распечатку запущенных или завершенных экземпляров:

☁️ Теперь мы заполним таблицу DynamoDB для хранения ссылок на изображения и информации о доме.

Пока у нас открыт SSH канал к нашему серверу и работает, давайте откроем еще одно окно терминала. Это связано с тем, что мы не можем загрузить локальный файл с сервера (помните, что мы находимся в виртуальной машине… то есть мы находимся на совершенно другом компьютере, который не распознает наши локальные каталоги на нашем компьютере).

Нам нужно загрузить файл на сервер и затем вызвать его таким образом для связи с DynamoDB. Мы будем использовать команду scp (Secure Copy Protocol) в Linux, которая используется для безопасного копирования/отправки/получения файлов между серверами.

Для нас сценарий, который мы запустим, выглядит следующим образом: мы ссылаемся на файл сертификата пары ключей IAM FF_Workshop_Keypair.cer на нашем компьютере, а затем на файл AWSCribsRentalMansions. json на нашем компьютере, а затем публичный IPv4 DNS нашего EC2 AMI ec2-3-82-148-71.compute-1.amazonaws.com и объявляем, что мы поместим его как свободно висящий файл на сервере в позиции: / .

Команда linux такова:

• 1-я часть – путь к файлу секретного ключа
• 2-я часть – путь к файлу, который мы хотим загрузить.
• 3-я часть – ec2-user, поскольку это AMI EC2 “на” публичном IPv4 DNS URL ec2-3-82-148-71.compute-1.amazonaws.com.
• 4-я часть – ~, поскольку мы хотим загрузить его как свободно висящий файл на сервере.

scp -i /Users/FF_Workshop_Keypair.cer /Users/AWSCribsRentalMansions.json  ec2-user@ec2-3-82-148-71.compute-1.amazonaws.com:~

Если все идет хорошо, вы должны увидеть 100%, напечатанные под скриптом, который вы ввели.

Теперь давайте проверим, загрузился ли файл на наш сервер. Переключитесь обратно в окно терминала, где мы подключились к серверу по SSH. Если мы выполним ls из корневого каталога, мы должны увидеть файл json!

Теперь мы заполним таблицу DynamoDB нашим файлом, загруженным на экземпляр EC2:

aws dynamodb batch-write-item --request-items file://AWSCribsRentalMansions.json

Это будет выглядеть так (не волнуйтесь, что написано “Unprocessed Items” – это нормально ☺️):

Давайте проверим, действительно ли DynamoDB получила все файлы, как нам сообщила командная строка. Если все прошло успешно, то все будет выглядеть следующим образом:

Отлично!!! Все файлы на месте!

☁️ Настройка сайта на AWS с помощью AWS Amplify и AWS CodeCommit

Нам понадобятся 2 специальных инструмента для хранения нашего кода, а затем для вывода нашего кода в интернет со ссылкой, по которой пользователи смогут получить доступ.

• AWS Amplify: для создания фронтенда
• AWS CodeCommit: хранит код для развертывания в Amplify.

В нашем файле index.html в репо (посмотрите мое стартовое репо здесь из кода, предоставленного AWS) нам нужно добавить функцию Lambda, вызывающую AppConfig, в тег <script> файла index.html.

Мы сделаем следующее:

<!-- api call to populate cribs --> -->
<script>
     fetch('lamba-url-here')
     .then(response => response.text())
     .then((data) => {
            document.getElementById("populateCribsHere").innerHTML=data;
            setUI();
  });
</script>

в следующее:

<!-- api call to populate cribs --> -->
<script>
        fetch('https://2v35t2ppjx4vh7ygjzip7nauji0yzmxl.lambda-url.us-east-1.on.aws/')
     .then(response => response.text())
     .then((data) => {
            document.getElementById("populateCribsHere").innerHTML=data;
            setUI();
  });
</script>

Помните URL лямбда-функции, который мы получили ранее? Мы поместим его в lamba-url-here. Мы можем получить его здесь:

☁️ Использование AWS CodeCommit для размещения частного Git Repo

AWS CodeCommit – это безопасная, высокомасштабируемая, управляемая служба контроля исходных кодов, которая размещает частные Git-репозитории.

• Перейдите в CodeCommit
• Нажмите кнопку Создать репозиторий
• Имя: AWSomeCribRepo.
• Описание: Здесь хранится код моего проекта AWSomeCribRepo.
• Нажмите Создать

После создания репозитория нам нужно добавить наш код в этот репозиторий CodeCommit. Мы увидим несколько различных методов подключения. Мы выберем метод HTTPS (GRC).

HTTPS (GRC) – это протокол для использования с git-remote-codecommit (GRC). Эта утилита предоставляет простой метод для проталкивания и извлечения кода из репозиториев CodeCommit путем расширения Git. Это рекомендуемый метод для поддержки соединений, созданных с помощью федеративного доступа, провайдеров идентификации и временных учетных данных.

На самом деле мы хотим сделать pip install git-remote-codecommit, чтобы установить фреймворк git-remote-code-commit, НО у нас еще не установлен pip. Нам нужен Python для запуска pip, поэтому давайте проверим, установлен ли он:

• Выполните python --version – для меня результатом будет Python 2.7.18, и он должен быть добавлен, поскольку это экземпляр EC2.
• Чтобы установить pip, запустите sudo yum install python-pip.

При успешной установке pip должен выглядеть так:

• Теперь, когда pip установлен, давайте запустим команду, которую мы хотели изначально: pip install git-remote-codecommit.

Если все прошло успешно, то все должно выглядеть так:

Теперь мы хотим клонировать репозиторий на наш экземпляр EC2 с помощью этой команды: git clone codecommit::us-east-1://AWSomeCribRepo. Однако на нашем сервере еще нет git, поэтому мы установим git этим способом:

• Выполните эту команду: sudo yum install git.

Если все пройдет хорошо, то все будет выглядеть следующим образом:

• Мы проверим, что установка прошла успешно: git --version – если все прошло успешно, вы увидите распечатку типа git version 2.32.0.
  

• Теперь, наконец, запустим: codecommit::us-east-1://AWSomeCribRepo – это клонирует пустое репо на наш сервер. Когда мы сделаем ls, то увидим там синюю папку:
  

✨ Потрясающая работа! Теперь у нас есть ссылка на наш AWS CodeCommit Repo (в нашей среде AWS) и наш сервер EC2. Особенно круто, потому что теперь это НАШ компьютер, но виртуальная машина.

☁️ Как нам загрузить содержимое локальной папки (нашего репозитория кода) в репозиторий кода на нашем экземпляре EC2 с помощью Linux?

Linux может быть немного запутанным, но по сути мы будем использовать второе окно терминала для подключения к нашему SSH’ed окну терминала, а затем использовать его для подключения к AWS. Не волнуйтесь… у нас все получится 😊.

Мы будем использовать scp для загрузки содержимого файла ВНУТРИ нашей локальной папки и передачи этого содержимого В папку, которая является нашей папкой, подключенной к AWS CodeCommit.

• Мы будем использовать scp (протокол безопасного копирования).
• Мы используем флаг -r (для рекурсивного просмотра всех файлов).
• Мы введем путь к нашей паре ключей
• Затем мы введем путь к нашей папке и, поскольку это содержимое ВНУТРИ нее, мы добавим подстановочный знак /* после имени папки
• Затем мы введем экземпляр EC2 с помощью ec2-user и @, а затем публичное значение IPv4 DNS нашего EC2.

scp -r -i  /Users/FF_Workshop_Keypair.cer /Users/AWSAppConfigWorkshop/*  ec2-user@ec2-3-82-148-71.compute-1.amazonaws.com:~/AWSomeCribRepo

Вы можете видеть, как работают команды между 1-м и 2-м терминальными окнами. В правом (подключенном к нашему локальному компьютеру) мы передаем файлы на сервер. Затем слева (подключенный к экземпляру EC2) мы проверяем, действительно ли файлы были загружены.

⚠️ ПРИМЕЧАНИЕ: на скриншоте написано ...amazonaws.com:~/test, но это было сделано, когда я тестировал Linux 😊. Вы хотите, чтобы эта часть читалась как amazonaws.com:~/AWSomeCribRepo, как в приведенном выше фрагменте кода:

☁️ Теперь мы разместим код в AWS Code Commit

Вернувшись в окно терминала SSH’ed, мы должны убедиться, что находимся в нашем AWSomeCribRepo и выполнить команды для отправки репозитория в AWS CodeCommit:

• Выполнить: cd AWSomeCribRepo.
• Добавьте все файлы в каталоге в git с помощью git add -A.
• Создайте сообщение о фиксации: git commit -m "commit from EC2".
• Переместите код в AWS CodeCommit: git push.

Когда вы выполните команду git push, вы увидите вывод, подобный этому:

Enumerating objects: 1847, done.
Counting objects: 100% (1847/1847), done.
Delta compression using up to 2 threads
Compressing objects: 100% (1845/1845), done.
Writing objects: 100% (1847/1847), 3.99 MiB | 4.68 MiB/s, done.
Total 1847 (delta 213), reused 0 (delta 0), pack-reused 0
To codecommit::us-east-1://AWSomeCribRepo
 * [new branch]      master -> master

⚠️ ВАЖНО: Если вы столкнулись с этой ошибкой после git push:

fatal: unable to access 'https://git-codecommit.us-east-1.amazonaws.com/v1/repos/AWSomeCribRepo/': The requested URL returned error: 403

Или выглядит так в командной строке:

Возможно, это связано с тем, что на сервере EC2 неправильно установлены переменные окружения конфигурации.

Они предоставляются нам благодаря AWS EventBridge для семинара, но вы можете получить их как часть вашего аккаунта AWS. Вам нужно убедиться, что вы “вошли в систему” или аутентифицированы в экземпляре EC2, чтобы команда push знала, в какой CodeCommit аккаунта AWS нужно отправить код. Представьте, что вы отправляете свой код на CodeCommit незнакомца… (это было бы очень плохо…). Это необходимо для того, чтобы убедиться, что мы действительно аутентифицированы в нужном месте, чтобы затем отправить наш код в нужное место.

AWS_DEFAULT_REGION=us-east-1
AWS_ACCESS_KEY_ID=MSIA...MQ5U
AWS_SECRET_ACCESS_KEY=YI2d...JuZU
AWS_SESSION_TOKEN=IQoJ...wef4

Убедитесь, что aws sts get-caller-identity возвращает значение, подобное этому:

{
    "Account": "354789352487", 
    "UserId": "AROAVFGYX4QT3O2UKAPLI:MasterKey", 
    "Arn": "arn:aws:sts::354789352487:assumed-role/TeamRole/MasterKey"
}

Теперь, когда вы выполните команду git push, вы увидите результат, подобный этому:

Enumerating objects: 1847, done.
Counting objects: 100% (1847/1847), done.
Delta compression using up to 2 threads
Compressing objects: 100% (1845/1845), done.
Writing objects: 100% (1847/1847), 3.99 MiB | 4.68 MiB/s, done.
Total 1847 (delta 213), reused 0 (delta 0), pack-reused 0
To codecommit::us-east-1://AWSomeCribRepo
 * [new branch]      master -> master

Вернувшись в AWS Console, CodeCommit теперь перейдет от этого:

К этому:

✨ Теперь вы создали репозиторий для вашего сайта с файлами, загруженными с вашего компьютера, на ваш экземпляр EC2 и теперь на AWS. Далее вы подключите этот репозиторий к AWS Amplify для размещения вашего сайта с реальным URL.

🚀 Хостинг вашего сайта на AWS Amplify

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

Для этого нам необходимо:

• Перейдем к службе AWS Amplify в консоли AWS Console
• Перейдите ко всем приложениям
• Выберите New App и в выпадающем списке выберите Host web app>
• Выберите AWS CodeCommit и затем Continue to advance>
• Выберите AWSomeCribRepo в выпадающем списке CodeCommit и затем Next>
• В Configure build settings убедитесь, что нажали ✅ Allow AWS Amplify to automatically deploy all files hosted in your project root directory и затем нажмите Next.
• Теперь нажмите Сохранить и развернуть>

После этого AWS Amplify автоматически пройдет 4 этапа развертывания для нас

• Предоставить
• Построить
• Развернуть
• Проверить

Это будет происходить от этого:

✨ К этому:

Когда наш сайт создается, он будет выглядеть следующим образом:

✨ К этому:

☁️ Использование флагов возможностей

Если вы заметили в развернутой версии, она не показывает ту функцию карусели, для которой мы создали AppConfig… куда она делась? Разве она не должна была там появиться?

Мы еще не включили ее 😊.

Итак, теперь мы собираемся включить и развернуть флаг карусели (Carousel Feature Flag), чтобы запустить эту функцию. Затем мы установим оперативный переключатель, чтобы во время всплесков использования он ограничивал количество домов, отображаемых на главной странице. Это поможет оптимизировать нашу производительность за счет меньшего количества запросов к таблице DynamoDB в пиковое время.

• Перейдите в AppConfig
• Выберите наше приложение AWSomeCribRentals.
• Нажмите на флаг функции, который мы создали: CardFeatureFlag (обратите внимание, что флаг CardFeature Flag выключен для флага showcarousel, как показано ниже).

• Включите флаг showcarousel и затем сохраните новую версию
• Нажмите Start Deployment и настройте элементы
• Окружение: Beta – мы настроили это ранее
• Версия размещенной конфигурации: 2
• Стратегия развертывания: FFWorkshop_Deployment.
• Описание: Постепенное включение функции showcarousel для пользователей.
• Нажмите кнопку Начать развертывание

Развертывание (технически это развертывание №2, потому что мы уже развертывали ранее на этом Feature Flag) будет выглядеть следующим образом по мере сборки и предоставления данных о развертывании, пока его состояние не достигнет 100%:

✨ Viola! Посмотрите на обновленные изменения в нашем приложении:

Заметили карусель? Теперь это функция, которую пользователи начнут видеть в нашем приложении:

Вот видео развернутого AppConfig Feature Flag в действии в прямом эфире на URL:

☁️ Operational Feature Flags

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

Помните наш pagination Feature Flag в CardFeatureFlag, который мы настроили ранее? Так вот, если мы хотим настроить количество возвращаемых результатов пагинации (т.е. улучшить производительность при большом трафике), мы можем сделать это следующим образом:

• Перейдите в AppConfig
• Нажмите на флаг CardFeatureFlag, который мы установили
• Выберите флаг пагинации
• Нажмите Редактировать
• Измените число в значении на: 6
• Нажмите Подтвердить
• Убедитесь, что переключатель этого флага включен.
• Нажмите Сохранить новую версию
• Нажмите Начать развертывание
• Сохраните те же настройки, что и в Развертывании #2 выше, и особенно убедитесь, что в Стратегии Развертывания указано: FFWorkshop_Deployment.
• Нажмите кнопку Начать развертывание

✨ Когда вы перейдете на свой URL, вы должны увидеть 6 результатов шпаргалки! Это означает, что мы можем настроить эту функцию вручную из AWS AppConfig без необходимости удалять или комментировать код и выкладывать новую версию.

🧹 Очистка флагов релиза

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

Если вам не нужен флаг особенности для одной из выпущенных вами особенностей, вы можете просто удалить этот краткосрочный флаг, поскольку он больше не нужен. Мы уже отметили showcarousel как краткосрочный флаг.

Чтобы удалить флаг, сделаем следующее:

• Перейдите в AppConfig
• Выберите наше приложение: AWSomeCribRentals .
• Нажмите на флаг функции: CardFeatureFlag.
• На флаге функции showcarousel нажмите Удалить и повторно подтвердите удаление во всплывающем окне.
• Нажмите Сохранить новую версию, чтобы отразить это изменение

В реальной ситуации мы бы захотели очистить код, чтобы отразить это добавление функции, но поскольку это был семинар, мы не стали этого делать. Например, в строке 39 лямбда-функции вам нужно убедиться, что функция Crib carousel не включена условно через AppConfig.

🧹 Очистим наши ресурсы AWS:

Поздравляем с окончанием работы! Поскольку вы, вероятно, используете эти службы на своей собственной учетной записи AWS, важно убедиться, что вы удалили экземпляры служб, чтобы не понести расходы:

• EC2: завершите/удалите запущенный экземпляр.
• AWS Lambda: удалите функцию
• DynamoDB: удалите таблицу AWSCribsRentalMansions.
• Amplify: удалить приложение, которое мы создали
• CodeCommit: удалить созданный нами репозиторий
• AppConfig: удалить каждый Feature Flag, профиль конфигурации, а в окружениях удалить Beta, а также приложение AWSomeCribRentals.

УХ ТЫ! Это было очень много! Надеюсь, вам понравилось проходить этот семинар по AWS вместе со мной и выполнять те шаги, которые я предпринял. Дайте мне знать, что вы думаете ниже, и если у вас есть вопросы по любым инструментам AWS, которые я использовал, не стесняйтесь, дайте мне знать, что вы думаете 😊

🧑💻 Подпишитесь на Tech Stack Playbook, чтобы узнать больше:

Дайте мне знать, если вы нашли этот пост полезным! А если вы еще не сделали этого, обязательно ознакомьтесь с этими бесплатными ресурсами ниже:

• Следите за моим Instagram, чтобы узнать больше: @BrianHHough
• Я также на Tik Tok: @BrianHHough
• Смотрите мое последнее видео на YouTube
• Слушайте мой подкаст на Apple Podcasts и Spotify
• Присоединяйтесь к моей БЕСПЛАТНОЙ группе Tech Stack Playbook на Facebook
• Присоединяйтесь к предпринимателям и разработчикам в HelpMeDev Discord Server

Давайте оцифруем мир вместе! 🚀

— Брайан