近些年前端发展迅速，前后分离已经是一个大趋势。随着前端项目的愈加庞大，其自动化也极其重要的一环。不仅仅是通过webpack实现的自动化构建，当项目提交的时候，同时也要实现其自动化的部署、发布工作。

   接下来我就讲一讲通过gitlab-ci实现前端自动化部署的各个环节的配置。

期望的效果

    在我们本地向origin提交代码的时候，git仓库可以监听到这一次提交，并自动将这份push的代码clone到服务器上、执行相关依赖的安装、打包、文件拷贝等操作。实现：提交代码后，自动将代码拷贝、发布到服务器上。

 

将要使用的工具

gitlab-ci

持续集成：是一种软件开发实践，即团队开发成员经常集成它们的工作，集成每天可能会发生若干次。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

gitlab-ci 即 gitlab提供的持续集成的功能。

webhooks

webhooks可以监听gitlab上执行的很多操作，可以在gitlab的setting->integrations中设置。如图，这里选中了Push events，可以监听到代码push到gitlab的事件。

gitlab-runner

    gitlab-runner即项目自动化的运行者（驱动），它可以执行一个 .gitlab-ci.yml（YAML文件）的文件，这个 .gitlab-ci.yml 文件又指定了webhooks监听到事件后要执行的操作、脚本，由脚本再执行进一步的操作，从而实现自动化。

    .gitlab-ci.yml

具体的语法可以参考-官方文档。

    其.gitlab-ci.yml 文件的格式大致如下：

 

配置流程

1.开启webhook的trigger，使其可以监听push事件

2.部署服务器环境

    我这边采用的是linux系统的服务器，先把后续操作可能用到的软件和包都提前安装好，这样跑脚本的时候才会顺利进行。

3.下载git并配置ssh key公钥

使用yum下载git：

[code]yum -y install git

配置ssh key公钥

    配置ssh公钥是为了在服务器自动获取gitlab上的代码时，可以免输入密码，用https的方式clone的话要手动输入账号密码，这样实现不了想要的自动化效果。

查看有无.ssh文件:

[code]ls -al ~/.ssh

执行以下命令：

[code]  cd ~/.ssh/    （如果没有对应的文件夹，则执行  mkdir  ./.ssh）
  git config --global user.name "san.zhang"
  git config --global user.email "san.zhang@demo.com"
  ssh-keygen -t rsa -C "san.zhang@demo.com"

三次回车之后，会在 root/.ssh 目录下生成 id_rsa  、 id_rsa.pub 两个文件

用 cat id_rsa.pub 指令查看该文件 并复制出文件中的ssh公钥，粘贴到gitlab的SSH Keys 中，添加此公钥，即可完成配置。

添加完成之后，我们直接在linux服务器上直接使用git clone  [SSH url] 指令，来测试刚刚配置的ssh公钥是否有效。

若出现类似错误：

    The authenticity of host 'gitlab.xxx.net (192.168.1.41)' can't be established.

解决方法：

1）使用ssh连接远程主机时加上“-o StrictHostKeyChecking=no”的选项，如下：

[code] ssh  -o StrictHostKeyChecking=no  192.168.xxx.xxx     // 这里写的是本机地址

2）一个彻底去掉这个提示的方法是，修改/etc/ssh/ssh_config文件（或$HOME/.ssh/config）中的配置，添加如下两行配置：

[code]StrictHostKeyChecking no
UserKnownHostsFile /dev/null

4.安装node.js（当前最新8.12.0）和yarn

首先下载node.js我们要借助wget，它是Linux系统下载文件的工具，具有非常强的稳定性

[code]yum -y install wget

使用wget安装node.js

[code]// 下载
wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.gz

// 解压
tar -zxvf node-v8.12.0-linux-x64.tar.gz

// 全局配置：（设置软链接）

// 注意：这里的 /home/node/ 是node解压出来的文件所在的路径。

ln -s /home/node/node-v8.12.0-linux-x64/bin/npm /usr/local/bin/npm

ln -s /home/node/node-v8.12.0-linux-x64/bin/node /usr/local/bin/node

（若建立了软连接后发现npm和node指令都无法使用，可尝试先用sudo chmod -R 777修改node文件夹权限）

安装yarn ，其目的是 能快速稳定地安装项目依赖——node_modules

[code]// 通过 RPM 包仓库安装 Yarn
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn

// yarn -v 查看yarn版本

注意：yarn的官方文档其中有一步是这样描述的：

如果你没有安装 Node.js，你也应该配置 NodeSource 仓库：

[code]curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -

    这里已经安装了node的话，就不要执行此操作了，否则可能会修改gitlab-runner使用的node版本。

    如果发现gitlab-runner自动发布时执行的node脚本的版本和在服务器上通过node -v看到的不一样，可能就是该原因导致的，这时可以通过指定node运行的环境变量来修改。

    若通过 sudo yum install yarn 安装yarn报以下错：

    

    可以执行以下步骤来解决：

[code]sudo yum install epel-release
sudo yum install nodejs
sudo yum install yarn

 

