亚洲精品一级黄片,99热精品免费,日韩特级黄色电影,国产精品美女久久久久久,亚洲三级视频,天天干天天做,亚洲欧美成人在线视频,av亚洲产国偷v产偷v自拍牛牛

作者：楊成功

來源：SegmentFault 思否社區(qū)

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

總的部署思路分兩種：

編譯后的文件部署
源碼部署

編譯后的文件部署，就是先在本地進(jìn)行npm run build打包，生成 build 文件夾，然后將 build 文件夾傳到服務(wù)器，再用 Nginx 配置一個靜態(tài)解析即可。

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

源碼部署就是把源文件上傳到服務(wù)器上，然后：

$?npm?install?&&?npm?run?build

這種方式是將打包工作交給服務(wù)器（或其他構(gòu)建工具），本地只是將源代碼 push 上去，git 監(jiān)聽到推送然后自動開始構(gòu)建。這是現(xiàn)在流行的方式，大多數(shù)持續(xù)集成工具都是這么干的。

今天的重頭戲來了！我們不借助其他構(gòu)建工具，只用純 Git 實現(xiàn)監(jiān)聽 push 并自動構(gòu)建。相信我，這一步非常有趣~

服務(wù)端

首先準(zhǔn)備一臺服務(wù)器，安裝好?node?git?nginx，開始動手。

服務(wù)器信息如下：

host：198.234.456.8（假的）

項目目錄：/home/react-test

創(chuàng)建裸倉庫

登入服務(wù)器，在服務(wù)器的 /opt 目錄下創(chuàng)建一個裸倉庫

什么是裸倉庫？裸倉庫就是沒有工作目錄的倉庫，說白了就是你的項目目錄下的?.git?文件夾

執(zhí)行命令創(chuàng)建：

$?cd?/opt
$?git?init?--bare?react-test.git

創(chuàng)建好后，會生成 react-test.git 文件夾，所以我們的裸倉庫位置是?/opt/react-test.git，記住這里后面會用到。

接下來，進(jìn)入 react-test.git 文件夾，發(fā)現(xiàn)里面有個?hook?文件夾。這個文件夾可不得了，是放 Git “鉤子” 的地方。

所謂“鉤子”，其實就是一個 shell 文件。在執(zhí)行 git 操作（如：push，pull）時觸發(fā)執(zhí)行。

現(xiàn)在我們創(chuàng)建一個鉤子。

添加 push 鉤子

在 hook 目錄下新建?post-receive?文件，這個鉤子文件會在代碼 push 到這個裸倉庫后執(zhí)行，這里是本文最重要的重點(diǎn)。

$?cd?/opt/react-test.git/hook
$?vim?post-receive

post-receive 的具體內(nèi)容如下：

#!/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 倉庫。執(zhí)行的 add，commit 等操作，默認(rèn)就是與這個倉庫交換文件。

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

那么，有沒有辦法在當(dāng)前項目目錄下，使用其它目錄的 git 倉庫呢？

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

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

#?默認(rèn)加到?/home/react-test/.git
$?git?add?.
#?加到?/home/git-test/.git
$?git?--git-dir?/home/git-test/.git?add?.

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

當(dāng)然也可以，--work-tree參數(shù)就允許你指定其他的項目目錄。

比如說，我要在?/home/react-test?下檢出分支：

#?默認(rèn)從?/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，從而更新了項目目錄的代碼。

檢出新代碼之后，運(yùn)行打包命令，更新部署文件夾，這樣部署就實現(xiàn)了。

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，這樣解析就配好了！

至此，服務(wù)器端的打包，部署，解析流程就全部完成了。下面就是接受本地代碼的推送，然后自動觸發(fā)這個流程。

客戶端

前面在服務(wù)器建好了 git 裸倉庫?react-test.git，回到客戶端只需要做一件事：將代碼推到這個裸倉庫。

推送代碼

第一步，我們先在本地項目下，將這個裸倉庫添加為遠(yuǎn)程倉庫。

$?git?remote?add?prod?ssh://[email protected]/opt/react-test.git

第二步，我們直接將代碼推送到這個遠(yuǎn)程倉庫：

$?git?checkout?-b?release
$?git?push?prod?release

這里必須要切換到 release 分支再推送。因為在遠(yuǎn)程倉庫鉤子中，我們定義的是檢出 release 分支，所以要推送的是 release 分支。

這里可能會要求你輸入服務(wù)器密碼，可以配置 ssh免密登錄?來直接推送，這里不介紹。

推送后，會在控制臺看到我們在?post-receive?中寫好的輸出。當(dāng)推送完成，查看服務(wù)器下的 /home/react-test 目錄，會看到源文件和打包后的?build?文件

到這里，CI/CD 工作已經(jīng)全部完成。

后續(xù)的持續(xù)部署工作，只需要 push 一下即可。

-?END -

純 Git 實現(xiàn)前端 CI/CD

服務(wù)端

創(chuàng)建裸倉庫

添加 push 鉤子

nginx 解析

客戶端

推送代碼