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. Давайте установим и настроим его на сервере с убунтой.

Установка 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

Теперь выбираем executor:

Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:

Наш вариант 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

Перезапускаем NGINX:

serv nginx restart

Проверяем работу. Всё! Теперь у вас есть полностью автоматизированная система, которая обновляется при каждом вашем пуше в ветку мастер и автоматически доходит до конечного потребителя.