Bootstrap

使用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 pluginPublish 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

在这里插入图片描述
在这里插入图片描述
到此整个项目的自动化构建完成,执行立即构建即可。
在这里插入图片描述
在这里插入图片描述

;