Развертывание автоматизации фронтенд-проекта — очень подробное руководство (Jenkins, Github Actions)

В этом руководстве в основном объясняется, как развертывать интерфейсные проекты с помощью Jenkins и Github Actions.

1. Первая часть — это использование Gitea для настройки сервера git в локальной сети, а затем использование Jenkins для развертывания проекта под Gitea на сервере в локальной сети.
2. Вторая часть — развернуть проект Github на Github Page и Alibaba Cloud с помощью Github Actions.

Для чтения этого руководства не требуется, чтобы вы заранее знали Jenkins и Github Actions, если вы следуете рекомендациям этого руководства, вы можете автоматизировать развертывание проектов.

PS: Операционная система компьютера, которым я пользуюсь, - windows, то есть все последующие операции выполняются под windows. Конфигурация других операционных систем аналогична, и особой разницы не будет.

Gitea + Jenkins автоматически создает интерфейсные проекты и развертывает их на сервере.

Gitea используется для создания сервера Git LAN, а Jenkins — это инструмент CI/CD для развертывания интерфейсных проектов.

Настроить Gitea

1. скачатьGitea, выберите предпочитаемую версию, например 1.13, выберитеgitea-1.13-windows-4.0-amd64.exeскачать.
2. После загрузки создайте новый каталог (например, gitea), поместите загруженное программное обеспечение Gitea в этот каталог и дважды щелкните для запуска.
3. Открытьlocalhost:3000Вы можете видеть, что Gitea уже работает на вашем компьютере.
4. Нажмите «Регистрация», в первый раз появится страница начальной конфигурации, выбор базы данных.SQLite3. В дополнение положитьlocalhostИзмените его на LAN-адрес вашего компьютера, например, IP-адрес моего компьютера192.168.0.118.

5. После заполнения информации нажмите «Установить сейчас» и подождите некоторое время, чтобы завершить настройку.
6. Продолжайте нажимать «Зарегистрировать пользователя», первый зарегистрированный пользователь станет администратором.
7. Откройте каталог установки Gitea и найдитеcustom\conf\app.ini, добавьте строку кода внутриSTART_SSH_SERVER = true. На этом этапе вы можете использовать ssh для выполнения операции push.

8. Если вы не можете клонировать проект с помощью http, отмените прокси-сервер git.

git config --global --unset http.proxy
git config --global --unset https.proxy

Настройка Дженкинса

1. Необходимо заранее установить JDK, существует множество руководств по установке JDK, пожалуйста, найдите их самостоятельно.
2. ОткрытьJenkinsСтраница загрузки.

3. столкнулся при установкеLogon Type, выберите первый.

4. Порт по умолчанию 8080, здесь я заполняю 8000. Он откроется автоматически после установкиhttp://localhost:8000Веб-сайт должен подождать некоторое время для инициализации.
5. Следуйте инструкциям, чтобы найти соответствующий файл (путь прямой копии открывается на моем компьютере), где является пароль администратора.

6. Для установки плагина выберите первый.

7. Создайте пользователя с правами администратора, нажмите «Готово» и «Сохранить» и перейдите к следующему шагу.

8. После завершения настройки автоматически откроется домашняя страница, затем нажмитеManage Jenkins -> Manage pluginsУстановите плагин.

9. Нажмите可选插件, введите nodejs, найдите плагины и установите. 10. После завершения установки вернитесь на домашнюю страницу и нажмитеManage Jenkins -> Global Tool ConfigurationНастройте ноды. Если ваш компьютер Win7, версия nodejs не должна быть слишком высокой, просто выберите версию v12.

Создать статический сервер

1. Создайте пустой каталог и выполните его в немnpm init -y, чтобы инициализировать проект.
2. воплощать в жизньnpm i expressСкачать экспресс.
3. затем создайтеserver.jsфайл, код такой:

const express = require('express')
const app = express()
const port = 8080

app.use(express.static('dist'))

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

Он помещает текущий каталогdistПапка устанавливается в каталог ресурсов статического сервера, а затем выполняетсяnode server.jsЗапустите сервер.

