Рубрики
Uncategorized

Как автоматически развернуть приложение VUE с помощью GitLab CI / CD на Ubuntu 18.04

Автор: Michael Okoh✏️ Предварительные условия Основные знания о командной строке Основные знающие … Теги от Vue, DevOps, учебник, CICD.

Написано Майкл Окох ✏️.

Предварительные условия

  • Основные знания о командной строке
  • Основные знания о доке
  • Основные знания контроля версий
  • Последний выпуск узла установлен на вашей местной машине

Установите Vue на локальной машине

Во-первых, вы будете устанавливать Vue-Cli Отказ Это инструмент командной строки, который позволяет вам быстро лечить новое приложение VUE. Запустите следующую команду для установки Vue-Cli На вашей местной машине:

npm install -g @vue/cli

Это натянет все зависимости, необходимые для запуска Vue-Cli , вы можете проверить его установку, запустив:

vue

Создайте приложение Vue

На этом этапе вы будете создавать новое приложение, используя Vue-Cli Создать команду, которая поможет нам на нашем приложении на нашем приложении вместе с необходимыми плагинами. Запустите следующее, чтобы создать новое приложение Vue:

vue create vue-demo

Вам будет предложено выбрать предустановку, оставьте его на предустановлении по умолчанию и нажмите Enter, чтобы продолжить.

Когда это сделано, измените каталог в Vue-Demo Папка, созданная Vue-Cli и запустить:

npm run serve

Это сделает ваше Vue приложение доступным на Localhost через порт 8080. Посетить http://localhost: 8080 Чтобы просмотреть ваше приложение.

Настройте Gitlab.

Теперь вы будете толкать ваше VUE-приложение в репозиторий GitLab. Перейти к Сайт Gitlab и войдите в свою учетную запись или создайте учетную запись, если у вас уже нет.

Далее создайте новый проект. В правом верхнем углу вашей панели инструментов GitLab вы увидите зеленую кнопку с текстом Новый проект Отказ Нажмите здесь.

Новый экран придет просить вас дать название проекту. Назовите проект Vue-Demo. Вы можете оставить описание проекта пустое, он может быть публичным, либо частным репозиторий. Оставьте последний флажок без запаха.

Вы должны связать свою Vue-Demo Применение локально с удаленным репозитором. Для этого направьтесь к терминалу и убедитесь, что вы находитесь в каталоге приложения и выполните следующие действия:

git init
git remote add origin git@gitlab.com:/vue-demo.git
git add .
git commit -m "Initial commit"
git push -u origin master

Примечание : Заменить С вашим настоящим именем пользователя GitLab.

Вам будет предложено ввести свой пароль GitLab или аутентифицироваться через SSH, если вы ранее настроили это в прошлом. Когда сделано, посетите Vue-Demo Приборная панель проекта на GitLab, все ваши исходные файлы должны присутствовать.

Настроить трубопровод

На этом этапе мы будем настроить наш трубопровод с помощью Docker и Gitlab CI. Используя ваш предпочитаемый текстовый редактор или IDE, создайте новый файл с именем Dockerfile Без какого-либо расширения и вставьте следующее:

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Эта конфигурация Docker вытягивает узел Alpine Image, который будет использоваться для создания нашего приложения для производства, а второй этап вытягивает Aginx Alpine Image, который будет использоваться для обслуживания нашей кодовой базы сборки, скопированной с первого этапа.

Далее создайте .gitlab-ci.yml Отказ Это позволит GitLab развернуть наши изменения на сервере. Этот файл конфигурации создает связь с сервером. Он содержит операции и команды, которые должны быть выполнены на сервере на каждом нажатии кода. Скопируйте и сохраните следующее в свой .gitlab-ci.yml файл:

image: docker
services:
  - docker:dind
stages:
  - deploy
step-deploy-prod:
  stage: deploy
  script:
    - docker build -t app/vue-demo .
    - docker run -d -p 80:80 --rm --name todoapp app/vue-demo

Сделайте и протолкните эти файлы в удаленный репозиторий:

git add .
git commit -m "Pipeline Configurations"
git push

На следующем шаге мы будем настроить наш сервер для работы с CI/CD GitLab.

Настройте сервер

На этом этапе вам будет нуждается в сервере работает Ubuntu . Вы можете зарегистрироваться Digitalocean И быстро предоставление сервера Ubuntu.

Ssh на ваш сервер

SSH на свой сервер бегом:

ssh username@

Примечание : SSH процедура может быть разной в Windows

Установите GitLab Runner

Gitlab Runner действует как интерфейс между GitLab и вашим удаленным сервером. Запустите следующее, чтобы установить GitLab Runner:

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash
sudo apt-get install gitlab-runner
sudo gitlab-runner start

Это будет устанавливать и начать Riglab Runner на своем сервере.

Зарегистрировать трубопровод

Чтобы зарегистрировать трубопровод, запустите следующую команду:

sudo gitlab-runner register

Вы будете возвращать подсказку, как это:

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/):

Тип https://gitlab.com/ и нажмите Введите Отказ Следующая подсказка будет:

Please enter the gitlab-ci token for this runner:

