Jenkins自动化远程部署(vue-github)

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

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

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

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

一，部署流程思路

1，名词解释

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，流程图解

二，部署流程

1，A服务器安装Jenkins

前往官网安装即可

2，Jenkins所需安装的插件

Publish over SSH 连接远程服务器

NodeJS Plugin 打包vue项目

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

注：Node JS Plugin 同理安装即可

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

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

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

Passphrase: 账号密码

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

Hostname：服务器地址

Username：账号

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

2.2 配置Node js版本

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

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

3，开始新建部署任务

3.1 新建任务

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

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

3.3，配置构建环境

3.4，配置构建命令

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

也可以使用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，配置构建后操作