Поскольку нетdistпапка, поэтому посещение сайта — это пустая страница.

Но не волнуйтесь, вы увидите содержание через некоторое время.

Автоматическая сборка + развертывание на сервере

1. Загрузите демонстрационный проект, предоставленный Jenkins.building-a-multibranch-pipeline-project, затем создайте новый репозиторий в Gitea, клонируйте в него контент и отправьте его на сервер Gitea.

2. Откройте домашнюю страницу Jenkins и нажмите新建 ItemСоздайте проект.3. Выберите源码管理, введите адрес репозитория на вашем Gitea.

4. Вы также можете попробовать сборку по времени, приведенный ниже код означает сборку каждые 5 минут.

5. Выберите среду сборки, здесь выберите только что настроенные узлы.

6. Нажмите Добавить шаги сборки, окна для выбораexecute windows batch command, линукс на выборexecute shell.

7. войтиnpm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/yРоль этой команды заключается в установке зависимостей, сборке проектов и копировании статического ресурса сборки в указанный каталог.G:\node-server\dist\ . Этот каталог - это статический каталог ресурсов сервера.

8. После сохранения вернитесь на домашнюю страницу. Щелкните маленький треугольник рядом с элементом и выберитеbuild now.9. Начните сборку проекта, мы можем нажать на проект, чтобы просмотреть процесс сборки.

10. Сборка удачная, открытаяhttp://localhost:8080/Взгляните на результаты. 11. Так как мы просто ставим билд каждые 5 минут, то можем менять содержимое сайта, потом ничего не делать, подождать какое-то время и снова открыть сайт.12. Отправьте изменения на сервер Gitea и немного подождите. Откройте веб-сайт и обнаружите, что содержимое изменилось.

Соберите проект с пайплайном

Строительные проекты с использованием трубопроводов можно комбинировать с Gitea.webhookхук для выполненияgit pushкогда проект создается автоматически.

1. Нажмите на свое имя пользователя в правом верхнем углу главной страницы, выберите设置.

2. Добавьте токен, не забудьте сохранить токен.

3. Откройте домашнюю страницу Jenkins и нажмите新建 ItemСоздайте проект.

4. Нажмите构建触发器,выберите触发远程构建, введите токен, который вы только что создали.5. Выберите трубопровод, следуйте инструкциям, чтобы ввести содержимое, затем нажмите保存.

6. Откройте каталог установки Jenkins.jenkins.xmlфайл, нашел<arguments>метка, добавить-Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true. то, что он делает, близкоCSRFВалидация, если не выключена, GiteawebhookОн будет продолжать сообщать об ошибках 403 и не может быть использован. После добавления параметров введите командную строку в директориюjenkins.exe restartПерезапустите Дженкинса.

7. Вернитесь на домашнюю страницу, настройте глобальные параметры безопасности. галочка匿名用户具有可读权限, а затем сохраните.

8. Откройте страницу репозитория Gitea и выберите仓库设置.

9. нажмите管理 web 钩子Добавить веб-хуки, параметры хукаGitea.
10. Целевой URL-адрес вводится по запросу Дженкинса. затем нажмите添加 web 钩子.

11. Нажмите на созданный веб-хук, перетащите его вниз и нажмите «Проверить отправку». Неудивительно, что вы должны увидеть сообщение о том, что отправка прошла успешно.В это время, когда вы вернетесь на домашнюю страницу Jenkins, вы обнаружите, что проект уже создается.12. Так как нет конфигурацииJenkinsfileфайл, сборка в этот раз не удастся. Итак, следующий шаг — настройкаJenkinsfileдокумент. Скопируйте следующий код в свой проект Gitea в разделеJenkinsfileдокумент. Jenkins автоматически прочитает содержимое файла для выполнения операций сборки и развертывания при сборке.

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {  // window 使用 bat， linux 使用 sh
                bat 'npm i'
                bat 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 这里需要改成你的静态服务器资源目录
            }
        }
    }
}

