TeamCity是Jetbrains的持續(xù)集成工具涩盾，免費(fèi)使用的話可以設(shè)置20個(gè)構(gòu)建腳本春霍，對于我們個(gè)人來說基本上是夠用了叶眉。當(dāng)然假如以后超過限制了，可以考慮使用另一個(gè)著名的持續(xù)集成工具Jenkins离福。當(dāng)然很早以前我就安裝了TeamCity妖爷，不過一直沒機(jī)會用理朋。這幾天正好隨便寫了一個(gè)個(gè)人小項(xiàng)目嗽上，就用它來測試一下TeamCity的持續(xù)集成功能吧兽愤。
先來說下我的條件，我的TeamCity是部署在自己的電腦上逐沙，自己的電腦上當(dāng)然還有其他一些開發(fā)軟件吩案。另外我還有一臺服務(wù)器徘郭，安裝著Nginx等軟件，并開啟了FTP‰屎螅現(xiàn)在要做的就是設(shè)置一個(gè)持續(xù)集成绩卤，每當(dāng)我提交Vue項(xiàng)目的時(shí)候濒憋，TeamCity自動打包項(xiàng)目凛驮，然后上傳到FTP目錄黔夭，讓服務(wù)器更新文件羽嫡。這個(gè)過程說起來好像挺復(fù)雜杭棵，其實(shí)倒是挺簡單的。
服務(wù)器配置
我用的FTP軟件是vsftpd先舷，這是一個(gè)比較安全的FTP服務(wù)器端蒋川，一般Linux上都是用它捺球。這個(gè)軟件的缺點(diǎn)就是當(dāng)你登錄的時(shí)候氮兵，F(xiàn)TP文件夾只能是用戶主目錄武福，不能自定義修改為其他目錄醉冤。而Nginx默認(rèn)的文件目錄一般在/var/www/html或者/usr/share/nginx/html之類的铃绒。因此nginx需要將HTML文件目錄配置修改為用戶主目錄颠悬。
當(dāng)然一般情況下不會將整個(gè)用戶主目錄暴露在Web服務(wù)器下赔癌，而是只暴露一個(gè)子文件夾灾票。所以nginx配置文件可以這么寫刊苍。
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /home/yitian/html/my-website;
....
當(dāng)然這么配置的話，訪問nginx只會得到403錯(cuò)誤婴氮。這個(gè)問題困擾了我整整一個(gè)晚上的時(shí)間。最后終于找到了解決辦法莹妒。Linux下軟件對權(quán)限非常敏感。如果nginx要訪問用戶主目錄下的文件夾的話鉴腻，該文件夾下所有文件必須對所有人可讀爽哎，該文件夾下的所有子文件夾必須對所有人開放可執(zhí)行權(quán)限器一，用戶主目錄也必須對所有人可讀课锌。所以對于我來說，需要對用戶主目錄和Web文件目錄施加701和755權(quán)限，或者直接將用戶主目錄設(shè)置為755也可以渺贤。當(dāng)然我覺得用戶主目錄的權(quán)限還是小一點(diǎn)好雏胃。
chmod 701 /home/yitian
chmod 755 -R /home/yitian/html/my-website
另外再說一句，很多人管理VPS喜歡使用root賬戶管理志鞍，這樣做的好處是不需要頻繁輸入管理員密碼瞭亮。但是一直用最高權(quán)限可能有安全隱患，而且使用root賬戶創(chuàng)建的各種文件和文件夾的權(quán)限也比較高固棚。我已開始使用的就是root賬戶創(chuàng)建的my-website文件夾统翩，然后發(fā)現(xiàn)FTP無法向其中傳文件，因?yàn)闄?quán)限不夠此洲。重新使用普通賬戶創(chuàng)建該文件夾之后，F(xiàn)TP服務(wù)才可以正常訪問文件面徽。
最后在說一點(diǎn)霎匈，如果你傳入的文件夾含有中文文件名的話，服務(wù)器需要將locale設(shè)置為中文（zh_CN.UTF-8），否則中文文件名會顯示成??。Ubuntu等操作系統(tǒng)可能還需要安裝中文支持。這個(gè)問題可以參考為什么我的Linux服務(wù)器不支持Unicode。
TeamCity配置
創(chuàng)建項(xiàng)目
我的這個(gè)項(xiàng)目是使用Vue腳手架搭建的一個(gè)基于WebPack的npm項(xiàng)目，并上傳到了Git倉庫框全。在下圖中填寫項(xiàng)目所需各種信息即可筒严。確定之后娶视，TeamCity會自動拉取項(xiàng)目并嘗試進(jìn)行構(gòu)建孝赫。當(dāng)然這個(gè)嘗試90%情況下都會失敗，需要我們手動設(shè)置構(gòu)建步驟。這也是TeamCity免費(fèi)版20個(gè)構(gòu)建步驟的限制原因所在。
創(chuàng)建構(gòu)建步驟
這個(gè)地方就是本文的核心所在耍目，當(dāng)理解了TeamCity的構(gòu)建設(shè)置過程之后，我們就可以自由的組合出比較復(fù)雜的構(gòu)建過程。
安裝npm包
對于一個(gè)項(xiàng)目來說山憨，第一步做的事情肯定就是拉取依賴包由境，然后嘗試編譯運(yùn)行纺阔。對于我這種npm項(xiàng)目來說婆翔，TeamCity沒有預(yù)設(shè)的選項(xiàng)，所以需要選擇命令行類型。由于npm包在國內(nèi)訪問不太通暢慷嗜，所以在填寫命令行的時(shí)候缭乘，使用了淘寶的鏡像逛尚。
npm install --registry=https://registry.npm.taobao.org
本來在這一步我還直接在自定義腳本那里填寫了npm run build這一行代碼脑题，但是結(jié)果發(fā)現(xiàn)TeamCity好像并沒有執(zhí)行這一行已艰，所以只能講這個(gè)添加為單獨(dú)的構(gòu)建步驟痊末。另外本來我是準(zhǔn)備使用淘寶封裝的cnpm命令凿叠，但是結(jié)果發(fā)現(xiàn)這個(gè)命令在這里并不可見炒刁，強(qiáng)行使用的話只會提示找不到該命令绽昏，所以只能采用這種折中辦法。
打包項(xiàng)目
了解了第一個(gè)步驟削饵，那么打包項(xiàng)目這個(gè)步驟就很容易理解了握爷。
上傳dist文件夾
這一步就是這個(gè)持續(xù)集成最關(guān)鍵的一步了跛璧，它涉及到服務(wù)器的FTP配置。不過做起來也不算難新啼。首先前面的FTP服務(wù)端需要配置好追城，服務(wù)器端nginx也要設(shè)置好。然后在這里設(shè)置FTP的用戶名和密碼师抄。這里最關(guān)鍵的一步就是Path to sources的設(shè)置了漓柑。這是一個(gè)箭頭分隔的字符串，左面是項(xiàng)目中需要上傳的文件夾叨吮，右面是FTP服務(wù)器中要上傳的文件夾辆布。這里還可以使用*和**通配符。詳細(xì)配置介紹可以點(diǎn)擊下面的小問號按鈕（圖里沒截到）查看官方文檔茶鉴。
設(shè)置完成之后锋玲，點(diǎn)擊項(xiàng)目右上角的run按鈕，開始執(zhí)行構(gòu)建過程涵叮。如果所有配置都正確的話惭蹂，稍等片刻就會出現(xiàn)構(gòu)建成功的提示伞插，然后訪問服務(wù)器，就會發(fā)現(xiàn)nginx也正常的顯示了打包之后的項(xiàng)目盾碗。這樣一來就大功告成了媚污。等到下次開發(fā)好項(xiàng)目并提交的時(shí)候，TeamCity就會自動檢測到變化并執(zhí)行構(gòu)建廷雅、提交到服務(wù)器耗美。這個(gè)過程是完全自動化的，我們要做的就是等待片刻就可以看到服務(wù)器上的實(shí)時(shí)變化航缀，是不是很爽呢商架？
