使用Jenkins自动部署vue项目

1、Jenkins简介

Jenkins是开源CI&CD软件领导者， 提供超过1000个插件来支持构建、部署、自动化， 满足任何项目的需要。

2、Jenkins安装

这里是使用docker-compose安装Jenkins，所以需要先安装docker和docker-compose

2.1、docker安装

在安装前检查是否有安装gcc和gcc-c++

安装软件包
yum install -y yum-utils

设置阿里云镜像仓库
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

更新软件包索引
yum makecache fast

安装docker
yum -y install docker-ce docker-ce-cli containerd.io

启动docker
systemctl start docker

开机启动docker
systemctl enable docker

查看版本号
docker version

2.2、docker-compose安装

安装：
curl -L "https://github.com/docker/compose/releases/download/v2.12.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

分配权限
chmod +x /usr/local/bin/docker-compose

查看版本
docker-compose --version

2.3、Jenkins安装

创建docker-compose.yaml文件

version: "3"

services:
  jenkins:
    container_name: jenkins
    image: jenkins/jenkins:lts
    user: root
    privileged: true
    restart: always
    ports:
      - 8082:8080
      - 50000:50000
    volumes:
      - ./jenkins-data:/var/jenkins_home
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker
      - /usr/lib/x86_64-linux-gnu/libltdl.so.7:/usr/lib/x86_64-linux-gnu/libltdl.so.7
    networks:
      jenkins-network:
        ipv4_address: 192.168.24.3

networks:
  jenkins-network:
    driver: bridge
    ipam:
      config:
        - subnet: 192.168.24.0/24
    name: jenkins-network

创建好docker-compose.yaml文件后，放到指定目录下，然后进入指定目录执行docker-compose up -d命令，-d：表示在后台运行docker容器，待容器成功启动就可以访问Jenkins，访问：http://ip:port/
如：http://192.168.99.226:8082/

初次访问界面

安装Jenkins的提示的目录下找到密钥，然后复制到此处

选择安装推荐的插件，选后会自动安装相关的插件，之后等待安装完成即可。

按提示创建管理员账号、密码

管理员账号创建好，即可登录Jenkins，成功登录后Jenkins也安装完成。

3、创建Vue自动化部署任务

在创建任务前我们需要安装两个插件，分别是nodejs plugin和Publish Over SSH这两个插件

3.1、nodejs全局配置

点击Global Tool Configuration，进去后找到nodejs

点击nodejs安装

3.2、Publish Over SSH配置远程服务器

在Configure System中找到Publish over SSH

在上图中并没有看到用户密码设置，别急，点击高级，勾选Use password authentication, or use a different key，想要访问到远程服务器有两种方式，第一种方式是使用密码，第二种使用密钥；这里使用的是第一种方式。

3.3、创建任务

3.4、任务配置

任务创建好后，需要配置git、远程服务器等相关配置

3.4.1、配置git

如果没有选择仓库账号和密码，会提示无权限访问仓库地址，点击添加，可设置仓库账号米。

3.4.2、构建环境配置

下图是关于MyNpmrcConfig文件配置方法，点击Manage files

点击add a new config，找到npm的配置选项，选中后点击下一步

下一步进去，进行配置即可。我这里是配置了阿里云npm镜像
registry = https://registry.npm.taobao.org

配置好后，点击提交。

3.4.3、Build Steps配置

Build Steps主要讲目标文件推送到远程服务器相关的配置

上述配置好后就开始可以进行构建项目。

3.4.5、立即构建

测试拉去项目，提示Finished: SUCCESS说明拉取成功。

进入jenkins工作目录可以看到拉取下来的项目，如图：

测试执行npm install

配置好后执行立即构建

构建成功后，查看是否有node_modules

测试执行npm run build

rm -rf ./dist
npm run build
tar -zcvf ./sh-vue.tar.gz ./dist

到此整个项目的自动化构建完成，执行立即构建即可。