【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，而後能夠直接訪問了！

本文參考視頻整理，視頻原地址： 這裏