[Серия практических занятий] Автоматическое развертывание проектов vue с помощью Jenkins+Docker

вводить

Эта серия посвящена тому, как автоматизировать развертывание наших интерфейсных и серверных проектов.

В этой статье в основном рассказывается, как автоматизировать развертывание проектов vue.

В следующей статье речь пойдет о том, как автоматизировать развертывание проектов nodejs

Я здесь на Mac OS.Если вы используете Linux, вы не столкнетесь со многими проблемами, описанными ниже.

весь процесс

В первую очередь представляем себе наш компьютер как сервер.Конечно, если у вас есть сервер, вы также можете выполнять следующие операции непосредственно на сервере

Для удобства буду прямо использовать свой комп(мак) как сервер.Оказывается тут много ям! ! !

Обратите внимание на разницу между нижеследующим локальным и серверным, собственно здесь мы все наши компьютеры

Устанавливаем докер на сервер (здесь наш мак)
Мы установили jenkins с докером на сервер (здесь наш Mac)
Мы создаем новый проект vue локально и отправляем его на github.
Заходим на jenkins на сервер локально, то есть открываем URL http://localhost:8081 (если это сервер, заменяем localhost на ip вашего сервера)
Мы использовали jenkins, чтобы перетащить проект github в каталог установки jenkins.workspace/содержание
Дженкинс использует执行shellвыполнил команду

npm install
npm run build

Здесь нам нужно установить плагин nodejs для jenkins

Подключаемся к нашему серверу с помощью jenkins ssh

Здесь нам нужно установить плагин Publish Over SSH и настроить сервер

Сделайте следующее на сервере (здесь наш Mac)

Упакуйте наш проект vue в зеркало vuenginxapp

Создайте контейнер vuenginxapp с этим образом

установить докер

Пожалуйста, обратитесь кууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу.com/docker/Mac о…

Я здесь, на Mac, после успешной установки в строке состояния появляется значок докера.

Затем введите командную строкуdocker -v

Установка прошла успешно

докер установить Дженкинс

Не по теме: Можно и без докера установить, можете сослаться на другую мою статьюMac установить Дженкинс

Поиск зеркал Дженкинса

hub.docker.com/Именно там докер хранит образы (images).Интерфейс выглядит следующим образом:

Давайте найдем образ jenkins для установки

Примечание. Хотя первая версия является официально поддерживаемой версией докера, она давно не обновлялась и является устаревшей версией. Итак, здесь мы собираемся установить второй, который поддерживается jenkins.

ps: мы также можем искать через командную строку, командаdocker search jenkins

докер установить Дженкинс

Создайте новый каталог jenkins_home, так как я здесь

Выполнение заказа

docker run --name jenkins_node -d -v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts

Примечание. Не копируйте приведенную выше команду прямо сюда, вам нужно заменить /Users/isaacho/Documents/application/docker/jenkins_home только что созданным каталогом. Точно так же, если /Users/isaacho/Documents/application/docker/jenkins_home отображается ниже, вам нужно изменить его на свой каталог.

Дождитесь процесса установки. . . , если вы можете открытьhttp://localhost:8081Установка прошла успешно

В то же время мы видим, что в каталоге /Users/isaacho/Documents/application/docker/jenkins_home создается много файлов.

Командное объяснение:

--name jenkins_node означает, что имя вашего контейнера jenkins_node

-d означает запуск в фоновом режиме

-v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home означает сопоставление нашего недавно созданного каталога jenkins_home с каталогом контейнера /var/jenkins_home

-p — сопоставление портов

настроить Дженкинс

браузер открытhttp://localhost:8081, интерфейс выглядит следующим образом:

Получаем пароль администратора следующей командой

cat /Users/isaacho/Documents/application/docker/jenkins_home/secrets/initialAdminPassword

Нажмите для продолжения

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

Создать администратора

Нажмите сохранить и закончить

Нажмите, чтобы начать использовать jenkins

Установите ssh-плагин

Щелкните Управление системой.

поискPublish Over SSHи установить

настроить ssh

Управление системой = "настроить систему = "тянуть в самый низ"

Нажмите «Проверить конфигурацию», если отображается сообщение «Успех», значит, конфигурация выполнена успешно, нажмите «Сохранить».

Если это не удается, это означает, что на нашем компьютере не включен удаленный вход в систему.

решение:

Выберите «Системные настройки» -> «Общий доступ» -> «Удаленный вход».

