阅读 1542

jenkins + github + nginx + vuecli 实现简单持续集成,自动打包部署。


本人微信 Gx3212333,不管吹水或交流都可以找我[呲牙]

如果过程中 有遇到任何问题,都可以互相交流。

也非常希望各位大佬能给予好的建议。


Jenkins

概念

  • Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部署软件。

  • Jenkins 支持各种运行方式,可通过系统包、Docker 或者通过一个独立的 Java 程序。

为什么要学

  • 公司在用
  • 稍微好一点的岗位职责像jenkins之类 (持续集成、自动部署) 的,基本都是多多少少是会提到的。
  • 传统的做法,在服务器初始一个 git 仓库,然后每次代码更新后,人工手动去拉去,次数多了也就烦了,而这些每次只需在项目开始前配置一遍 jenkins 减轻了很多人工操作的成本

前置任务

  • centOs 服务器
  • gitlinuxshell 基础就行。
  • nginx基本配置。

开篇准备

初始一个 vuecli 项目,访问如下

github 创建仓库

配置 github webhook

http://ip:8080/github-webhook/

目录

环境搭建

登录服务器

安装java依赖

yum install java
复制代码

使用 wget 添加jenkins源

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
复制代码

安装之后使用 yum 命令就能下载了。

yum install jenkins
复制代码

jenkins 修改权限 端口之类的,在该位置

vim /etc/sysconfig/jenkins
复制代码
  • JENKINS_PORT -> jenkins的启动端口,默认8080
  • JENKINS_USER -> jenkins 用户,修改为root
// 这里我将 JENKINS_USER 修改为 root 用户了。
JENKINS_USER="root"
复制代码

使用 chownjenkins 指定所有权

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
复制代码

启动 jenkins

service jenkins restart
复制代码

看到 ok 即可

访问jenkins

ip地址 + 8080
复制代码

首次访问是这样子的(官网图).

这张图红色圈起来的替换成你页面显示的

cat /val/jenkins_home/xxxx/xxx
复制代码

然后将显示的复制到 输入框后,点击下一步即可。

然后到安装插件页面

我这里是点击的 安装推荐插件 选项。

等待即可,有点漫长 loading...

创建用户

然后到这里 jenkins 就安装完毕了,点击开始使用。

新建任务

构建触发器,就是监听 githubwebhook,如有新的 push 后 重新构建。
此时保存即可

点击那个 w 列的🌞(太阳),这里是构建的描述, 如果构建失败的话,你可以根据这里的提示定位问题。

这里我当时蒙蔽了一下,我就在想构建后的文件去哪里了,我该怎么访问?

构建后的存放地址

cd /var/lib/jenkins/workspace
复制代码

此时我们在去修改一下配置信息中的 shell

node -v
npm -v
npm install
npm run build
复制代码

发现构建失败??

不过没关系

我们进入全局设置的插件管理

下载完后,我们去全局配置管理,发现对了 一个 NodeJs 选项。

啊 千辛万苦,终于看到 我们最爱的 dist 文件了,这里你的 shell 命令可以自动拓展,如移动到其他位置。

nginx

cd /etc/nginx/conf.d
vim test-jenkins.conf

server {
      listen 8000; # 监听端口
      server_name _;
      location / {
        # 这里我这里指向 jenkins 构建的目录,也可以在构建时的 shell 将文件移动要其他地方。
        root  /var/lib/jenkins/workspace/test-jenkins/dist;
        try_files $uri $uri/ index.html;
      }

      error_page 500 502 503 504 /50x.html;
      location = /50x.html {
        root /usr/share/nginx/html;
      }
}
复制代码

**然后打开就 ip:8000 就能访问了。

last

我们在本地 重新 push ,看下这个页面会不会变。

我们刷新页面如果发现 404 Not Found 不要方,npm run build 会先删除 dist 文件。

访问如下就说明我们基本配置全部完成了,