环境清单:

1,本机环境: Mac OSX

2,服务器环境:Centos7 ,nodejs,git

3,需要基础:一些基本服务器操作指令,git使用及了解gitlab平台基本使用

注:这里演示的都是基础能用的版本,实际生产肯定不能这么来的,根据大佬的建议一般来说这部署应该在docker环境配置,并且权限配置也很重要,而且runner机器和生产代码机器应该独立。

好了,前端自动部署,这个听起来如此高大上的东西是啥叻,我们为什么需要呢,对于众javaer来说jenkins肯定是不陌生的,这个原理颇为相似,但配置起来却简单的多(那不然我就写不了这个文章了),我们目前希望能够实现:

本地代码推到master => 触发钩子服务器自动执行脚本 => 拉代码,自动装依赖,打包,编译,上线

好了,确保你拥有环境清单里面的2,3,当然没有也没关系,又不是不能慢慢学......

1,第一步准备你的服务器公钥

如果你有的话它应该在 ~/.ssh目录下的id_rsa.pub,没有的话你可以创建一个

ssh-keygen -t rsa -C "youremail@example.com"

然后去gitlab setting的ssh key那里添加一下,这里是为了方便服务端去拉取git仓库代码,也是我们搞事情的关键。

2,在服务端安装gitlab runner

移除旧版本仓库(如果你之前搞过这个,如果没有,这步可以忽略):

sudo rm /etc/yum.repos.d/runner_gitlab-ci-multi-runner.repo

添加 GitLab's 官方仓库:

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

下载最新版 GitLab Runner:

sudo yum install gitlab-runner

3,注册runner

我们需要在这里和gitlab建立连接,命令行敲入

sudo gitlab-runner register 
// 注册 gitlab-ci-multi-runner
sudo gitlab-ci-multi-runner register

出来一系列对话如下

# 填写gitlab ci地址(见图1)

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )

我这里用的是gitlab的库当然就是https://gitlab.com/啦,参数可看图1

------------------------------------------------------------

输入您获得的注册Runner的令牌:(见图1)

Please enter the gitlab-ci token for this runner

token,图一的位置有

------------------------------------------------------------

# 输入Runner的描述,你可以稍后在GitLab的UI中进行更改:

Please enter the gitlab-ci description for this runner[hostame]

my-runner (如果不是实际生产,随便写,只是标识作用)

------------------------------------------------------------

# 输入与Runner关联的标签,稍后可以在GitLab的UI中进行更改:

Please enter the gitlab-ci tagsforthisrunner (comma separated):

xxx(这里不填也行)

------------------------------------------------------------

选择Runner是否应该选择没有标签的作业,可以稍后在GitLab的UI中进行更改(默认为false):

Whether to run untagged jobs [true/false]:

[false]:true (暂时自己玩的话,可以直接空格调过)

------------------------------------------------------------

选择是否将Runner锁定到当前项目,稍后可以在GitLab的UI中进行更改。

Runner特定时有用(默认为true):

Whether to lock Runner to current project [true/false]:

[true]:true (暂时自己玩的话/不知道干啥用的,可以直接空格调过)

------------------------------------------------------------

# 输入Runner执行者:Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell

shell(这里我们用较简单的shell命令来玩先)

步骤1,2信息可在gitalb -setting -ci(见图1)里面找到相关信息

图1

完成注册后我们的gitlab runner应该会被安排在/home/gitlab-runner 目录,至少我的是这样的。随后我们需要给gitlab-runner文件夹赋予权限,否则很有可能在跑runner的时候报permission denied,操作如下

sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner
sudo chmod -R 777 /home/gitlab-runner

注意这里有个坑:远端拉下来的代码文件很可能在linxu下没有执行权限,我们可能会遇到permission denied的情况,这时候需要手动加权限 sudo chmod -R 777 /project_name ,然后使项目中的文件都可读写;再进行一个无关的修改,提交到远端分支,这样以后clone或者fetch下来的项目都是可读写的了。

一顿操作之后如果发现gitlab setting runner左边(例图2)这里有一个绿点证明我们刚刚挂载成功了,如果是红点和黑点,可能需要手动启动runner一下

sudo gitlab-ci-multi-runner start

图2

4,编写一个简单shell脚本去操作我们的前端文件

因为我极少接触shell,所以这里也是参考其他大佬的简单写法,因为我的前端文件在/www/wwwroot/下,所以这里执行的操作就是去这个目录自动拉代码并且编译,然后把这个文件放到/usr/local/bin/ ,放这里只是方便全局执行,其实也可能用其它方式去调用,任君选择,注意这玩意没后缀。

注:这里只是简单演示其基本原理,作为实际生产的ci,我们其实应该编译目录和线上目录是分开的,专门有一份文件进行这些拉/装/编/合的操作,最后进行替换才能减少用户被影响的时间,如果真的像如下这样搞,那用户等编译白屏这个过程2,3分钟,岂不日了狗。

deploy

# echo "更新代码...."

cd /root/../www/wwwroot/项目目录/

git pull

# build

echo "正在构建..."

npm install

npm run build

echo "构建成功...."

5,我们还需要一份.gitlab-ci.yml(这是建立连接的关键)

我们的项目一级目录添加一个.gitlab-ci.yml,里面内容大概就是我们runner定义的,意思是在我们master分支有变动时,触发钩子自动执行deploy脚本

https://gitlab.com/szdubinbin1/tryci/blob/master/.gitlab-ci.yml

stages:

  - deploy

deploy:

    stage: deploy

    script:

      - deploy

    only:

      - master

    tags:

      - my-runner

最后,测试一下

当我们的master代码发生变化(因为我懒,所以我用的是create-react-app脚手架做的测试),gitlab项目的ci/cd这里就可以看到我们执行的runner(图3)

图3

passed就是成功了,当然,光看这里是不行的,如果拉取git代码失败,它还是提示passed,原因猜测可能是它监测到shell脚本跑完就觉得ok的,这里还需要看一下jobs

我们可以发现在jobs(图4)它会反馈我们整个shell脚本、包括拉代码/装依赖/编译打包的过程,如果如下,具体项目可能不同,我这个是react,理论上vue打包成功也差不多这样,这时候我们刷新自己的项目地址就会发现修改生效了。

图4

1,跑脚本的时候,npm install可能会说权限不够,这时候只能去修改项目目录的权限

2,跑脚本的时候,git说没有ssh key,原因是我们刚开始添加的是root的ssh key ,gitlab runner可能用不了,解决方案:切到gitlab runner用户去添加一个ssh key

命令:su gitlab-runner => 添加ssh key

因为公司使用这个方案,不过当然比我这个高级的太多,我们重在实践了解一下前端自动化部署的大概流程,说不定哪天这玩意真的需要我们自己搭呢?折腾了这玩意一天,有一些莫名其妙的坑,不过好在都算解决了,真的感觉这玩意太高效率了,以后自己做项目就不用去服务器拉代码了。

preView