Имя хоста выше - это ваш IP-адрес здесь

Установите плагин узла

Плагин узла необходимо использовать при запуске проекта узла. Сначала установите его здесь.

Щелкните Управление системой.

дождитесь установки

Выберите для установки версию nodejs

Подготовить vue-проект

Проект загружен наgithub

vue cli для создания проекта vue

Мы используем vue-cli3 для непосредственного создания проекта vue.

Примечание. Для этого требуется, чтобы версия вашего узла была больше 8.9 или выше.

vue create vueclidemoapp

переписать

Измените компонент HelloWorld.vue, перепишите страницу и добавьте аксиомы для отправки запроса.

import axios from 'axios';
axios.get('/api', {
  params: {},
}).then((res) => {
  console.log(res);
});

...

Интерфейс выглядит следующим образом

Создадим конфигурационный файл nginx.

Конфигурацию nginx см.Что интерфейс хочет знать о Nginx

Создайте новый nginx.conf в корневом каталоге проекта.

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;
    gzip_types text/plain application/javascript text/css;

    # 虚拟主机server块
    server {
        # 端口
        listen   80;
        # 匹配请求中的host值
        server_name  localhost;
        
        # 监听请求路径
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }

    include /etc/nginx/conf.d/*.conf;
}

Создать Dockerfile

Создайте новый Dockerfile в корневом каталоге проекта.


FROM nginx

EXPOSE 80

На данный момент ваша структура каталогов выглядит так

Загрузите этот проект на github

Я не буду демонстрировать это здесь, адрес моего проекта на github https://github.com/repototest/vueclidemoapp.

Дженкинс развернуть проект vue

Новое задание

Первая команда оболочки — собрать наш проект vue, который создаст каталог dist в корневом каталоге проекта.

echo $PATH
node -v
npm -v
npm install
npm run build

Вторая команда оболочки используется для создания образа докера и запуска службы докера.

Сначала он подключится к нашему серверу по ssh.

docker stop vuenginxapp || true \
 && docker rm vuenginxapp || true \
 && cd /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && docker build  -t vuenginxapp  . \
 && docker run -d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

docker stop vuenginxappИспользуется для остановки контейнера vuenginxapp.

sudo docker rm vuenginxappИспользуется для удаления контейнера vuenginxapp

cd /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoappВойдите в каталог нашего проекта, который необходимо изменить на свой собственный каталог, т.е.(yourpath)/jenkins_home/workspace/vueclidemoapp, ваш путь — это каталог, когда мы создали каталог jenkins_home выше

docker build -t vuenginxapp .Указывает образ сборки с именем vuenginxapp.

docker run -d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxappУказывает, что указанный выше vuenginxapp сгенерировал контейнер vuenginxapp для образа.

объяснить подробно-dработать в фоновом режиме

-p 8083:80Сопоставьте порт 80 контейнера с портом 8083, к которому мы обращаемся, обратите внимание, что порт 80 — это номер порта по умолчанию для nginx.

--name vuenginxappИмя контейнера — vuenginxapp.

-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/htmlСмонтируйте сгенерированный каталог dist в /usr/share/nginx/html контейнера, /usr/share/nginx/html — это http-каталог nginx по умолчанию.

-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.confСмонтируйте наш nginx.conf в /etc/nginx/nginx.conf контейнера, /etc/nginx/nginx.conf — файл конфигурации по умолчанию для nginx.

vuenginxappэто наше зеркальное имя

возможные проблемы

докер это не команда Причина этой проблемы в том, что когда мы используем ssh для подключения к Mac, командная строка может использовать только команды из /usr/bin, но наша команда docker находится в /usr/local/bin, поэтому мы не можем найти его, решить его Решение состоит в том, чтобы заменить вышеуказанный докер на /usr/local/bin/docker

который

/usr/local/bin/docker stop vuenginxapp || true \
 && /usr/local/bin/docker rm vuenginxapp || true \
 && cd  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && /usr/local/bin/docker build  -t vuenginxapp  . \
 && /usr/local/bin/docker run -d -p 8083:80 --name vuenginxapp -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

Построить проект

Нажмите, чтобы построить сейчас

Ожидает развертывания. . .

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

Вы можете видеть, что наш проект тянется к(yourpath)/jenkins_home/workspaceвниз

Посетите http://localhost:8083/

На данный момент мы успешно развернули наш проект vue.

возможные проблемы

Get registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)