【git】真神操做，持续部署到私有服务器

概述

最近要高效的把前端 react 项目部署到私有服务器上，研究了好几种持续部署方案，这里简单描述一下。

总的部署思路分两种：

• 编译后的文件部署
• 源码部署

编译后的文件部署，就是先在本地进行npm run build打包，生成 build 文件夹，而后将 build 文件夹传到服务器，再用 Nginx 配置一个静态解析便可。

这种方案用 rsync 直接上传就能够，这里不赘述。

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

npm install && npm run build

这种方式是将打包工做交给服务器（或其余构建工具），本地只是将源代码 push 上去，git 监听到推送而后自动开始构建。这是如今流行的方式，大多数持续集成工具都是这么干的。

今天的重头戏来了！咱们不借助其余构建工具，只用纯 Git 实现监听 push 并自动构建。相信我，这一步很是好玩~

Git 构建

首先准备一台服务器，安装好 node git nginx，开始动手

服务器信息以下：

host：198.234.456.8（不用试，假的）
项目目录：/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 仓库（就是 .git 文件夹）。在执行 push，pull 等操做时，默认用的就是这个仓库。

那么，能不能用其它地方的 git 仓库呢？

固然能够，--git-dir参数就容许你指定一个其余的 git 仓库

既然项目目录能够指定其它的 git 仓库，那么 git 仓库可不能够指定其它的项目目录呢？

固然也能够，--work-tree参数就容许你指定其余的项目目录

神奇吧，哈哈。这样就把项目和仓库分开了。

理解到这，再看上面那条命令的意思：将 /opt/react-test.git 这个仓库的 release 分支，检出（checkout）到目录 /home/react-test

这里配好了以后，再回到本地项目。

本地配置

上一步在私有服务器建了一个 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 文件

此时，部署工做已经完成了。

后续部署工做，只须要 push 一下便可。

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，而后能够直接访问了！

本文参考视频整理，视频原地址： 这里