純 Git 實現前端 CI-CD

作者：楊成功

來源：SegmentFault 思否社區

最近要高效的把前端 react 項目部署到私有服務器上，研究了好幾種持續部署方案，這裏簡單描述一下。

總的部署思路分兩種：

編譯後的文件部署，就是先在本地進行npm run build打包，生成 build 文件夾，然後將 build 文件夾傳到服務器，再用 Nginx 配置一個靜態解析即可。

這種方案用 rsync 直接上傳就可以，這裏不贅述。

源碼部署就是把源文件上傳到服務器上，然後：

$ npm install && npm run build

這種方式是將打包工作交給服務器（或其他構建工具），本地只是將源代碼 push 上去，git 監聽到推送然後自動開始構建。這是現在流行的方式，大多數持續集成工具都是這麼幹的。

今天的重頭戲來了！我們不借助其他構建工具，只用純 Git 實現監聽 push 並自動構建。相信我，這一步非常有趣~

服務端

首先準備一臺服務器，安裝好 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 init 初始化 git 倉庫。執行的 add，commit 等操作，默認就是與這個倉庫交換文件。

這裏有兩個重要概念：項目目錄 和 git 倉庫。項目目錄就是 package.json 文件所在的目錄，我們的代碼放在這裏。git 倉庫是項目目錄下的 .git 文件夾，它是個隱藏目錄，在 npm init 時自動生成。

那麼，有沒有辦法在當前項目目錄下，使用其它目錄的 git 倉庫呢？

是可以的，--git-dir 參數就允許你指定一個其他的 git 倉庫。

比如說，我要將 /home/react-test 下修改的文件添加到暫存區：

# 默認加到 /home/react-test/.git
$ git add .
# 加到 /home/git-test/.git
$ git --git-dir /home/git-test/.git add .

既然項目目錄可以指定其它的 git 倉庫，那麼 git 倉庫可不可以指定其它的項目目錄呢？

當然也可以，--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 解析

上一部，部署完成，並打包了 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 工作已經全部完成。

後續的持續部署工作，只需要 push 一下即可。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/1eVuyikkP5R2eGuEi2P81g

猜你喜歡