前言

前端自动化算是一个老生常谈的问题?那么什么是自动化呢?通俗来说自动化是想让开发者可以专注于开发,剩下的构建与部署可以形成一套流程和规范,不需要我们去关心这些问题.

从图上我们可以看到,这是一个比较清晰一套流程,本地开发->远程仓库->持续集成与部署->发布.这里我所列举的 Github, 码云,Gitlab都是仓库管理工具,当然Gitlab可以进行本地私有化部署,由我们自己区管理项目工程代码.但是Gitlab有个缺点就是服务器配置要求比较高,如果只是自己使用的话,一年的服务器费用也是一笔不小的开支.

CI/CD工具里我列举了Github Action, Travis, Jenkins.这里Jenkins与Gitlab都是私有化部署工具.因此很多公司都会部署这一套自动化工具集合.本文主要针对我们个人使用.因此,我仓库则会选择Github,CI/CD选择Jenkins.运行环境我们通过Nginx运行.其实你选择哪个作为你的工具这一点不重要,看你的需求和喜好.

准备

一个云服务器
Centos 7.6

开始

安装Jenkins

安装Docker

这里如果有小伙伴不了解Docker的话可以看我这篇文章一步一步从0到1掌握Docker

// 安装
curl -fsSL get.docker.com -o get-docker.sh
sh get-docker.sh
// 启动Docker服务
systemctl start docker
// 开机默认启动
systemctl enable docker

试试docker ps有没有显示信息

Ok, Docker服务安装完毕~😝

安装Jenkins

安装说明: github.com/jenkinsci/d…

通过一行命令

docker run -d -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home --name jenkins jenkins/jenkins:lts-jdk11

或者通过docker-compose.yml

version: '3'
services:
  jenkins: # 服务名称
    container_name: 'jenkins' # 镜像名称
    image: jenkins/jenkins:lts # 镜像
    restart: always # 每次重启Linux都会重启这个服务
    user: jenkins:root  # 指定用户
    ports:
      - "8080:8080"
      - "50000:50000"
      - "10051:10051"
    volumes:
      - /home/jenkins/data:/var/jenkins_home
      - /usr/bin/docker:/usr/bin/docker
      - /var/run/docker.sock:/var/run/docker.sock

然后我们再通过docker ps查看一下容器

可以看到Jenkins正在运行,此时我们查看一下日志,找到初始化Jenkins时的密码

下面我们就可以访问我们的Jenkins,输入IP:8080

点击安装推荐的插件

下一步就输入我们自己的账号密码相关信息以及根地址,根地址默认就可以

大功告成! 安装好了👏🏻👏🏻👏🏻

配置Jenkins插件源

首先,先修改一下Jenkins的插件源为国内,复制这个链接https://mirrors4.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

Manage Jenkins -> Manage Plugins

将Advance(高级)下的Update Site(升级站点)修改为国内源,点击Submit(提交)

安装插件也很简单,在插件管理中搜索你想要的插件就可以进行安装了,我们是通过Github作为我们的代码托管平台,Github插件已经在Jenkins中内置了

至此,基本的安装及配置相关工作全部完成

配置SSH

配置SSH的目的是为了让Jenkins可以去免密拉取我们Github的项目,当我们执行Jenkins的构建任务时,免去输入账号密码的麻烦

生成公私钥

我们可以在本地生成一个公私钥,私钥保存在Jenkins,公钥保存在Github

ssh-keygen -t rsa -C name@email.com

输入一个保存的路径,后面的密码默认回车不填

可以看到ssh_rsa私钥与ssh_rsa.pub公钥文件

配置Github公钥

Settings -> SSH and GPG keys -> New SSH key

复制ssh_rsa.pub公钥信息

点击Add SSH key,Github的公钥就配置成功了

配置Jenkins私钥

Manage Jenkins -> Manage Credentials -> 全局 -> 添加凭据

这里类型要选择SSH Username with private key,描述与Username可以任意填写,点击Private Key添加你的私钥,私钥在你的ssh_rsa这个文件

复制整个文件的私钥,点击确定,Jenkins也配置完成了.至此,Jenkins就可以拉取Github的仓库代码了

构建

下面就可以尝试新建一个任务来构建试试看了,首先我们先新建一个github仓库,这里就不多做赘述,我这里新建的是一个React项目

新建任务

新建item -> 输入任务名称 -> Freestyle project -> 确定

Git -> 输入远程仓库地址 -> 选择创建过的凭证 -> 设置为master分支 -> 保存

然后我们就可以在首页构建测试一下

点击任务名称查看构建历史

如果是SUCCESS,说明我们的配置是没有问题的

打包项目

打包之前,我们要安装插件

Node
Publish over ssh

系统管理 -> 插件管理 -> 可选插件 -> 安装上述插件(Install without restart) -> 点击安装完成后重启Jenkins(空闲时)

安装好插件后,配置Node插件

系统管理 -> 全局工具配置 -> Node.js

选择一个自己的版本,然后保存

进入自己的构建任务中,在构建环境勾选Node

在构建选择Shell

echo "start build...."
npm install
npm run build
cd dist
tar zcvf dist.tar.gz ./*

可以构建一下,看看是否运行成功

配置nginx

现在就是将文件放到服务器指定路径了,如果你打算你的Jenkins和Nginx在同一个服务器上的话,可以直接在当前服务器安装Nginx

yum install nginx
systemctl enable nginx
systemctl start nginx

添加一个nginx配置

// /etc/nginx/conf.d/react.xxx.com.conf

server {
    listen 80;
        server_name react.xxx.com;

        location / {
                root /usr/share/nginx/html/react;
                index index.html;
        }
}

重新加载nginx配置

nginx -s reload

发布到服务器

现在,我们所打包的文件还在Jenkins容器中,我们需要将打包好的文件发送给服务器

配置publish over ssh插件

系统管理 -> 系统配置 -> Publish over ssh -> SSH Servers

输入Hostname(ip)和name账户名称,点击高级勾选使用密码

点击Test Configuration 测试一下

重新打开项目的任务配置,找到构建后操作

Source files: 发送的文件,相对目录是项目根目录,不能填写绝对路径
Remove prefix: 要去掉的前缀
Remote directory: 远端的服务器目录
Exec command: 发送文件后运行的脚本

由于我是root,因此跟目录为/root,可根据自己的配置需要修改以下脚本

cd ~
mv ./dist.tar.gz /usr/share/nginx/html/react
cd /usr/share/nginx/html/react
tar zxvf dist.tar.gz
rm -rf dist.tar.gz

保存配置信息,下面,我们点击构建

Perfect! 大功告成!

自动构建

但是,我们还差了一步,就是我们希望我们推送到Github后,就可以自动执行构建操作

在构建触发器勾选GitHub hook trigger for GITScm polling

设置Github的hook

Settings -> Webhooks -> Add webhook

Payload URL: 你的Jenkins url地址 + /github-webhook/

保存后就可以尝试修改以下代码内容,push到远程仓库,Jenkins就会自动启动构建操作了

这就是我通过Jenkins来自动化构建前端项目的全流程了,如有错误,欢迎留言我们一起学习进步~

Jenkins + Github + Nginx 实现前端自动化

前言

准备

开始

安装Jenkins

安装Docker

安装Jenkins

配置Jenkins插件源

配置SSH

生成公私钥

配置Github公钥

配置Jenkins私钥

构建

新建任务

打包项目

配置nginx

发布到服务器

自动构建