Вы можете получить ваш токен от вашего Vue-Demo Проектная приборная панель, парящая на Настройки На секции навигатора слева, еще одно подменю появится с кучей опций, нажмите на CI/CD Отказ

Следующий нажмите на Развернуть Кнопка на варианте бегуна.

Вы увидите ваш токен после расширения опции, скопируйте его, вернитесь к вашему серверу SSH-терминал, вставьте его и нажмите кнопку Введите ключ.

Пропустить все эти процедуры, вы можете напрямую посетить https://gitlab.com//vue-demo/-/settings/ci_cd . Отказ

Примечание: <Имя пользователя> должно быть ваше имя пользователя GitLab

Далее вам будет предложено ввести описание и теги для бегуна, подобного этому:

Please enter the gitlab-ci description for this runner:

а также

Please enter the gitlab-ci tags for this runner (comma separated):

Нажмите Введите ключ, чтобы пропустить их. Далее вам будет предложено следующее:

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

Введите оболочка и нажмите Enter. На данный момент вы успешно зарегистрировали бегун GitLab на вашем сервере.

Установить Docker

Вы можете быстро установить Docker, запустив:

sudo snap install docker

Это быстро установит Docker на вашу машину. Далее нам нужно установить разрешения для докера, запустив:

sudo groupadd docker
sudo usermod -aG docker $USER

Перезагрузите свой сервер, как это:

reboot

Войдите в систему и запустите:

sudo usermod -aG docker gitlab-runner

Это добавит GitLab Runner в группу Docker.

Добавить Gitlab Runner в Sudoers

Чтобы добавить GitLab Runner в список sudoers, запустите:

sudo nano /etc/sudoers

Вставьте следующее в конце файла:

gitlab-runner ALL=(ALL) NOPASSWD: ALL

Сохранить и выйти нано.

Проверьте информацию

Чтобы проверить работу вашей информации:

sudo nano /etc/gitlab-runner/config.toml

Это должно содержать, как это:

...
[[runners]]
  url = "https://gitlab.com/"
  token = "XXXXXXXXX"
  executor = "shell"
  [runners.custom_build_dir]
  [runners.ssh]
    user = ""
    host = ""
  [runners.cache]
    [runners.cache.s3]
    [runners.cache.gcs]
...

Если Пользователь и хозяин Результаты атрибутов Не совпадают на вашем сервере, вы можете исправить его в этом разделе:

...
[runners.ssh]
  user = ""
  host = ""
...

Если в файле не присутствует, добавьте его вместе с правильными учетными данными, сохраните и выйдите из файла. Перезапустите Gitlab Runner:

sudo gitlab-runner restart

Тестовое развертывание

На этом этапе вы будете запустить ваш трубопровод, чтобы увидеть, будет ли ваше приложение развернуто на сервере.

Перейдите к меню трубопровода от приборной панели вашего проекта Gitlab.

Нажмите на Запустите трубопровод Отказ

Выберите ветвь для развертывания, по умолчанию это будет Мастер Отказ Нажмите на Запустите трубопровод Отказ

Ваше развертывание приложений начнется.

Нажмите на Степ-развертывание -.... кнопка, чтобы увидеть процесс.

После успеха развертывания вы увидите Работа преуспела сообщение. Если он не удается, просмотрите все шаги, чтобы убедиться, что вы ничего не пропустили. Посетите IP-адрес сервера в своем браузере, вы увидите страницу посадки Vue, что означает, что ваше приложение было успешно развернуто.

Ваше приложение будет строить и развернуть себя на каждом толчке, сделанном в Мастер филиал автоматически.

Заключение

В этом уроке вы успешно создали Vue Project, написал конфигурации Docker и GitLab CI, настроили сервер с Docker, GitLab Runner (вместе с необходимыми разрешениями) и настроили трубопровод на GitLab. С этим вы должны настроить другие проекты в будущем.

Испытайте свои Vue Apps именно как пользователь делает

Отладка приложений Vue.js может быть сложно, особенно когда есть десятки, если не сотни мутаций во время пользовательской сессии. Если вы заинтересованы в мониторинге и отслеживании мутаций Vue для всех ваших пользователей в производстве, попробуйте logrocket.

Logrocket Похоже на DVR для веб-приложений, записывая буквально все, что происходит в ваших приложениях Vue, включая сетевые запросы, ошибки JavaScript, проблемы с производительностью и многое другое. Вместо того, чтобы угадать, почему проблемы происходят, вы можете совокупные и отчитываться о том, в каком состоянии ваше заявление произошло, когда произошла проблема.

Плагин LOGOCKET VEUX LOGS LOGS MUTATIONS VEUX в консоль Logocket Console, предоставив вам контекст вокруг того, что привело к ошибке, и в каком состоянии приложение произошло, когда произошла проблема.

Модернизация того, как вы отлаживаете свои приложения Vue — Начните мониторинг бесплатно.

Пост Как автоматически развернуть приложение VUE с помощью GitLab CI/CD на Ubuntu 18.04 появился первым на Logocket blog Отказ

Оригинал: «https://dev.to/bnevilleoneill/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu-18-04-4fad»