使用Jenkins自动部署vue项目

这篇具有很好参考价值的文章主要介绍了使用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自动部署vue项目,jenkins,jenkins,vue.js,docker
安装Jenkins的提示的目录下找到密钥，然后复制到此处

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

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

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

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

在创建任务前我们需要安装两个插件，分别是nodejs plugin和Publish Over SSH这两个插件
jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker

3.1、nodejs全局配置

jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
点击Global Tool Configuration，进去后找到nodejs

点击nodejs安装

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

jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
在Configure System中找到Publish over SSH

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

3.3、创建任务

jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker

3.4、任务配置

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

3.4.1、配置git

jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
如果没有选择仓库账号和密码，会提示无权限访问仓库地址，点击添加，可设置仓库账号米。

3.4.2、构建环境配置

jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
下图是关于MyNpmrcConfig文件配置方法，点击Manage files

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

下一步进去，进行配置即可。我这里是配置了阿里云npm镜像
registry = https://registry.npm.taobao.org
jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
配置好后，点击提交。

3.4.3、Build Steps配置

Build Steps主要讲目标文件推送到远程服务器相关的配置
jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker

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

3.4.5、立即构建

测试拉去项目，提示Finished: SUCCESS说明拉取成功。
jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
进入jenkins工作目录可以看到拉取下来的项目，如图：

测试执行npm install

配置好后执行立即构建
jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker
构建成功后，查看是否有node_modules

测试执行npm run build

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

jenkins自动部署vue项目,jenkins,jenkins,vue.js,docker

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

文章来源地址https://www.toymoban.com/news/detail-735039.html

到了这里，关于使用Jenkins自动部署vue项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Toy模板网