Автоматизируйте развертывание приложений angular с помощью AWS CodePipeline

В этой статье я покажу, как автоматизировать развертывание приложения angular в сервисе AWS S3, создав конвейер в сервисе AWS Codepipeline — короче говоря, мы сделаем CI/CD для проекта angular. В случае, вам интересно, что это за сервисы AWS:

AWS Codepipeline

AWS CodePipeline — это полностью управляемая служба непрерывной доставки, которая помогает автоматизировать конвейеры выпуска для быстрого и надежные приложения.

Дополнительную информацию из официальных документов можно найти здесь.

AWS S3

Amazon Simple Storage Service (Amazon S3) — это сервис объектного хранилища, который предлагает лучшую в отрасли масштабируемость, доступность данных, безопасность и производительность.

Подробнее читайте в официальных документах, здесь.

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

1) Создайте проект Angular

В большинстве случаев у вас, вероятно, будет проект который вы хотите развернуть, но если вы просто хотите поиграть с ним, вам нужно создать его, набрав в командной строке:

  ng new angular-aws-app  

, где angular-aws-app будет именем вашего приложения.

Теперь, после успешного создания вашего проекта, перейдите на github.com, создайте репозиторий для своего приложения и отправьте свой код в главную ветку репо.

2) Создайте конвейер в сервисе AWS Code-Pipeline

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

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

Сначала мы устанавливаем имя нашего конвейера на ng-app-pipeline и выберите New Service Role для настройки роли service, поскольку это наш новый конвейер бренда. После задания имени конвейера нажмите «Далее» для перехода к следующему шагу.

На шаге 2 создания конвейера мы должны предоставить систему управления исходным кодом, откуда он будет получать наш код для сборки и развертывания на s3. В нашем случае мы выберем Github , когда разместим наш код в Github.. Выбрав Github, нажмите кнопку Подключиться к Github и укажите в своем репозитории его производственную ветвь, которая для большинства из нас обычно является master , и нажмите «Далее». для следующего шага.

Теперь в разделе Добавить На этапе сборки мы должны предоставить сервис, который мы используем для создания промежуточной сборки, поэтому мы выбираем сервис AWS CodeBuild , который является сервисом для AWS. Вы также можете выбрать Jenkins , если вы его используете. Выберите свой регион и создайте для него новый проект. Откроется новое окно, в котором вы предоставите подробную информацию о своем проекте сборки.

В конфигурации проекта

Укажите имя проекта для вашего проекта сборки, это может быть любое имя вы хотите.

В среде

Выберите:

  • операционную систему: ubuntu
  • Время выполнения: Standard
  • Изображение: aws/codebuild/standard: 1.0
  • Версия изображения: всегда используйте последний образ для этой версии среды выполнения

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

Теперь выберите s3 в качестве поставщика развертывания, поскольку мы разместим наше приложение на AWS s3. Вы можете выбрать, какой регион вы используете, но для варианта сегмента мы должны создать новый сегмент или выбрать существующий сегмент. В этом сегменте будут размещаться файлы сборки нашего приложения, но не забудьте проверить Извлечь файл перед развертыванием , потому что после процесса сборки наши файлы сборки заархивированы, и мы должны извлечь архив сборки в файлы для хранения в s3. После этих шагов нажмите «Далее», чтобы просмотреть все шаги настройки, которые вы сделали ранее.

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

Buildspec.yaml

У нас есть просто настройте процесс автоматизации в сервисе AWS CodePipeline, теперь нам нужно создать файл buildspec.yaml в корневой папке нашего проекта angular. Это важная часть непрерывной интеграции, поэтому мы должны добавлять наши скрипты осторожно, иначе процесс сборки не будет успешным.

Вот что такое buildspec.yaml файл выглядит так:

  версия: 0.1phases: install: commands: - echo install nodejs ... - curl -sL https://deb.nodesource.com/setup_12  .x |  bash - - apt-get install -y nodejs - echo install yarn ... - curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg |  apt-key add - - echo "deb https://dl.yarnpkg.com/debian/stable main" |  tee/etc/apt/sources.list.d/yarn.list - apt install --no-install-рекомендует yarn pre_build: commands: - echo install dependencies ... - npm i -g @ angular/cli - npm install build  : commands: # - эхо-тестирование ... # - создание эха ... - ng build --prodartifacts: files: - "**/*" discard-paths: no base-directory: dist/your-app-name  

Buildspec.yaml состоит из фаз скриптов. Например, часть phase первого скрипта предназначена для установки nodejs с пряжей . Давайте посмотрим по порядку:

1) curl -sL https://deb.nodesource.com/setup_12.x | bash —

Эта команда отвечает за загрузку tar-файла node.js версии 12 в контейнер ubuntu (среда для размещения нашего приложения).

2) apt-get install -y nodejs

Если вы знакомы с ubuntu, вы знаете, что делает apt-get . Он установит node.js в наш контейнер из загруженного tar-файла.

3) curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add —

Эта команда предназначена для загрузки tar-файла менеджера пакетов yarn . Это не обязательно, но я предпочитаю это командам npm .

4) apt install —no-install-рекомендует yarn

Эта команда предназначена для установки диспетчера пакетов yarn .

Теперь в Pre-Build , мы должны предоставить команды для установки зависимостей проекта,

4) npm i -g @ angular/cli

Эта команда будет отвечать за глобальную установку angular cli, чтобы мы могли создавать сборки, набирая ng build . Это обязательный шаг; если этот шаг не будет выполнен, сборка не будет создана.

5) npm install

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

Теперь в разделе build мы должны предоставить команды для создания сборки нашего проекта.

6) ng build —prod

Будет создана производственная сборка проекта angular.

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

7) files «**/*»

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

8) base-directory: dist/your-app-name

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

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

На изображении выше видно, что он начнет сборку нашего проекта — вы можете увидеть журналы с помощью кнопки «Подробности».

Хорошо, когда все пойдет идеально, перейдите к S3 сервис из консоли AWS и выполните поиск в своей корзине. Перейдя в корзину, вы увидите свои файлы сборки. Теперь перейдите на вкладку Свойства и щелкните карточку статический хостинг веб-сайтов .. Отметьте параметр Использовать этот сегмент для размещения веб-сайта и напишите index.html в полях индекса и документа об ошибке и сохраните его. Вы увидите конечную точку своего приложения, откроете новую вкладку Chrome и бум, ваш сайт работает на AWS S3.

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

Итак, это для автоматизации вашего Angular-приложения для развертывания. Между прочим, этот процесс одинаков для response, vue или любого фреймворка — вам просто нужно манипулировать скриптами файла buildspec.yaml в соответствии с вашим сценарием.

Надеюсь, вы кое-чему научились. Следуйте за мной, чтобы увидеть больше подобного контента.

Peace ✌️ ✌️

Оцените статью
nanomode.ru
Добавить комментарий