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

Bomb
3,425 阅读3分钟

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

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

Jenkins

概念

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

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

为什么要学

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

前置任务

  • centOs 服务器
  • git、 linux、shell 基础就行。
  • 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"

使用 chown给 jenkins 指定所有权

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 就安装完毕了，点击开始使用。

新建任务

构建触发器，就是监听 github 的 webhook，如有新的 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 文件。

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

avatar
文章
阅读
粉丝