Полный руководство по нулю-герою при настройке трубопровода CI/CD с использованием GitLab-CI для развертывания с помощью Azure Storage
Для этой демонстрации я уже создал простое угловое 7 приложений, которое размещено на GitLab, приложение — это простой, цифровые часы, которые выглядят что-то подобное.
Обзор
Приведенная выше диаграмма описывает весь процесс, направо от разработчика, нажав код, в точку, где конвейер Ci/CD создает и разворачивает код для хранения Azure (Blob), который связан с конечной точкой Azure CDN.
Разработчик идет впереди и выполняет развитие на местном уровне приложения, после чего он идет вперед и совершает и толкает код в систему управления версией в нашем случае это Gitlab Отказ
Тогда у нас было бы Gitlab Выполните Ci/Cd в виде шагов, упомянутых в gitlab-ci.yml файл.
От угловых 2 назад мы используем Tymdercript. Typeyctry был выпущен Microsoft и является супер-набором JavaScript. В целях этого учебника мы используем угловые 7, которые используют TypeScript, браузер не понимает Teamescript, поэтому нам нужно построить приложение, которое преобразует его в родной JavaScript, чтобы его можно было отобразить браузером.
После Создание заявки , который преобразует угловое 7 приложений из Tymdercript на JavaScript, у нас есть папка Dist, которая содержит последнюю сборку, содержащую статические (HTML, CSS, JS) файлы, которые затем загружены на хранение Azure.
После загрузки файлов на хранение Azure для бесплатного доступа к углому приложению к углому приложению к конечному пользователю мы будем использовать CDN конечная точка Что помогает нам дополнительно оптимизировать доставку, повысить производительность с помощью кэширования, а также добавления правил перенаправления, которые мы будем обсуждаться позже.
CDN конечная точка затем может быть связана с пользовательским доменным именем, создавая запись CNAME в вашем DNS-зона.
Сейчас мы поняли общий поток для развертывания, давайте начнем начать.
Создание ресурсов Azure (BLOB + CDN конечная точка):
В этом случае, как мы уже знаем, мы будем развернуть статический контент сборки угловых приложений в течение хранения Azure, и это будет доступно с использованием конечной точки CDN. Нам нужно создать учетную запись хранилища вместе с BLOB, а также конечной точкой CDN, которая будет указывать на соответствующую BLOB, содержащую статические файлы сборки.
Azure Storage Account (что? ЗАЧЕМ? КАК?)
Аккаунт для хранения Azure содержит все ваши объекты данных хранения Azure: Blobs, файлы, очереди, таблицы и диски для нашего примера мы будем использовать BLOBS.
Создание учетной записи хранилища
- Войдите в Azure Portal и поискать учетную запись и Создать учетную запись для хранения Отказ
- После создания учетной записи хранения Создайте BLOB/Container Для того, чтобы хранить статические угловые файлы сборки.
- После создания BLOB нам нужно Возьмите ключевые ключи доступа для аутентификации На платформе GitLab-Ci для загрузки контента на Azure.
Создание профиля Azure CDN + конечная точка. Для кэширования повышенная производительность мы будем использовать Azure CDN Отказ Нам нужно сначала создать профиль CDN, под которым мы будем создавать конечные точки CDN.
Мы использовали Verizon Premium, что позволяет нам настроить правила перенаправления, а нагрузки других особенностей, которые присутствуют, больше на это позже.
Создание и настройка конечной точки Azure CDN.
Давайте создадим конечную точку CDN для приложения для доступов в этом случае, нам нужно нажать кнопку + конечную точку, а затем ввести имя конечной точки CDN и выберите тип происхождения в качестве хранилища, поскольку нам нужно связать конечную точку CDN к BLOB А затем выберите «Происхождение HostName» с URL-адресом хоста учетной записи хранилища. Сопровождается, что нам нужно предоставить путь происхождения, который включает имя имени BLOB.
Оптимизированные типы в конечной точке CDN.
Существует два типа оптимизации типа, который включает в себя.
Общая веб-доставка.
Динамическое ускорение сайта.
После использовавшими типы я предпочитаю использовать динамическое ускорение сайта в качестве более оптимизированного и имеет лучшую производительность и более быструю кэширование по сравнению с общей веб-доставкой, но с более высокой ценой.
** Путь зонда: ** Путь зонда включает в себя файл, помещенный на сервер происхождения для оптимизации конфигураций сетевых маршрутизации для CDN. В нашем случае сервер происхождения является каплями для хранения, на который указывает конечную точку CDN.
После успешного создания конечной точки CDN вот как похоже, нам нужно, теперь мы должны убедиться, что всякий раз, когда пользователь вводит URL CDN Endpoint URL, который связан с блоком хранения, он должен иметь возможность получить доступ к веб-сайту, но это не то, как это работает по умолчанию, так как он не может найти index.html. Для пользователя никогда не рекомендуется ввести ** www.domainname.com/index.html ** Как это добавляет дополнительные накладные расходы из стороны пользователя, чтобы добавить index.html каждый раз, когда он хочет получить доступ к веб-сайту. Чтобы исправить это, мы будем использовать Verizon CDN Portal, чтобы настроить правила перенаправления для Index.html, а также перенаправление HTTP-HTTPS.
Настройка правил для конечной точки CDN.
Нам нужно нажать на управление, что будет перенаправлять нас на Portizon Portal, чтобы настроить правила.
В этом случае мы настроим два правила.
1. HTTP-To-HTTPS Правило перенаправления:
Это будет выполнять URL-перенаправление, если в случае, если пользовательский запрос на HTTP он выполнит URL-адрес Redirect к HTTPS.
2. Rewrite URL (index.html):
Это правило выполнит Rewrite URL, чтобы даже если пользователь вводит конечную точку CDN, он будет выполнять URL Rewrite и добавить index.html автоматически, чтобы он удалял накладные расходы для пользователя, чтобы добавить index.html на доменное имя каждый раз.
Шаги для настройки правил.
После того, как Portal CDN открывается, нам нужно нажать на ADN, так как у нас есть DSA в качестве типа CDN, а затем нажмите на двигатель правил, после чего мы теперь можем настроить правила для того же.
1. Перенаправление http-https
tymmychn_http_to_https
2. URL Rewrite для index.html
tymmychn_rewrite_index.html
После применения правил здесь, как это должно выглядеть.
Index.html — URL Rewrite
Для перенаправления http-https.
После сохранения правил потребуется некоторое время для изменений в отраженных, которые могут быть до 4 часов и в худшем случае еще больше. После того, как ожидающие изменения XML изменений в Active XML, это указание, что изменения были применены.
Вернуться к Gitlab.
Теперь после настройки всей инфраструктуры, необходимой на стороне Azure, которая включала в себя настройку учетной записи хранилища, которая будет иметь BLOB, которые могут хранить угловые статические файлы сборки (HTML, CSS и JavaScript), а также для обслуживания конечного пользователя. С помощью конечной точки CDN для быстрой доставки.
Теперь пришло время настроить конвейер Ci/CD на GitLab, так как мы уже знаем, что GitLab предоставляет простой способ настроить Ci/CD на каждом репозитории, упомянув все шаги в файле .gitlab-Ci.yml.
image: chrisedrego/azng_ubuntu:latest stages: - build_deploy build_deploy: stage: build_deploy script: - az login -u $AZ_USER_NAME -p $AZ_USER_PASSWORD - az account set --subscription $AZ_SUBSCRIPTION_ID - npm i -g @angular/cli && npm install --save-dev @angular-devkit/build-angular # - /usr/bin/ng build --output-hashing none --base-href https://tymmychn.blob.core.windows.net/tymmychn/ - /usr/bin/ng build --output-hashing none --base-href https://tymmychn.azureedge.net/ - az storage blob upload-batch -s ./dist/tymmchyn -d $BLOB_NAME --account-key $ACCOUNT_KEY --account-name $ACCOUNT_NAME - az cdn endpoint purge -g $RESOURCE_GROUP --name tymmychn --profile-name tymmchyn --content-paths "/*"
https://gitlab.com/chrisedrego/tym_mchyn/-/blob/master/.gitlab-ci.yml
Ссылка на этот GitLab-repo содержит кодовую базу вместе с GitLab-Ci.yml. В этом случае давайте быстро рассмотрим Gitlab-Ci.yml и вот что это делает.
Строка 1: Image, относится к ссылке на изображение Docker, которое я использовал для этого примера, который содержит необходимые инструменты, связанные с Azure CLI и узлами JS, NPM
После чего мы объявили этапы, после чего мы определили одноступенку под названием «Build_Deploy».
Во-первых, мы аутентифицируемся к Azure, используя az login и имя пользователя и пароль, которые хранятся в виде секретных переменных в этом случае. Больше на Gitlab Secrets на этом ссылка Отказ
После аутентификации и выбора правильной подписки Если вы несколько подписок (9,10)
Gitlab уже делает над головой клонирования хранилища с ветвью на том, что в настоящее время мы в настоящее время принимаем во внимание, что теперь мы можем выполнять следующие шаги:
Установите угловой CLI
Установите угловой девит (необязательно)
Установите все зависимые пакеты в Package.json для углового приложения
Используйте угловую CLI, чтобы продолжать и построить угловое приложение, а затем установить базовую HREF на конечную точку CDN. Причина установки базы-Href заключается в том, что после того, как приложение будет размещено, и когда мы пытаемся получить доступ к приложению с конечной точки CDN во время выполнения, мы сталкиваемся с проблемой, пытаясь получить доступ к приложению, не в состоянии найти абсолютный путь Файлы JavaScript.
После создания сборки в конкретной папке, упомянутой в Angular.json, присутствующей в вашем корневом каталоге, теперь мы можем продолжать и загружать файлы в Blob.
После успешного загрузки содержимого мы убедитесь, что после каждого Commit/Push мы получаем последний код, удаляя продуманное содержание, которое, как ранее присутствовало в виде кеша на узле конечного точка CDN.
Теперь, если трубопровод был успешно, и правила Verizon применяли, мы можем отправиться на нашу конечную точку CDN, и мы должны увидеть окончательную магию.
Ну, это выглядит хорошо.
Оригинал: «https://dev.to/chrisedrego/how-to-setup-ci-cd-pipeline-using-gitlab-ci-to-deploy-to-azure-storage-azure-cdn-15g5»