5.安装Gitlab Runner

-- 移除旧版本仓库：

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

-- 添加 GitLab's 官方仓库:

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

-- 下载最新版 GitLab Runner：

[code]sudo yum install gitlab-runner

-- 安装 GitLab Runner 的特定版本:

[code]yum list gitlab-runner --showduplicates | sort -r sudo yum install gitlab-runner-10.0.0-1

   gitlab-runner运行的过程中，报错ERROR: preparation failed时，可能就是gitlab-runner版本有误，所以尽量下载最新的、或者合适版本的gitlab-runner

6.注册gitlab-runner

安装好了gitlab-runner，还要进行注册，执行以下操作：

[code]// 注册 gitlab-runner
sudo gitlab-runner register

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

之后会为注册输入一系列信息：

Enter your GitLab instance URL:（填写GitLab的url）
Please enter the gitlab-ci coordinator URL (e.g. http://gitlab.com )

[code]// 注：URL和token可在gitlab项目的Setting->CI/CD->Runners Setting->Expand中查看
http://gitlab.example.com/

Enter the token you obtained to register the Runner:（填写GitLab的token信息）
Please enter the gitlab-ci token for this runner

[code]WgdB8849hjQwFAxxxxxx

Enter a description for the Runner, you can change this later in GitLab's UI:（runner的描述）
Please enter the gitlab-ci description for this runner

[code]my-runner

Enter the tags associated with the Runner, you can change this later in GitLab's UI:（runner的标签，用逗号分开）
Please enter the gitlab-ci tags for this runner (comma separated):

[code]// 多个tag使用英文逗号隔开
runner-tag,runner-tag2,runner-tagx

Enter the Runner executor: （runner的执行者）
Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:

[code]shell

（gitlab-runner的文件夹会在 ~/.local/bin 目录下）

注册完成后，将gitlab-runner文件夹的用户所属修改为gitlab-runner，这样gitlab-runner对其才会有执行权限。

[code]sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner

修改文件读写权限：

[code]sudo chmod -R 777 /home/gitlab-runner

权限不够会导致runner在执行的时候报错 permission denied，即不能对文件进行读写、编辑的操作  

注意：gitlab上clone下来的文件在linux环境中可能也会没有读写权限，进而也会报错 permission denied ，此时就要先把clone下来的项目执行 sudo chmod -R 777 /home/project_name ，使项目中的文件都可读写；再进行一个无关的修改，提交到远端分支，这样以后clone或者fetch下来的项目都是可读写的了。 

注册好之后如果在gitlab-ci的界面上看到runner的旁边不是绿点，而是黑色三角的感叹号，可以使用 gitlab-runner start 或者 gitlab-runner run 的指令来开启runner的service

7.编写要执行的shell脚本

接下来我们写脚本文件，因为我们采用的是linux系统，所以用的是shell文件。

shell 脚本要做的事情可以分为这些步骤：

    1. 从gitlab上git clone/fetch 项目资源；

    2.进入项目中，执行 yarn / npm install ，安装项目依赖

    3.执行npm run build 打包项目

    4.将打包好的dist文件放到服务器指定发布目录下

如果在发布后想要执行回滚的操作，可以在第4个步骤执行完成后将文件名按git的commit id 来重命名，并且每次都把这个文件再拷贝到一个单独的目录下存放；再建立软链接将项目链接到服务器的发布目录下。这样一来，每次提交的文件都会保存在一个地方，发布的版本就取决于软链接所指向的文件，要更改发布版本的话，只要手动修改一下软链接指向的重命名后的dist文件就可以了

    5.将之前clone下来的文件删除，避免文件越来越多占据过多内存，同时也方便下次clone

8.提交 .gitlab-ci.yml 文件

    在gitlab的CI/CD->Pipelines->点击Get start with Pipelines，可看到配置文档。文档告诉我们，在push到gitlab的项目的根目录中添加 .gitlab-ci.yml 文件，就可以开启pipelines。在pipelines中就可以看到我们gitlab监听到事件后执行.gitlab-ci.yml文件的过程，以及执行状态等。

    我们参考 #官方文档 的格式，在 .gitlab-ci.yml 文件写入要执行的步骤。

    其中在写job要执行的scripts时，就可以执行我们刚刚写好的shell脚本。我们在项目的与.gitlab-ci.yml文件的同级目录下创建一个 /ci 目录，用来存放要执行的.sh文件，这样就可以通过相对路径引入脚本 ，如：

[code]stages:
- deploy

deploy_develop:
stage: deploy
script:
- ci/deploy_develop.sh
only:
- develop

deploy_stage:
stage: deploy
script:
- ci/deploy_stage.sh
only:
- master

    保存后push到远程分支。

    此时我们再进入 CI/CD->Pipelines 中，可以看到gitlab的界面已经发生了变化：

   如果执行顺利的话，status列就会显示 passed 。

   点进去检查一下脚本是否也按预期的执行了，如果是的话，通过gitlab-ci实现的前端自动化部署/发布就大功告成了！

 

 

阅读更多