13. Всякий раз, когда ваш проект Gitea выполняетсяpushПри эксплуатации Gitea пройдетwebhookОтправьте почтовый запрос в Jenkins для выполнения операций сборки и развертывания.

резюме

Если вашей операционной системой является Linux, вы можете использовать ssh для удаленного входа в Alibaba Cloud после упаковки Jenkins и скопировать упакованные файлы на статический сервер в Alibaba Cloud, чтобы можно было автоматически развернуть Alibaba Cloud. Подробнее о том, как удаленно войти в Alibaba Cloud, см. в разделе «Развертывание Github Actions в Alibaba Cloud» ниже.

Действия GitHub автоматически строят и развертывают проект на передний сервер

Если ваш проект является проектом Github, то использование Github Actions может быть лучшим выбором.

Развернуть на странице Github

Давайте посмотрим, как выполнить развертывание на Github Pages с помощью Github Actions.

Под проект нужно развернуть на Github Page, создать yml файл и положить его в.github/workflowПод содержанием. ты можешь назвать этоci.yml, что похоже на ДженкинсаJenkinsfileфайл, содержащий код скрипта, который будет выполняться автоматически.

Содержимое этого файла yml выглядит следующим образом:

name: Build and Deploy
on: # 监听 master 分支上的 push 事件
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false

      - name: Install and Build # 下载依赖 打包项目
        run: |
          npm install
          npm run build

      - name: Deploy # 将打包内容发布到 github page
        uses: JamesIves/github-pages-deploy-action@3.5.9 # 使用别人写好的 actions
        with:  # 自定义环境变量
          ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} # VUE_ADMIN_TEMPLATE 是我的 secret 名称，需要替换成你的
          BRANCH: master
          FOLDER: dist
          REPOSITORY_NAME: woai3c/woai3c.github.io # 这是我的 github page 仓库
          TARGET_FOLDER: github-actions-demo # 打包的文件将放到静态服务器 github-actions-demo 目录下

EстьACCESS_TOKENПеременные должны быть настроены сами по себе.

1. Откройте сайт Github, нажмите на свою аватарку в правом верхнем углу, выберитеsettings.

2. Нажмите в левом нижнем углуdeveloper settings.

3. На левой боковой панели нажмитеPersonal access tokens（个人访问令牌）.

4. нажмитеGenerate new token（生成新令牌）.

5. Введите имя и отметьтеrepo.

6. Прокрутите вниз и нажмитеGenerate tokenи сохраните сгенерированный токен.

7. Откройте свой проект Github и нажмитеsettings.

нажмитеsecrets->new secret.

Создайте ключ, небрежно введите имя (разделенное символом подчеркивания) и введите токен, который вы только что создали.

в приведенном выше кодеACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }}Замените его именем секрета, который вы только что создали.Замененный код выглядит следующим образомACCESS_TOKEN: ${{ secrets.TEST_A_B }}. После сохранения сделайте коммит на Github.

В будущем ваш проект должен выполняться толькоgit push, Github Actions автоматически создаст проект и опубликует его на вашей странице Github.

Чтобы узнать подробности выполнения Github Actions, нажмите на репозиторийActionsвариант просмотра.

Для получения дополнительной информации, пожалуйста, обратитесь к моему демонстрационному проектуgithub-actions-demo.

После успешной сборки откройте веб-сайт Github Page, и вы обнаружите, что контент был успешно опубликован.

Разверните действия Github в облаке Alibaba

Инициализировать облачный сервер Alibaba

1. Купить сервер Alibaba Cloud, выбрать операционную систему, я выбираю ubuntu
2. В консоли управления облачным сервером выберите Экземпляр->Дополнительно->Ключ->Сбросить пароль экземпляра (для входа в систему позже)
3. Выберите «Удаленное подключение» -> «VNC», появится всплывающий пароль, запомните его и используйте для удаленных подключений в будущем (ctrl + alt + f1~f6 переключайте терминалы, например, ctrl + alt + f1 — это первый терминал)
4. После ввода идет ввод командной строкиroot(имя пользователя по умолчанию), пароль — это пароль экземпляра, который вы только что сбросили
5. Войти успешно, обновить источник установкиsudo apt-get update && sudo apt-get upgrade -y
6. установить нпмsudo apt-get install npm
7. Установите пакет управления npmsudo npm install -g n
8. Установите последнюю стабильную версию узлаsudo n stable

