关于git:纯-Git-实现前端-CICD

39次阅读

共计 2793 个字符，预计需要花费 7 分钟才能阅读完成。

原文地址：纯 Git 实现前端 CI/CD

最近要把前端 react 我的项目部署到公有服务器上，钻研了好几种继续部署计划，这里简略形容一下。

总的部署思路分两种：

1. 编译后的文件部署

编译后的文件部署，就是先在本地进行 npm run build 打包，生成 build 文件夹，而后将 build 文件夹传到服务器，再用 Nginx 配置一个动态解析即可。
这种计划用 rsync 间接上传就能够，这里不赘述。

2. 源码部署
源码部署就是把源文件上传到服务器上，而后：

$ npm install && npm run build

这种形式是将打包工作交给服务器（或其余构建工具），本地只是将源代码 push 下来，git 监听到推送而后主动开始构建。这是当初风行的形式，大多数继续集成工具都是这么干的。
明天的重头戏来了！咱们不借助其余构建工具，只用纯 Git 实现监听 push 并主动构建。置信我，这一步十分乏味~

首先筹备一台服务器，而后装置好 node、git 和 nginx，开始入手。

服务器信息如下：
host：192.168.0.1（假的）
我的项目目录：/home/react-test
创立裸仓库
登入服务器，在服务器的 /opt 目录下创立一个裸仓库
什么是裸仓库？裸仓库就是没有工作目录的仓库，说白了就是你的我的项目目录下的 .git 文件夹
执行命令创立：

$ cd /opt
$ git init --bare react-test.git

创立好后，会生成 react-test.git 文件夹，所以咱们的裸仓库地位是 /opt/react-test.git，记住这里前面会用到。
接下来，进入 react-test.git 文件夹，发现外面有个 hook 文件夹。这个文件夹可不得了，是放 Git“钩子”的中央。
所谓“钩子”，其实就是一个 shell 文件。在执行 git 操作（如：push，pull）时触发执行。
当初咱们创立一个钩子。
增加 push 钩子
在 hook 目录下新建 post-receive 文件，这个钩子文件会在代码 push 到这个裸仓库后执行，这里是本文最重要的重点。

$ cd /opt/react-test.git/hook
$ vim post-receive

post-receive 的具体内容如下：

#!/bin/bash
echo 'server: received code push...'
cd /home/react-test

echo 'server: checkout latest code from git...'

git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release

echo 'server: running npm install...'

npm install \
&& echo 'server: buildding...' \
&& npm run build \
&& echo 'server: done...'

这个脚本最重要的就一条命令：

git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release

``````

什么意思呢？首先说下咱们平时怎么用 git。个别咱们是在我的项目目录下用 git init 初始化 git 仓库。执行的 add，commit 等操作，默认就是与这个仓库交换文件。这里有两个重要概念：我的项目目录 和 git 仓库。我的项目目录就是 package.json 文件所在的目录，咱们的代码放在这里。git 仓库是我的项目目录下的 .git 文件夹，它是个暗藏目录，在 npm init 时主动生成。那么，有没有方法在以后我的项目目录下，应用其它目录的 git 仓库呢？是能够的，--git-dir 参数就容许你指定一个其余的 git 仓库。比如说，我要将 /home/react-test 下批改的文件增加到暂存区：

$ git add .

$ git –git-dir /home/git-test/.git add .


既然我的项目目录能够指定其它的 git 仓库，那么 git 仓库可不可以指定其它的我的项目目录呢？当然也能够，--work-tree 参数就容许你指定其余的我的项目目录。比如说，我要在 /home/react-test 下检出分支：

$ git checkout dev-test

$ git –work-tree /home/git-test/.git checkout dev-test


神奇吧，哈哈。这样就把我的项目和仓库离开了。了解到这，再看下面那条命令的意思：将 /opt/react-test.git 这个 git 仓库的 release 分支，检出（checkout）到我的项目目录 /home/react-test，从而更新了我的项目目录的代码。检出新代码之后，运行打包命令，更新部署文件夹，这样部署就实现了。nginx 解析
上一步，部署实现，并打包了 build 文件夹。这个文件夹就是要部署的文件夹。最初一步，则是配置一个域名，解析到这个文件夹。

$ cd /etc/nginx/conf.d
$ vim react-test.conf


在 react-test.conf 文件中写上如下配置：

server {

listen 80;
server_name yourhost; # 如 www.baidu.com
root /home/react-test/build; # 指向打包后的目录

location / {index index.html;}

}


保留并退出后，nginx -s reload，这样解析就配好了！至此，服务器端的打包，部署，解析流程就全副实现了。上面就是承受本地代码的推送，而后主动触发这个流程。客户端
后面在服务器建好了 git 裸仓库 react-test.git，回到客户端只须要做一件事：将代码推到这个裸仓库。推送代码
第一步，咱们先在本地我的项目下，将这个裸仓库增加为近程仓库。

$ git remote add prod ssh://root@198.234.456.8/opt/react-test.git


第二步，咱们间接将代码推送到这个近程仓库：

$ git checkout -b release
$ git push prod release


这里必须要切换到 release 分支再推送。因为在近程仓库钩子中，咱们定义的是检出 release 分支，所以要推送的是 release 分支。这里可能会要求你输出服务器明码，能够配置 ssh 免密登录 来间接推送，这里不介绍。推送后，会在控制台看到咱们在 post-receive 中写好的输入。当推送实现，查看服务器下的 /home/react-test 目录，会看到源文件和打包后的 build 文件
到这里，CI/CD 工作曾经全副实现。

正文完