🛫 Автоматическое развертывание переднего плана: реализовано с помощью Gitlab CI/CD.

внешний интерфейс JavaScript

🌏 Введение

Традиционные интерфейсные развертывания часто проходят через:本地代码更新 => 本地打包项目 => 清空服务器相应目录 => 上传项目包至相应目录Несколько стадий, это механически повторяющиеся шаги. Для этого процесса мы часто можемCI/CDметод оптимизирован. так называемыйCI/CD, то есть непрерывная интеграция/непрерывное развертывание.Упомянутые выше шаги можно рассматривать как форму непрерывного развертывания, и вы можете разобраться в этом более подробно.

Jenkins,Travis CIВсе эти инструменты могут выполнять непрерывное развертывание. Помимо,Gitlab CI/CDЭто требование также может быть хорошо выполнено. Мы представим его подробно ниже.

🌏 Основные инструменты

GitLab Runner

GitLab Runnerзаключается в сотрудничествеGitLab CI/CDОсновная программа, которая выполняет свою работу по соображениям производительности,GitLab Runnerдолжно быть сGitlabРазмещены на разных серверах (GitlabНа отдельном сервере репозитория,GitLab Runnerна сервере, где развернуто веб-приложение).GitLab Runnerв сGitLabПосле ассоциации на сервере могут выполняться различные командные операции, такие как извлечение проекта, упаковка файлов и копирование ресурсов.

Git

Необходимо установить на веб-сервереGitполучить удаленный склад.

Node

Используется для завершения работы по упаковке на веб-сервере.

NPM or Yarn or pnpm

Используется для завершения зависимостей, таких как загрузка на веб-сервере (сyarn,pnpmтак же доступно).

web服务器上的所需程序

🌏 Процесс

Здесь я сам использую среду centOS:

1. Установите необходимые инструменты на веб-сервере

(1) Установить узел

# 下载node包
wget https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz

# 解压Node包
tar -xf node-v16.13.0-linux-x64.tar.xz

# 在配置文件（位置多在/etc/profile）末尾添加：
export PATH=$PATH:/root/node-v16.13.0-linux-x64/bin

# 刷新shell环境：
source /etc/profile

# 查看版本（输出版本号则安装成功）：
node -v

#后续安装操作，都可通过-v或者--version来查看是否成功

npmвстроенныйnode, если вы хотите использоватьyarnили черезnpmДля глобальной установки команда такая же, как и в нашей локальной среде:

npm i yarn -g
#or
npm i pnpm -g

(2) Установите Git

# 利用yum安装git
yum -y install git

# 查看git版本
git --version

(3) Установите Gitlab Runner

# 安装程序
wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64

# 等待下载完成后分配权限
chmod +x /usr/local/bin/gitlab-runner

# 创建runner用户
useradd --comment 'test' --create-home gitlab-runner --shell /bin/bash

# 安装程序
gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner

# 启动程序
gitlab-runner start

# 安装完成后可使用gitlab-runner --version查看是否成功

2. Настройте Runner и CI/CD

После завершения основной операции установки наступает основной этап: настройка Runner и CI/CD.

(1) Настройка Gitlab Runner

Сначала откройте репозиторий gitlab, в который нужно добавить функцию автоматического развертывания, в котором设置 > CI/CD > RunnerНайдите информацию о конфигурации бегуна для резервного копирования в:

image.png

Настройте бегун на веб-сервере:

gitlab-runner register

>> Enter the GitLab instance URL (for example, https://gitlab.com/):
# 输入刚才获取到的gitlab仓库地址
>> Enter the registration token:
# 输入刚才获取到的token
>> Enter a description for the runner:
# 自定runner描述
>> Enter tags for the runner (comma-separated):
# 自定runner标签
>> Enter an executor: docker-ssh, docker+machine, docker-ssh+machine, docker, parallels, shell, ssh, virtualbox, kubernetes, custom:
# 选择执行器，此处我们输入shell

Полный пример:image.png

(2) Configure.gitlab-ci.yml

.gitlab-ci.ymlФайл — это файл процесса, выполняемый конвейером, и Runner соответствующим образом завершает указанную серию процессов.

Создаем в корневом каталоге проекта.gitlab-ci.ymlфайл, а затем запишите в него содержимое:

# 阶段
stages:
  - install
  - build
  - deploy

cache:
  paths:
    - node_modules/

# 安装依赖
install:
  stage: install
  # 此处的tags必须填入之前注册时自定的tag
  tags: 
    - deploy
  # 规定仅在package.json提交时才触发此阶段
  only:
    changes:
      - package.json
  # 执行脚本
  script:
    yarn

# 打包项目
build:
  stage: build 
  tags: 
    - deploy
  script: 
    - yarn build
  # 将此阶段产物传递至下一阶段 
  artifacts: 
    paths:
        - dist/

# 部署项目
deploy:
  stage: deploy
  tags: 
    - deploy
  script: 
    # 清空网站根目录，目录请根据服务器实际情况填写
    - rm -rf /www/wwwroot/stjerne/salary/*
    # 复制打包后的文件至网站根目录，目录请根据服务器实际情况填写
    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/stjerne/salary/

После сохранения и отправки в gitlab сборка и развертывание начнутся автоматически.

Во время сборки вы можете наблюдать за процессом сборки в панели gitlab CI/CD:

image.png

После завершения задания конвейера вы можете перейти на страницу для его просмотра🛫🛫🛫🛫🛫

Категории