纯 Git 实现前端 CI/CD
作者：杨成功
来源：SegmentFault 思否社区
最近要高效的把前端 react 项目部署到私有服务器上，研究了好几种持续部署方案，这里简单描述一下。
总的部署思路分两种：
编译后的文件部署 源码部署
npm run build打包，生成 build 文件夹，然后将 build 文件夹传到服务器，再用 Nginx 配置一个静态解析即可。$ npm install && npm run build
服务端
node git nginx，开始动手。创建裸仓库
.git 文件夹$ cd /opt
$ git init --bare react-test.git
/opt/react-test.git，记住这里后面会用到。hook 文件夹。这个文件夹可不得了，是放 Git “钩子” 的地方。添加 push 钩子
post-receive 文件，这个钩子文件会在代码 push 到这个裸仓库后执行，这里是本文最重要的重点。$ cd /opt/react-test.git/hook
$ vim 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 init 初始化 git 仓库。执行的 add，commit 等操作，默认就是与这个仓库交换文件。项目目录 和 git 仓库。项目目录就是 package.json 文件所在的目录，我们的代码放在这里。git 仓库是项目目录下的 .git 文件夹，它是个隐藏目录，在 npm init 时自动生成。--git-dir 参数就允许你指定一个其他的 git 仓库。/home/react-test 下修改的文件添加到暂存区：# 默认加到 /home/react-test/.git
$ git add .
# 加到 /home/git-test/.git
$ git --git-dir /home/git-test/.git add .
--work-tree参数就允许你指定其他的项目目录。/home/react-test 下检出分支：# 默认从 /home/react-test/.git 检出
$ git checkout dev-test
# 从 /home/git-test/.git 检出
$ git --work-tree /home/git-test/.git checkout dev-test
/opt/react-test.git 这个 git 仓库的 release 分支，检出（checkout）到项目目录 /home/react-test，从而更新了项目目录的代码。nginx 解析
$ cd /etc/nginx/conf.d
$ vim react-test.conf
server {
listen 80;
server_name yourhost; # 如 www.baidu.com
root /home/react-test/build; # 指向打包后的目录
location / {
index index.html;
}
}
nginx -s reload，这样解析就配好了！客户端
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
post-receive 中写好的输出。当推送完成，查看服务器下的 /home/react-test 目录，会看到源文件和打包后的 build 文件
评论