В этой статье я покажу, как автоматизировать ваше развертывание углового приложения в AWS S3 обслуживание путем создания трубопровода на AWS Codepipeline Сервис или, вкратце, мы сделаем CI/CD для углового проекта. В случае, если вам интересно, что это за услуги AWS,
AWS Codepipeline
AWS CodePipeline — это полностью управляемая служба непрерывной доставки, которая помогает вам автоматизировать ваши трубопроводы для быстрых и надежных приложений. Прочитайте больше здесь
AWS S3
Amazon Simple Service (Amazon S3)-это услуга хранения объектов, которая предлагает ведущую в отрасли масштабируемость, доступность данных, безопасность и производительность. Подробнее здесь Анкет
Поскольку эта статья больше сосредоточена на автоматизации развертывания, я не буду подробно обсуждать эти услуги AWS. Итак, достаточно разговоров, давайте посмотрим на это практически, что у меня были шаги.
Итак, первый шаг — это,
1) Создать угловой проект
Большую часть времени у вас, вероятно, есть проект, который вы хотите развернуть, но если вы просто хотите играть с ним, вы, очевидно, должны создать его, вводя в командную строку:
ng new angular-aws-app
где Angular-aws-App будет ваше имя приложения.
Теперь, успешно создав свой проект, перейдите к github.com и создайте репозиторий для вашего приложения и выложите свой код в свою репо -главную филиал.
2) Создать конвейер на службе AWS-кода
После того, как мы нажали ваш первоначальный код на GitHub, нам необходимо создать конвейер или автоматический процесс, который будет отвечать за развертывание нашего кода в Amazon S3 из GitHub Repo. Но для этого вам понадобится учетная запись AWS, чтобы вы могли получить доступ к их услугам. Здесь Вы можете создать свою учетную запись бесплатного уровня, который будет бесплатным в течение 365 дней. После создания своей учетной записи вы увидите консоли приборной панели.
Тип Кодовый трубопровод и нажмите на эту услугу и перейдите на трубопроводы на боковой панели, чтобы создать новый трубопровод для нашего приложения. Вы увидите оранжевую кнопку в правом верхнем углу, чтобы создать новый трубопровод.
Сначала мы настроили название нашего трубопровода на ng-app-pipeline и выберите Роль новой услуги Для настройки ролевой службы, поскольку это наш новый конвейер бренда. После установки имени трубопровода нажмите следующий шаг.
На шаге 2 создания трубопровода мы должны предоставить наш источник контроля, откуда он получит наш код для построения и развертывания в S3. В нашем случае мы выберем GitHub Как мы подтолкнули наш код на GitHub. После выбора GitHub нажмите на Подключиться к GitHub кнопку и предоставьте ваш репозиторий своим производственным филиалом, которая обычно является Мастер Для большинства из нас и нажмите дальше для следующего шага.
Теперь в добавлении этапа сборки, мы должны предоставить, какой сервис мы используем для создания постановки, поэтому мы выбрали AWS Codebuild Сервис, который является сервисом для AWS, вы можете выбрать Дженкинс Если вы используете это. Выберите свой регион и создайте новый проект для него. Откроется новое окно, и вы предоставите подробную информацию о вашем проекте сборки.
В конфигурации проекта,
Предоставьте название проекта для вашего проекта сборки. Это может быть любое имя, которое вы хотите.
В окружающей среде,
Выберите Операционная система: Ubuntu , Время выполнения: Стандарт , Изображение: AWS/CODEBUILD/Стандарт: 1.0 , Версия изображения: Всегда используйте последнее изображение для этой версии времени выполнения В
Теперь нажмите на Продолжайте кодепели Для создания проекта сборки. После успешного создания строительного проекта, нажмите «Далее для стадии развертывания».
Теперь выберите S3 в качестве поставщика развертывания, так как мы будем размещать наше приложение на AWS S3. Вы можете выбрать, какой регион вы используете, и для опции ведра, мы должны создать новое ведро или выбрать существующее ведро, где мы будем размещать файлы сборки наших приложений и проверить Извлечь файл перед развертыванием Потому что после процесса сборки наши файлы сборки архивировали, и мы должны извлечь архив сборки в файлы для хранения в S3. После этих шагов нажмите Далее для просмотра всех шагов конфигурации, которые вы делали ранее.
После просмотра нажмите на Создать трубопровод Кнопка, и вы увидите свой трубопровод для источника, сборки и развертывания.
BUILDSPEC.YAML
Мы только что разработали процесс автоматизации в службе конвейера AWS Code, теперь мы должны создать BUILDSPEC.YAML Файл в корневой папке нашего углового проекта. Это важная часть непрерывной интеграции, поэтому мы должны тщательно добавить наши сценарии, в противном случае процесс сборки не удастся.
Вот что BUILDSPEC.YAML Файл выглядит как,
version: 0.1
phases:
install:
commands:
- echo installing nodejs...
- curl -sL https://deb.nodesource.com/setup_12.x | bash -
- apt-get install -y nodejs
- echo installing 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-recommends yarn
pre_build:
commands:
- echo installing dependencies...
- npm i -g @angular/cli
- npm install
build:
commands:
# - echo testing...
# - echo building...
- ng build --prod
artifacts:
files:
- "**/*"
discard-paths: no
base-directory: dist/your-app-name
Buildspec.yaml состоят из этапов сценариев, как в Фазы Part First Script для установки Nodejs с пряжа Анкет Давайте посмотрим на это один за другим.
1) curl -sl https://deb.nodesource.com/setup_12.x | Бэш —
Эта команда отвечает за загрузку Node.js версии 12 TAR -файл в контейнере Ubuntu (среда для размещения нашего приложения)
2) apt -get install -y nodejs
Если вы знакомы с Ubuntu, вы узнаете, что apt-get делает. Он установит node.js в нашем контейнере из этого загруженного файла TAR.
3) curl -ss https://dl.yarnpkg.com/debian/pubkey.gpg | apt -ключ добавить —
Эта команда для загрузки пряжа Диспетчер пакетов. Это не обязательно сделать это Но я предпочитаю это npm команды
4) Установка Apt-не-установленная пряжа
Эта команда предназначена для установки пряжа менеджер пакетов.
Теперь в Pre-Build раздел, Мы должны предоставить команды для установки зависимостей проекта,
4) npm i -g @angular/cli
Эта команда будет отвечать за установку Angular CLI по всему миру, чтобы мы могли создавать сборки, набрав ng build . Это обязательный шаг, в противном случае он не создаст сборки.
5) Установка NPM
Эта команда установит все зависимости, связанные с проектом, которые требуются для запуска нашего приложения.
Теперь в сборка раздел, Мы должны предоставить команды для создания создания нашего проекта,
6) ng build -prod
Это создаст производственную сборку углового проекта.
Теперь в Артефакты раздел, Мы должны предоставить файлы и базовое имя, откуда он будет получать файлы сборки после создания производственной сборки.
7) файлы «*/»
По этой команде он получит все файлы сборки и загрузит их в AWS S3 Услуги, откуда он будет размещен.
8) Base-Directory: dist/your-app-name
Это будет каталог, где ваши файлы сборки.
Теперь после создания BUILDSPEC.YAML Файл в root, нажмите свой код в главную филиал вашего репозитория, и он автоматически получит ваш исходный код, создаст сборку и разверните его в S3.
Вы можете увидеть из приведенного выше изображения, он начнет создавать наш проект, и вы сможете увидеть журналы из кнопки «Подробности».
Хорошо, когда все пойдет идеально, перейдите в S3 Service из консоли AWS и найдите свое ведро. Пойдя в свое ведро, вы увидите свои файлы сборки. Теперь перейти к Свойства Вкладка и нажмите Статическое хостинг сайта открытка. Проверьте на Используйте это ведро для размещения веб -сайта опция и написать index.html в полях документа Индекса и ошибок и сохраните его. Вы увидите конечную точку вашего приложения, откройте его новую вкладку Chrome и Boom, ваш сайт был в прямом эфире на AWS S3.
Попробуйте некоторые изменения в своем коде и снова нажмите к тому, чтобы освоить, после создания сборки и развертывания он покажет вам последние изменения в вашем приложении в прямом эфире.
Так что, ребята для автоматизации вашего углового приложения для развертывания. Кстати, этот процесс одинаковы для React, Vue или любой структуры, вам просто нужно манипулировать BUILDSPEC.YAML Файл сценарии в соответствии с вашим сценарием.
Я надеюсь, что вы что -то научились из этого. Пожалуйста, следуйте за мной здесь, чтобы узнать больше о таком контенте.
Мир ✌ ✌
Оригинал: «https://dev.to/mquanit/automate-angular-application-deployment-via-aws-codepipeline-32i5»