最近要高效的把前端 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
資料夾,它是個隱藏目錄,在 git 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 一下即可。