В декабре 2018 года Microsoft объявила об общедоступности статического хостинга веб-сайтов с использованием службы хранилища Azure. Это отличная новость, поскольку служба хранилища Azure стоит недорого или даже бесплатно, если вы не используете определенные ограничения. Большинству современных веб-приложений требуется только такой статический хостинг без какой-либо поддержки на стороне сервера (например, PHP, Java или Ruby) для работы.
GitLab, с другой стороны, является отличной платформой для размещения вашего кода в репозитории Git, а также для непрерывного развертывания. Благодаря щедрым 2000 минут сборки, которые вы получаете бесплатно каждый месяц, он идеально подходит для малых и средних проектов.
В этом руководстве мы настраиваем конвейер непрерывного развертывания для вашего веб-приложения на основе NPM: всякий раз, когда новая фиксация отправляется в главную ветвь вашего репозитория GitLab, должны запускаться тесты, должна быть создана сборка и выходные данные должны быть скопированы. в папку статического веб-сайта вашей учетной записи хранения Azure, готовую к обслуживанию. Пойдем.
Включение статического хостинга веб-сайтов в Azure
Добавление статического хостинга веб-сайтов к существующей или вновь созданной учетной записи хранения можно выполнить за несколько простых шагов. Перейдите в свою учетную запись хранения и выберите в меню «Статический веб-сайт», нажмите кнопку «Включить» и нажмите «Сохранить». Значения по умолчанию будут работать нормально.
После сохранения внутри учетной записи хранения создается контейнер (или папка) с именем $web, в котором находятся обслуживаемые файлы.
Значение в поле «Первичная конечная точка», в котором будет размещаться ваш проект. Вы можете использовать его, например, в конфигурации DNS CNAME, чтобы сделать ваш проект доступным в вашем собственном домене.
После этого перейдите в раздел «Ключи доступа» и запишите «Строку подключения». Любое из двух значений (под key1 и key2) будет работать. Мы будем использовать их позже для доступа к учетной записи хранения из GitLab.
Настройка репозитория GitLab
В своем проекте GitLab перейдите на страницу «Настройки› CI / CD »и нажмите кнопку« Развернуть »в разделе« Переменные ».
В поле «Ключ» введите AZURE_STORAGE_CONNECTION_STRING, вставьте строку подключения, ранее полученную из вашей учетной записи хранилища Azure, в поле «Значение» и нажмите «Сохранить переменные».
Настройка конвейера CI / CD
Теперь самое интересное. Мы создадим простой конвейер непрерывного развертывания, используя файл конфигурации GitLab.
Для этого создайте файл с именем .gitlab-ci.yml в корневой папке вашего проекта на основе NPM (где находятся ваш package.json и другие файлы конфигурации). Скопируйте следующую упрощенную конфигурацию в этот файл, изменив значения в соответствии с вашими потребностями, и сохраните ее.
stages:
- test
- build
- deploy
test:eslint:
image: node:8
stage: test
script:
- npm install
- npm run test:eslint
only:
- master
- testing
test:node:8:
image: node:8
stage: test
script:
- npm install
- npm run test
only:
- master
- testing
build:
image: node:8
stage: build
artifacts:
paths:
- build/
scripts:
- npm run build
only:
- master
deploy:
stage: deploy
image: microsoft/azure-cli
dependencies:
- build
script:
- az storage blob delete-batch -s "\$web" --connection-string $AZURE_STORAGE_CONNECTION_STRING
- az storage blob upload-batch -d "\$web" -s build --connection-string $AZURE_STORAGE_CONNECTION_STRING
only:
- master
Я кратко объясню, что делает конфигурация. Для получения дополнительной информации обратитесь к документации GitLab.
Сначала мы определяем три этапа, которые будут выполняться последовательно: тестирование, сборка и развертывание. Каждый этап выполняется только в том случае, если предыдущий этап завершился успешно.
Наш этап тестирования состоит из двух подзадач для линтинга с использованием eslint (выполнение npm run test:eslint) и регулярного модульного тестирования (выполнение npm run test). Для обеих этих подзадач мы используем образ докера Node.js для версии 8. Мы ограничиваем выполнение этих этапов только в ветвях, называемых главная и тестирование (или любых других ветвях, которые вам нравятся).
После успешного завершения этапа тестирования будет запущен этап сборки для основной ветви, создающей файлы, используемые для развертывания. Опять же, используя наш образ докера Node 8, вызывается команда npm run build. Папка вывода этой команды (в данном случае build) регистрируется как артефакт, который мы используем для последующего этапа развертывания.
Наконец, этап развертывания будет выполнен для основной ветки. Напротив, здесь мы используем образ докера Azure CLI. Как следует из названия, он включает инструменты командной строки для доступа к Azure. Поскольку мы хотим развернуть выходные данные предыдущего этапа сборки, нам нужен этот артефакт как зависимость. Сначала мы очищаем папку $web в учетной записи хранилища Azure, чтобы удалить старые файлы из предыдущей сборки. После этого мы копируем все из артефакта сборки в указанную папку $web. Для обоих этих шагов требуется переменная среды AZURE_STORAGE_CONNECTION_STRING, которую мы создали ранее.
И это все. Теперь, когда вы отправляете что-либо в главную ветвь репозитория проекта GitLab, выполняются тесты, и после их успешного завершения запускается развертывание в хранилище Azure.
Подпишитесь на нас в Twitter 🐦 и Facebook 👥 и присоединитесь к нашей группе Facebook 💬 .
Чтобы присоединиться к нашему сообществу Slack 🗣️ и читать наши еженедельные темы о Фавнах 🗞️, нажмите здесь⬇
