作者：楊成功

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

總的部署思路分兩種：

編譯後的檔案部署

原始碼部署

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

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

原始碼部署就是把原始檔上傳到伺服器上，然後：

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

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

服務端

首先準備一臺伺服器，安裝好   ，開始動手。

伺服器資訊如下：

host：198。234。456。8（假的）

專案目錄：/home/react-test

建立裸倉庫

登入伺服器，在伺服器的 /opt 目錄下建立一個裸倉庫

什麼是裸倉庫？裸倉庫就是沒有工作目錄的倉庫，說白了就是你的專案目錄下的  資料夾

執行命令建立：

建立好後，會生成 react-test。git 資料夾，所以我們的裸倉庫位置是 ，記住這裡後面會用到。

接下來，進入 react-test。git 資料夾，發現裡面有個  資料夾。這個資料夾可不得了，是放 Git “鉤子” 的地方。

所謂“鉤子”，其實就是一個 shell 檔案。在執行 git 操作（如：push，pull）時觸發執行。

現在我們建立一個鉤子。

新增 push 鉤子

在 hook 目錄下新建  檔案，這個鉤子檔案會在程式碼 push 到這個裸倉庫後執行，這裡是本文最重要的重點。

post-receive 的具體內容如下：

這個指令碼最重要的就一條命令：

什麼意思呢？首先說下我們平時怎麼用 git。

一般我們是在專案目錄下用  初始化 git 倉庫。執行的 add，commit 等操作，預設就是與這個倉庫交換檔案。

這裡有兩個重要概念： 和 。專案目錄就是 package。json 檔案所在的目錄，我們的程式碼放在這裡。git 倉庫是專案目錄下的  資料夾，它是個隱藏目錄，在  時自動生成。

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

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

比如說，我要將  下修改的檔案新增到暫存區：

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

當然也可以，引數就允許你指定其他的專案目錄。

比如說，我要在  下檢出分支：

神奇吧，哈哈。這樣就把專案和倉庫分開了。

理解到這，再看上面那條命令的意思：將  這個 git 倉庫的  分支，檢出（checkout）到專案目錄 ，從而更新了專案目錄的程式碼。

檢出新程式碼之後，執行打包命令，更新部署資料夾，這樣部署就實現了。

nginx 解析

上一部，部署完成，並打包了 build 資料夾。這個資料夾就是要部署的資料夾。

最後一步，則是配置一個域名，解析到這個資料夾。

在 react-test。conf 檔案中寫上如下配置：

儲存並退出後，，這樣解析就配好了！

至此，伺服器端的打包，部署，解析流程就全部完成了。下面就是接受原生代碼的推送，然後自動觸發這個流程。

客戶端

前面在伺服器建好了 git 裸倉庫 ，回到客戶端只需要做一件事：將程式碼推到這個裸倉庫。

推送程式碼

第一步，我們先在本地專案下，將這個裸倉庫新增為遠端倉庫。

第二步，我們直接將程式碼推送到這個遠端倉庫：

這裡必須要切換到 release 分支再推送。因為在遠端倉庫鉤子中，我們定義的是檢出 release 分支，所以要推送的是 release 分支。

這裡可能會要求你輸入伺服器密碼，可以配置 ssh免密登入 來直接推送，這裡不介紹。

推送後，會在控制檯看到我們在  中寫好的輸出。當推送完成，檢視伺服器下的 /home/react-test 目錄，會看到原始檔和打包後的  檔案

到這裡，CI/CD 工作已經全部完成。

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