Создать статический сервер

mkdir node-server // 创建 node-server 文件夹
cd node-server // 进入 node-server 文件夹
npm init -y // 初始化项目
npm i express
touch server.js // 创建 server.js 文件
vim server.js // 编辑 server.js 文件

Введите следующий код (используйте vim для ввода файла и нажмите i для редактирования, нажмите esc при сохранении, затем введите :wq, затем нажмите Enter), пожалуйста, найдите другие способы использования.

const express = require('express')
const app = express()
const port = 3388 // 填入自己的阿里云映射端口，在网络安全组配置。

app.use(express.static('dist'))

app.listen(port, '0.0.0.0', () => {
    console.log(`listening`)
})

воплощать в жизньnode server.jsНачать мониторинг, потому что нетdistкаталог, не беспокойтесь.

Обратите внимание, что IP-адрес прослушивания должен быть0.0.0.0, пожалуйста, посмотриПримечания по развертыванию проектов Node.js.

Alibaba Yun входит в порт для просмотра и настройки в группе безопасности сети.

Создайте пару ключей Alibaba Cloud

Пожалуйста, обратитесь кСоздайте пару ключей SSHа такжеПривязать пару ключей SSHПривяжите свой экземпляр сервера ECS с ключом и сохраните закрытый ключ к компьютеру (например, в файле ECS.PEM).

Откройте проект Github, который вы хотите развернуть в облаке Alibaba, и нажмите settings->secrets.

Нажмите на новый секретсекретное имяSERVER_SSH_KEYи введите ключ Alibaba Cloud прямо сейчас.

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

построить под свой проект.github\workflows\ci.ymlФайл, заполните следующее:

name: Build app and deploy to aliyun
on:
  #监听push操作
  push:
    branches:
      # master分支，你也可以改成其他分支
      - master
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.16.2'
    - name: Install npm dependencies
      run: npm install
    - name: Run build task
      run: npm run build
    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v2.1.5
      env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rltgoDzvO --delete'
          SOURCE: dist # 这是要复制到阿里云静态服务器的文件夹名称
          REMOTE_HOST: '118.190.217.8' # 你的阿里云公网地址
          REMOTE_USER: root # 阿里云登录后默认为 root 用户，并且所在文件夹为 root
          TARGET: /root/node-server # 打包后的 dist 文件夹将放在 /root/node-server

Сохраните и отправьте на Github.

В будущем, пока ваш проект выполняетсяgit pushоперация, она будет выполнена автоматическиci.ymlОпределенный сценарий поместит файл пакета на ваш статический сервер Alibaba Cloud.

Эти действия в основном делают две вещи:

1. Клонируйте свой проект, скачивайте зависимости, package.
2. Используйте свой закрытый ключ Alibaba Cloud для входа в Alibaba Cloud через SSH и загрузите упакованный файл (используя rsync) в папку, указанную Alibaba Cloud.

Если вы все еще не понимаете, пожалуйста, взгляните на мойdemo.

ci.ymlОписание файла конфигурации

1. name, указывающее имя этого рабочего процесса.
2. on, указывая значение мониторинга, за которым следуют различные события, такие какpushмероприятие.

Следующий код указывает, что вы хотите контролироватьmasterразветвленныйpushмероприятие. Когда Github Actions слушаетpushКогда событие происходит, оно выполняет следующееjobsОпределенная последовательность операций.

name: Build app and deploy to aliyun
on:
  #监听push操作
  push:
    branches:
      # master分支，你也可以改成其他分支
      - master
jobs:
...

