注:网上很多教程都是使用GitHub hook trigger进行自动部署的,这种提交代码后自动部署方式不太严谨,如下:

1,有时提交代码并不想去部署程序

2,团队成员都提交代码后,合并到一起后,需要先确保整体代码兼容性可靠,流程没问题,然后由固定的人员去手动部署上线

3,所以本文是使用手动点击,自动部署到远程服务器的

 

一,部署流程思路

1,名词解释

A服务器:安装Jenkins的服务器(本机或者服务器)

docker volume create jenkins-data
docker run --name jenkins-production \
           --detach \
           -p 50000:50000 \
           -p 8080:8080 \
           -v jenkins-data:/var/jenkins_home \
           jenkins/jenkins:2.107.3

注:如果后续更新Jenkins,可以重新更新镜像,然后使用上面命令重新执行新镜像版本

如下:

docker stop jenkins-production
docker rm jenkins-production # just temporarily docker rename it instead if that makes you worried
docker run --name jenkins-production \
           --detach \
           -p 50000:50000 \
           -p 8080:8080 \
           -v jenkins-data:/var/jenkins_home \
           jenkins/jenkins:2.121.3

  

  

Git服务器:Github网站(Git服务器或svn等其他均可)

B服务器:应用服务器,并已安装nginx

2,流程图解

Jenkins 与远程 windows 建立联系 jenkins 远程部署_远程服务器

 

 二,部署流程

1,A服务器安装Jenkins

前往官网安装即可

2,Jenkins所需安装的插件

Publish over SSH 连接远程服务器

NodeJS Plugin 打包vue项目

安装操作路径:系统管理>插件管理>可选插件,然后输入要安装的插件名称搜索,然后选择并直接安装,重启后即可

注:Node JS Plugin 同理安装即可

Jenkins 与远程 windows 建立联系 jenkins 远程部署_docker_02

  

2.1 配置远程服务器信息Publish over SSH

操作路径:系统管理>系统配置>Publish over SSH

配置B应用服务器的SSH登录账户、密码等信息

Passphrase: 账号密码

Name: 服务器名称,可随意写

Hostname:服务器地址

Username:账号

Remote Directory: 要远程部署的应用服务器目录,nginx下的访问目录

Jenkins 与远程 windows 建立联系 jenkins 远程部署_服务器_03

2.2 配置Node js版本

操作路径:系统管理>全局工具配置>NodeJS

版本号最好选择大于11,且小于17的

Jenkins 与远程 windows 建立联系 jenkins 远程部署_远程服务器_04

 3,开始新建部署任务

 3.1 新建任务

Jenkins 与远程 windows 建立联系 jenkins 远程部署_远程服务器_05

 

 

 

 3.2 进入任务的配置页面,配置Git账号信息

输入Git项目地址,然后点击添加,输入github账号、密码即可,默认分支为master,可自己选择

Jenkins 与远程 windows 建立联系 jenkins 远程部署_docker_06

 3.3,配置构建环境

Jenkins 与远程 windows 建立联系 jenkins 远程部署_docker_07

 3.4,配置构建命令

Jenkins 与远程 windows 建立联系 jenkins 远程部署_服务器_08

注:education为vue打包后的输出项目名(vue.config.js里面的outputDir),默认是dist,可根据情况修改

Jenkins 与远程 windows 建立联系 jenkins 远程部署_服务器_09

也可以使用cnpm安装:

pwd
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
npm run build
rm -rf education.tar.gz
tar -zcvf education.tar.gz short-video

  

 3.5,配置构建后操作

Jenkins 与远程 windows 建立联系 jenkins 远程部署_远程服务器_10

 

 

Name:选择之前已经配置好的SSH server

Source files:已打包好的部署文件包

Remove prefix:移除无用的目录

Remote directory:要上传远程服务器上的目录地址,前面会自动加上2.1已配置的Remote directory目录,列如:/var/www/html/

Exec command:在远程服务器上的执行命令,用于解压部署包、执行项目命令等

Jenkins 与远程 windows 建立联系 jenkins 远程部署_服务器_11

 3.7,点击应用、保存按钮,然后开始开始点击:立即构建 吧

 3.7.1,因github为国外网站,构建时会偶尔很慢,或者构建失败,忽略重试即可

 3.7.2,如下图,传输1 files已完成,表示构建成功,如果显示0files,则构建命令目录没有配置正常,修改尝试即可

Jenkins 与远程 windows 建立联系 jenkins 远程部署_服务器_12

到此已经成功了!