前言
在实际开发中，会根据不同的环境，选择不同的编译模式和项目配置（例如：请求的域名、压缩方式等）。当项目进行到测试阶段的时候，一天发版三四次根本不在话下。在我们思路清晰、精神高度集中的时候，突然被打断：xxx，帮我打个包发个版。要是一天来个三四次，在此情此景下，必须要吟诗一首：我有一句卧槽，不知当讲不当讲。。。毕竟大家都知道，进入状态是需要时间和精力的，万一刚刚顺畅的思路变得错综复杂那就不是一句“卧槽”能概况的了。
在工作中部署jenkins的最大好处就是每次在开发、测试环境部署代码，只需要相关的开发人员，测试人员登录jenkins构建需要部署的tag或者分支即可，降低重复劳动，提高工作效率。
本机操作环境macOS，服务器是aliyun centos7。
涉及的内容范围：jenkins、nginx、vue、github
一、配置java环境
这里我选择的是通过tar.gz压缩包的形式安装jdk，先将压缩包下载到本机解压，再通过命令行的形式上传至服务器。
根据自身需要下载对应的jdk（官网），我下载的jdk版本是：jdk-8u241-linux-x64.tar.gz
将文件上传至服务器，到目标目录下查看是否上传成功。
scp -vrC source（本地文件目录） root@xxx.xxx.xxx.xxx:target（服务器目录）
进入opt目录下，解压
tar -zxvf jdk-8u241-linux-x64.tar.gz
配置环境变量
vim ~/.bash_profile
#添加下面的PATH，路径根据自己的配置填写，即服务器上jdk所在的目录 target + '/bin:$PATH'
PATH="/opt/jdk1.8.0_231/bin:$PATH"
#保存退出后更新.bash_profile
source ~/.bash_profile
#查看环境变量，可以看到jdk的路径已经存在环境变量PATH里了
echo $PATH
#执行java命令，打印jdk版本信息，则配置成功
java -version
二、centos7安装jenkins
查看jenkins稳定版本
https://pkg.jenkins.io/redhat-stable/
下载依赖
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
导入秘钥
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
安装jenkins
yum install jenkins
修改jenkins用户为root、端口号（默认8080）
# 基础配置文件
vim /etc/sysconfig/jenkins
# 以下为补充配置（2022年后的安装的jenkins，单纯的修改JENKINS_USER似乎不生效，不生效的话可以尝试下方的配置）
# 查看运行环境的端口号
vim /usr/lib/systemd/system/jenkins.service
# 修改用户和组
User=root
Group=root
# 修改端口
Environment="JENKINS_PROT=8080"
# 重新加载配置文件
systemctl daemon-reload
配置jenkins的java路径
vim /etc/init.d/jenkins
启动jenkins，访问 http://IP:8080，如下图所示。
#启动jenkins
systemctl start jenkins.service
#暂停jenkins
systemctl stop jenkins.service
#设置jenkins开机启动
systemctl enable jenkins.service
#查看jenkins的状态
systemctl status jenkins.service
补充：jenkins默认端口为8080，确保服务器8080端口是打开的。如果还是未能打开可以检查一下是不是防火墙阻止了访问。
打开网页后，复制红色提示文件中的密码解锁jenkins。
下一步自定义jenkins，插件通过附加特性来扩展Jenkins以满足不同的需求。我选择的是安装推荐插件。
等待安装完成，创建管理用户并保存实例配置即可进入jenkins控制台啦。
到这一步，我们的jenkins基本安装完成啦。
三、获取github中的Personal access tokens
登录进入github，点击头像选择settings，选择左侧列表最下方的Developer settings。
选择Personal access tokens后，点击Generate new token进行配置。
点击Generate token生成Personal access tokens（注意：这里一定要保存好生成的token，否则刷新页面后就再也看不到了）
如果没有保存token或者需要修改配置，点击下图绿色区域进行修改，每次重新生成需要在jenkins配置的对应位置进行修改。
四、创建任务
进入jenkins工作台-系统管理，找到GitHub服务器，添加 “GitHub Server”。
点击添加后如下图弹窗，类型选择 “Secret text”，Secret对应刚刚在github中生成的 “Personal access tokens ”。描述根据个人理解填写即可~点击添加。
选择刚刚添加的凭据，点击连接测试按钮，按钮左侧出现如下图所示文字则表示配置成功。点击底部保存完成操作。
1. 新建任务
点击左侧新建任务，输入任务名称并选择 “构建一个自由风格的软件项目”，点击确定。
2. General
该部分根据自己的需要进行设置。
3. 源码管理
点击添加项目所在的github账号的账号名和密码。
4. 构建触发器
选择 “GitHub hook trigger for GITScm polling”。
5. 构建环境
选择 “Use secret text(s) or file(s)”。
6. 绑定
点击新增，选择 “Secret text”。凭据选择之前配置好的 “Personal access tokens ”。
7. 构建
#安装项目所需依赖
npm install
#删除工作区dist目录下所有的文件
rm -rf ./dist/*
#打包
npm run build
#删除服务器 “/root/hexh/vue-demo/dist” 目录下所有文件
rm -rf /root/hexh/vue-demo/dist/*
#将工作区编译后的dist文件下的内容复制到服务器 “/root/hexh/vue-demo/dist” 目录下
cp -rf ./dist/* /root/hexh/vue-demo/dist
五、配置github的webhook地址
webhook是通知jenkins时的请求地址，这样开发向github推送代码后，github就能够通过该地址通知到jenkins当前需要进行项目部署了。
进入本次构建用到的项目，在项目主页面点击右上角的Settings，再点击左侧Webhooks，然后点击Add webhook。如下图所示：
假设登录jenkins的地址是： xxx.xxx.xxx.xxx:8080
那么webhook地址就是： xxx.xxx.xxx.xxx:8080/github-webh…
点击Add webhook 完成添加。
六、测试
修改本次构建用到的项目的任意代码推到github，jenkins执行了构建。
在刚刚配置webhook的位置，可以看到刚刚github成功 “通知” 了jenkins。
在jenkins工作台左侧可以看到构建历史，点击刚刚执行的构建历史，查看控制台输出，可以看到shell命令执行成功。
服务器 “/root/hexh/vue-demo/dist” 目录下也看到了编译后的内容，到这里整个流程基本算是成功啦。
七、补充
如果服务器装的node版本过低，可能会导致vue项目编译的失败。可以通过以下方式对nodejs进行升级。
#删除nodejs
yum remove nodejs npm -y
#替换源
curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
#安装nodejs
yum install nodejs
#查看nodejs版本
node -v
配置nginx
想要查看详细的Nginx配置和介绍可以查看我的另一篇文章《Nginx基础知识入门，从零到一的实践》。
#安装nginx
yum install nginx
#启动nginx
systemctl start nginx.service
#停止nginx
systemctl stop nginx.service
#重启nginx
systemctl restart nginx.service
访问服务器外网IP地址，看看是否能正常打开网页
#打开nginx默认配置文件，修改服务器默认启动目录
vim /etc/nginx/conf.d/default.conf
此时再访问刚刚的IP地址，应该就可以看到我们刚刚部署的项目啦~
可能存在的问题：修改后的路径，需要具有访问权限才能通过外网IP正常打开。我这里直接设置了读写权限。
chmod -R 777 /root
macOS使用 homebrew 安装 jenkins，相关命令：
# 启动 jenkins
brew services start jenkins
# 停止jenkins
brew services stop jenkins
# 重启Jenkins
brew services restart jenkins
至此我们就实现了从开发到自动化部署的整个过程啦~
走过路过的各位小姐姐小哥哥留个赞吧，第一次写博客，文中若有错误或不足之处欢迎大家指出，谢谢~
今年看到的感触最深的一句话：学或不学，年龄只会增不会减。希望2020年以这篇博客为开始，不再虚度岁月，共勉。
