Реализовано с помощью TypeScript, HTTPS, CDN, CI / CD с Buddy и ваше собственное доменное имя.
Что мы будем строить:
Наше приложение React будет:
- Размещено на AWS S3
- Распространяется по всему миру с помощью сети CDN AWS CloudFront,
- Иметь доменное имя через AWS Route 53
- Включите HTTPS с помощью сертификатов, предоставленных AWS Certificate Manager
- Полностью построен с использованием инфраструктуры в виде кода с использованием AWS CDK, где мы будем создавать инфраструктуру с помощью TypeScript.
- Развертывается постоянно с помощью Buddy. И клиентское приложение React, и инфраструктура будут иметь свои собственные конвейеры CI / CD.
Вот развертывание приложения, которое мы будем создавать: https://andrew-bestbier-cdk-blog.com (обратите внимание на настраиваемый URL-адрес и HTTPS).
Схема архитектуры того, что мы будем строить, выглядит следующим образом:
Предпосылки:
- Аккаунт Github
- Аккаунт AWS
- Дружелюбный счет
- Узел установлен
- Установлен AWS CDK
Инфраструктура как код с AWS CDK:
Развертывание приложения React на AWS S3 - не новая тема на Medium. Я лично написал аналог этого блога ранее здесь, где я описываю, как это сделать полностью через пользовательский интерфейс консоли AWS. Однако в этой статье мы будем строить нашу инфраструктуру с помощью кода, который можно определить следующим образом: Инфраструктура как код - это методология управления своей инфраструктурой с использованием спецификаций конфигурации, выраженных с помощью кода.
По сути, вместо того, чтобы строить свою инфраструктуру с помощью пользовательского интерфейса AWS, вы можете написать спецификацию, которая определяет необходимую вам инфраструктуру. Затем эта спецификация предоставляется AWS CloudFormation, которая затем раскручивает для вас базовые сервисы.
В этой статье мы будем использовать AWS CDK, который позволяет нам писать эти спецификации с помощью TypeScript, а также многих других языков. Например, чтобы создать корзину на AWS, вы можете просто написать на TypeScript следующее:
Если вы запустите соответствующие команды CDK (которые я предоставлю позже), AWS раскрутит за вас корзину S3. Создавая свою инфраструктуру в виде кода, вы можете легко реплицировать инфраструктуру в другом месте, применять логику к своим спецификациям, как вы это делаете с обычным кодом (логическая логика, циклы и т. Д.), И совместно использовать инфраструктуру в модулях. Написание этих спецификаций с помощью TypeScript доставляет удовольствие, так как вы можете просто использовать тот же язык, который вы используете для создания своего внешнего / внутреннего интерфейса, для построения своей инфраструктуры.
Настройка проекта:
Откройте свой терминал и перейдите в каталог, в котором вы хотите создать свой проект. Затем введите следующие команды для создания базового каталога, репозитория git и каталога, в котором будет храниться код вашей инфраструктуры:
# Create the base directory mkdir my-first-cdk-project && cd my-first-cdk-project # Initiate a git repository git init # Create the directory for infrastructure mkdir infrastructure
Затем установите AWS CDK, следуя инструкциям здесь. Перейдите в каталог инфраструктуры и создайте проект CDK:
cd infrastructure cdk init app --language typescript
Затем мы хотим также инициализировать приложение React, что мы сделаем с помощью Create React app:
cd .. npx create-react-app client --template typescript
У вас должна быть следующая структура каталогов:
Настройка S3 Bucket с AWS CDK:
Нашей первой частью инфраструктуры будет корзина AWS S3, которая будет содержать наше созданное приложение React. Сначала нам нужно установить пакет @aws-cdk/aws-s3, чтобы мы могли создавать корзины S3:
cd infrastructure
npm install @aws-cdk/aws-s3
Откройте infrastructure/lib/infrastructure-stack.ts в своем любимом редакторе. Этот файл будет изменен на протяжении всего этого руководства, чтобы изменить наш стек инфраструктуры. Добавьте следующий код в конструктор InfrastructureStack:
Если вы изучите документацию AWS CDK здесь, то обнаружите, что все, что я сделал выше, - это создал простую корзину с именем andrew-bestbier-cdk-blog. Мы настроим это более подробно позже, но пока его можно развернуть. Разверните свою инфраструктуру с помощью следующих команд:
cdk bootstrap # Required only the first time you ever deploy npm run build # Required every time to compile TypeScript cdk deploy --require-approval never
Затем AWS CDK развернет вашу инфраструктуру, используя AWS CloudFormation под капотом. Перейдите в AWS CloudFormation, чтобы просмотреть недавно развернутый стек:
Если вы нажмете InfrastructureStack, а затем перейдете на вкладку Ресурсы, вы увидите созданные ресурсы AWS. Нажмите на свою корзину S3:
Вы должны увидеть свою новую пустую корзину S3:
Загрузка вашего приложения React на S3:
Затем мы можем вручную загрузить созданное приложение React в вашу корзину S3 (мы автоматизируем это позже). Для этого выполните следующие команды:
cd .. && cd client npm run build aws s3 cp build s3://<your bucket name>/ --recursive
Если вы сейчас просматриваете свою корзину, в ней должны быть ваши файлы:
Хостинг веб-сайтов с S3:
Теперь, когда у нас есть хорошая основа, мы можем настроить нашу корзину для статического хостинга веб-сайтов. Добавьте следующий код инфраструктуры и установите пакет @aws-cdk/aws-iam:
Обратите внимание, как мы здесь делаем несколько вещей:
- Укажите индексный документ для нашего сайта
- Разрешить публичный доступ к нашему ведру
- Создайте политику корзины, позволяющую любому получить доступ к объектам в нашей корзине.
- Добавьте политику в нашу корзину
Затем разверните свою инфраструктуру с помощью команд, представленных ранее. Если вы откроете вкладку Свойства в своем сегменте, а затем щелкните поле Статический хостинг веб-сайта, вы должны увидеть конечную точку своего веб-сайта:
Если все пойдет хорошо, вы должны увидеть свое размещенное приложение React:
Настройка CI / CD:
Процесс, который мы использовали до сих пор, немного неуклюж, поскольку мы запускали команды локально для синхронизации нашего встроенного приложения React до S3, а также команд, которые создают и развертывают нашу инфраструктуру. В этом разделе мы доработаем оба этих процесса:
- Размещение нашего кода в Github
- Создание конвейера CI / CD с Buddy, который развернет приложение React.
- Создание еще одного конвейера CI / CD с помощью Buddy, который будет развертывать изменения инфраструктуры с помощью AWS CDK.
Код хостинга в Github:
Перейдите на Github, нажмите значок + и выберите Новый репозиторий:
Затем назовите свой репозиторий (я назвал свой cdk-react) и нажмите Создать репозиторий:
Затем вам будут показаны команды для продвижения нашего существующего локального репозитория с клиентским кодом и кодом инфраструктуры на Github. Мой выглядит следующим образом:
git remote add origin [email protected]:AndrewBestbier/cdk-react.git git push -u origin master
Зафиксируйте свой код, запустите эти команды, и ваш код должен появиться в Github:
Создание конвейера React CI / CD:
Теперь, когда наш код находится в Github, войдите в систему Buddy, где вы должны увидеть следующую панель управления, если вы впервые пользуетесь сервисом:
Нажмите Создать новый проект, подключите Buddy к Github и свяжите репозиторий, который вы создали ранее:
Затем Buddy должен разумно определить, что ваш репозиторий содержит приложение React. Нажмите Добавить новый конвейер:
Назовите свой конвейер «Сборка и развертывание приложения React», активируйте его При нажатии, а затем нажмите Добавить новый конвейер:
Теперь, когда ваш конвейер создан, мы можем добавить наше первое действие. Найдите действие Node.js и щелкните действие:
Далее нам предлагается добавить несколько команд, которые мы хотим запустить. Добавьте следующие команды, чтобы установить зависимости и построить приложение, а затем нажмите Добавить это действие:
cd client npm install npm build
Теперь, когда наше приложение построено, нам нужно добавить еще одно действие для загрузки файлов нашего приложения в S3. Найдите S3 и нажмите на действие:
Появится модальное окно с предложением добавить интеграцию с AWS.
Для этого необходимо использовать AWS IAM для создания программного пользователя с соответствующими разрешениями. Если вам требуется руководство о том, как это сделать, я написал здесь для другого блога. Убедитесь, что у вашего пользователя есть AmazonS3FullAccess, AWSCloudFormationFullAccess, AmazonRoute53FullAccess и CloudFrontFullAccess, поскольку ему потребуются эти разрешения позже в этой статье:
После добавления учетных данных пользователя AWS IAM модальное окно исчезнет, и вы сможете настроить действие S3. Укажите исходный путь client/build из файловой системы конвейера, выберите свою корзину S3, в которую вы хотите загрузить, и нажмите Добавить это действие.
Ваш конвейер должен выглядеть так:
Протестируйте свой конвейер React, зафиксировав изменение в Github. Buddy автоматически запустит ваш конвейер, создаст ваше приложение и загрузит результат в вашу корзину.
Создание конвейера CI / CD для AWS CDK:
Теперь, когда CI / CD настроен, мы можем сделать то же самое для вашего кода инфраструктуры AWS CDK. Перейдите в свой проект Buddy и нажмите Добавить новый конвейер:
Назовите свой конвейер «Создание и развертывание инфраструктуры AWS», активируйте При нажатии и нажмите Добавить новый конвейер:
Теперь, когда ваш конвейер создан, мы можем добавить наше первое действие. Найдите действие Node.js и щелкните действие:
Добавьте следующие команды, чтобы установить зависимости и построить приложение, а затем нажмите Добавить это действие:
cd infrastructure npm install build
Теперь, когда наше приложение построено, нам нужно добавить еще одно действие для развертывания нашей инфраструктуры. Найдите действие AWS CLI и щелкните действие:
Мы используем опцию AWS CLI, поскольку можем указать учетную запись AWS, которую хотим использовать. Добавьте следующие команды и выберите свою учетную запись AWS, которую вы использовали для конвейера React:
cd infrastructure cdk deploy --require-approval never
Перед добавлением действия нам также необходимо отредактировать Среду задания, поскольку для действия AWS CLI по умолчанию не установлен AWS CDK. Перейдите на вкладку «Среда» и добавьте следующие команды для установки npm, а с помощью npm установите aws-cdk перед тем, как нажать «Добавить это действие»:
apt-get update && apt-get -y install nodejs npm npm install -g aws-cdk npx
Ваш финальный конвейер должен выглядеть следующим образом:
Настройка CloudFront CDN:
На данный момент у нас есть очень прочный фундамент, на который можно опираться. Наши конвейеры CI / CD постоянно развертывают наше приложение и инфраструктуру React, которые также построены с помощью кода. В этом разделе мы настроим CDN с AWS CloudFront, чтобы приложение React могло обслуживаться из периферийных местоположений по всему миру, а не напрямую из самого ведра S3:
Чтобы внести это изменение, нам нужно будет внести несколько изменений в нашу инфраструктуру, но сначала установите библиотеку AWS CDK CloudFront:
cd infrastructure npm install @aws-cdk/aws-cloudfront
Прежде чем мы развернем нашу CDN с помощью CloudFront, нам необходимо понять концепцию Origin Access Identity (OAI). OAI ограничивает доступ к корзине S3 и ее содержимому только CloudFront и выполняемым им операциям. Итак, теперь мы создадим OAI, предоставим ему доступ для чтения к корзине и удалим политику корзины и код, позволяющий людям напрямую обращаться к корзине:
Если вы попытаетесь получить доступ к URL-адресу вашего веб-сайта S3, вам будет отказано в доступе:
Затем мы можем создать раздачу CloudFront и указать как источник корзины CDN, так и OAI:
На запуск нашей CloudFront CDN потребуется около 5 минут. После этого ваш дистрибутив должен быть виден в CloudFront:
Если вы нажмете на указанное доменное имя, вы должны увидеть свое приложение:
Недействительный кеш CDN:
Если на этом этапе вы отправите изменение в приложение React, сборка будет загружена в вашу корзину S3 через конвейер. Однако, если вы просмотрите URL-адрес, предоставленный CloudFront, вы заметите, что отображаемое приложение устарело. Чтобы исправить это, нам нужно добавить шаг в наш конвейер React CI / CD, чтобы сделать кеш недействительным.
Найдите в Buddy действие CloudFront, которое сделает кеш недействительным:
Затем выберите свой дистрибутив и нажмите Добавить действие:
Теперь ваш конвейер должен выглядеть следующим образом:
Добавление собственного доменного имени и HTTPS:
Теперь мы можем улучшить наше приложение, купив доменное имя и обеспечив использование HTTP. В этом разделе мы сделаем следующее:
- Приобретите доменное имя через AWS Route 53
- Создайте сертификат через AWS Certificate Manager
- Назначьте наш сертификат нашей раздаче CloudFront
Покупка доменного имени через Route 53:
Перейдите в службу Route 53, найдите доменное имя, которое вы хотите приобрести (я выбрал andrew-bestbier-cdk-blog.com), и нажмите Продолжить :
Затем вам будет предложено ввести некоторые личные данные. Введите их и нажмите Продолжить:
Это займет некоторое время, но в конечном итоге ваш домен будет зарегистрирован:
Создание сертификата с помощью AWS Certificate Manager:
Сначала установите зависимости диспетчера сертификатов и Route53:
npm install @aws-cdk/aws-certificatemanager @aws-cdk/aws-route53 @aws-cdk/aws-route53-targets
Затем добавьте следующий код:
Обратите внимание, как мы здесь делаем несколько вещей:
- Создание ссылки на нашу размещенную зону, найдя ее в Route 53
- Создание сертификата, подтвержденного DNS, который будет автоматически проверяться в нашей зоне размещения в Route 53. Обратите внимание, как нам нужно создать сертификат в us-east-1, поскольку он будет использоваться CloudFront, который является глобальной службой
Если вы развернете свою инфраструктуру и откроете AWS Certificate Manager в N. Вирджиния (us-east-1) вы увидите свой сертификат:
AWS также добавил бы запись CNAME в конфигурацию DNS для вашего домена в Route 53. Нашим последним шагом является добавление сертификата в наш CloudFront CDN и создание новой записи A в Route 53 чтобы указать на наш CDN:
Обратите внимание, как мы здесь делаем несколько вещей:
- Укажите сертификат, который должен использовать наш дистрибутив CloudFront
- Установка политики безопасности
- Установка метода SSL
- Создание новой записи A на маршруте 53, указывающей на нашу раздачу CloudFront.
Если вы сейчас попытаетесь получить доступ к своему домену, вы увидите свое приложение React:
Заключение:
Если вы зашли так далеко, поздравляем! Это была длинная статья, и я очень надеюсь, что вы многому научились. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в комментариях ниже. Кроме того, если вы заметите какие-либо ошибки или у вас есть предложения, дайте мне знать!
👋 Присоединяйтесь к нам сегодня !!
️ Подписывайтесь на нас в LinkedIn, Twitter, Facebook и Instagram
Если этот пост был полезен, пожалуйста, нажмите несколько раз кнопку хлопка 👏 ниже, чтобы выразить свою поддержку! ⬇
