SPA-приложение на Vue.JS #6
Привет! В прошлом уроке мы закончили разработку нашего SPA-приложения на Vue.JS, а сегодня мы напишем просто NGINX-конфиг и настроим CI/CD с помощью Gitlab CI.
Немного теории
CI/CD — Continious integration / Continious Delivery — непрерывное развёртывание и непрерывная интеграция. Умение настраивать CI/CD очень важно для любого фронтенд-разработчика, поскольку это обеспечивает автоматизацию процесса доставки итогового приложения до конечного пользователя. В CI/CD pipeline можно встроить несколько стадий: тестирование, линтинг, сборка проекта.
Gitlab CI
Мы будем использовать Gitlab CI, поскольку эта CI-система бесплатна и любой желающий может развернуть Gitlab на своём сервере. Для того, чтобы объяснить CI-системе каким образом нужно собирать наше приложение нужно составить примерно следующий конфиг (важно записать всё это в файлик .gitlab-ci.yml):
image: node:latest pages: stage: deploy script: - npm config set registry https://registry.npmjs.org - npm i - npm run lint - npm run build artifacts: paths: - dist only: - master
image — задаёт окружение, в котором должна производиться сборка, в нашем случае это node:latest
Внутри pages (это job-name, поскольку обычно именно gitlab pages используются для демонстрации решения, собранного с помощью gitlab ci) мы должны описать наш pipeline по всем его стадиям. Мы используем только одну стадию deploy. В разделе script мы описываем все команды, которые должны выполниться при запуске стадии deploy. Пояснять их, надеюсь, не нужно.
В artifacts мы записвыаем путь до директории, в которой окажется результат выполнения наших скриптов. only — говорит о необходимости отслеживать только ветку master.
Gitlab runner
Исполняться наш pipeline будет при помощи gitlab runner. Давайте установим и настроим его на сервере с убунтой.
https://docs.gitlab.com/runner/install/linux-manually.html
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
sudo chmod +x /usr/local/bin/gitlab-runner
Создаём отдельного пользователя:
sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
Установим и запустим в качестве сервиса:
sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner sudo gitlab-runner start
Регистрация раннера (https://docs.gitlab.com/runner/register/index.html):
sudo gitlab-runner register
Вводим ссылку на Ваш gitlab-сервер (стандартно используется gitlab.com):
Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com ) https://gitlab.com
Please enter the gitlab-ci token for this runner xxx
Заполняем имя раннера (можно будет изменить на сайте гитлаба):
Please enter the gitlab-ci description for this runner [hostname] my-runner
Теперь специальные теги (можно будет изменить на сайте гитлаба):
Please enter the gitlab-ci tags for this runner (comma separated): my-tag,another-tag
Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
На этом с настройкой всё. Раннер можно перезапустить. Давайте проверим, как он работает: делаем пуш в ветку master.
Смотрим логи на самом гитлабе. Как видим, всё собралось без проблем. Перейдём к конфигурации NGINX.
NGINX
Не забудьте его прежде установить (https://nginx.org/ru/docs/install.html).
Переходим в директорию /etc/nginx/sites-available
, создаём там файлик для конфигурации (лучше создавать на основе файлика defalut, лежащего в этой же директории). Например, vue-covid.conf
.
Содержание примерно следующее:
server { listen 80; listen [::]:80; root /path/to/your/working/directory; }
ln -s /etc/nginx/sites-available/vue-covid.conf /etc/nginx/sites-enabled/vue-covid.conf
serv nginx restart
Проверяем работу. Всё! Теперь у вас есть полностью автоматизированная система, которая обновляется при каждом вашем пуше в ветку мастер и автоматически доходит до конечного потребителя.