3. jobs, что буквально означает серию заданий, вы можетеjobsМногие задания определены под полями, напримерjob1,job2д., и выполняются они параллельно.

jobs:
  job1:
  	...
  job2:
  	...
  job3:
	...

оглядыватьсяci.ymlфайл, у него есть только одно задание, т.е.build, название задания определяете сами, звонитеgoodТакже может.

4. runs-on, указывающий, в какой операционной системе вы хотите запустить этот рабочий процесс,ci.ymlФайл определяет последнюю стабильную версиюubuntu. Помимо Ubuntu, он также может выбрать MAC или Windows.

5. steps, буквально означает серию шагов, что означает, что задание выполняется в несколько шагов. Например, выполнитьstep1, а затем выполнитьstep2...

setpsПошаговое объяснение

setpsНа самом деле это массив, и в синтаксисе YAML он начинается с-Он начинается с элемента массива. Например['a', 'b', 'c']Выраженный синтаксис YAML:

- a
- b
- c

такsetpsЭто массив шагов, выполняемых сверху вниз. отci.ymlИз документации каждый маленький шаг имеет несколько связанных с ним опций:

1. name, имя маленького шага.
2. uses, имя или путь к библиотеке действий, используемой небольшими шагами, Github Actions позволяет вам использовать библиотеку действий, написанную другими.
3. run, небольшие шаги, которые необходимо выполнитьshellЗаказ.
4. env, чтобы установить переменные среды, связанные с небольшими шагами.
5. with, предоставляя параметры.

В итоге,ci.ymlв файлеsetpsЭто легко понять, давайте объясним это от начала до конца:

    steps:
    - uses: actions/checkout@v1
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.16.2'
    - name: Install npm dependencies
      run: npm install
    - name: Run build task
      run: npm run build
    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v2.1.5
      env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rltgoDzvO --delete'
          SOURCE: dist # 这是要复制到阿里云静态服务器的文件夹名称
          REMOTE_HOST: '118.190.217.8' # 你的阿里云公网地址
          REMOTE_USER: root # 阿里云登录后默认为 root 用户，并且所在文件夹为 root
          TARGET: /root/node-server # 打包后的 dist 文件夹将放在 /root/node-server

1. использоватьactions/checkout@v1код клонирования библиотеки вubuntuначальство.
2. использоватьactions/setup-node@v1установка библиотеки nodejs,withпредоставил параметрnode-versionУказывает версию nodejs для установки.
3. существуетubuntuизshellвыполнить наnpm installСкачать зависимость.
4. воплощать в жизньnpm run buildУпакуйте проект.
5. использоватьeasingthemes/ssh-deploy@v2.1.5библиотека, функция этой библиотеки заключается в использованииSSHУдаленно войдите на сервер Alibaba Cloud, используя метод удаленного входа, и скопируйте упакованную папку в каталог, указанный Alibaba Cloud.

отenvКак видно, эта библиотека ActionS требует от нас предоставления нескольких переменных среды:

1. SSH_PRIVATE_KEY: Alibaba Cloud Key Пара закрытых ключей (вам нужно написать перед Github Secrets),
2. ARGS: '-rltgoDzvO --delete', невнимательно изучил, видимо удалили после копирования файла.
3. SOURCE: имя упакованной папки
4. REMOTE_HOST: IP-адрес общедоступной сети Alibaba Cloud.
5. REMOTE_USER: Имя пользователя облачного сервера Alibaba.
6. TARGET: имя каталога, который вы хотите скопировать в указанный каталог облачного сервера Alibaba.

Если вы хотите узнать реализацию других библиотек действий, вы можете напрямую скопировать имя библиотеки действий для поиска в поисковой системе, например, поискactions/checkoutРезультат:

Я видел это, ставь лайк и уходи.

использованная литература

• Руководство пользователя Дженкинс
• Документация по действиям GitHub
• Документация по страницам GitHub
• Документация Gitea
• Синтаксис рабочего процесса для действий GitHub

Чтобы увидеть больше статей, следите за обновлениями