用TeamCity實現npm項目的自動部署

TeamCity是Jetbrains的持續集成工具，無償使用的話能夠設置20個構建腳本，對於咱們我的來講基本上是夠用了。固然假如之後超過限制了，能夠考慮使用另外一個著名的持續集成工具Jenkins。固然很早之前我就安裝了TeamCity，不過一直沒機會用。這幾天正好隨便寫了一個我的小項目，就用它來測試一下TeamCity的持續集成功能吧。

先來講下個人條件，個人TeamCity是部署在本身的電腦上，本身的電腦上固然還有其餘一些開發軟件。另外我還有一臺服務器，安裝着Nginx等軟件，並開啓了FTP。如今要作的就是設置一個持續集成，每當我提交Vue項目的時候，TeamCity自動打包項目，而後上傳到FTP目錄，讓服務器更新文件。這個過程提及來好像挺複雜，其實卻是挺簡單的。

服務器配置

我用的FTP軟件是vsftpd，這是一個比較安全的FTP服務器端，通常Linux上都是用它。這個軟件的缺點就是當你登陸的時候，FTP文件夾只能是用戶主目錄，不能自定義修改成其餘目錄。而Nginx默認的文件目錄通常在/var/www/html或者/usr/share/nginx/html之類的。所以nginx須要將HTML文件目錄配置修改成用戶主目錄。

固然通常狀況下不會將整個用戶主目錄暴露在Web服務器下，而是隻暴露一個子文件夾。因此nginx配置文件能夠這麼寫。

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/yitian/html/my-website;
....

固然這麼配置的話，訪問nginx只會獲得403錯誤。這個問題困擾了我整整一個晚上的時間。最後終於找到了解決辦法。Linux下軟件對權限很是敏感。若是nginx要訪問用戶主目錄下的文件夾的話，該文件夾下全部文件必須對全部人可讀，該文件夾下的全部子文件夾必須對全部人開放可執行權限，用戶主目錄也必須對全部人可讀。因此對於我來講，須要對用戶主目錄和Web文件目錄施加701和755權限，或者直接將用戶主目錄設置爲755也能夠。固然我以爲用戶主目錄的權限仍是小一點好。

chmod 701 /home/yitian
chmod 755 -R /home/yitian/html/my-website

另外再說一句，不少人管理VPS喜歡使用root帳戶管理，這樣作的好處是不須要頻繁輸入管理員密碼。可是一直用最高權限可能有安全隱患，並且使用root帳戶建立的各類文件和文件夾的權限也比較高。我已開始使用的就是root帳戶建立的my-website文件夾，而後發現FTP沒法向其中傳文件，由於權限不夠。從新使用普通帳戶建立該文件夾以後，FTP服務才能夠正常訪問文件。

最後在說一點，若是你傳入的文件夾含有中文文件名的話，服務器須要將locale設置爲中文（zh_CN.UTF-8），不然中文文件名會顯示成??。Ubuntu等操做系統可能還須要安裝中文支持。這個問題能夠參考爲何個人Linux服務器不支持Unicode。

TeamCity配置

建立項目

個人這個項目是使用Vue腳手架搭建的一個基於WebPack的npm項目，並上傳到了Git倉庫。在下圖中填寫項目所需各類信息便可。肯定以後，TeamCity會自動拉取項目並嘗試進行構建。固然這個嘗試90%狀況下都會失敗，須要咱們手動設置構建步驟。這也是TeamCity免費版20個構建步驟的限制緣由所在。

建立構建步驟

這個地方就是本文的核心所在，當理解了TeamCity的構建設置過程以後，咱們就能夠自由的組合出比較複雜的構建過程。

安裝npm包

對於一個項目來講，第一步作的事情確定就是拉取依賴包，而後嘗試編譯運行。對於我這種npm項目來講，TeamCity沒有預設的選項，因此須要選擇命令行類型。因爲npm包在國內訪問不太通暢，因此在填寫命令行的時候，使用了淘寶的鏡像。

npm install --registry=https://registry.npm.taobao.org

原本在這一步我還直接在自定義腳本那裏填寫了npm run build這一行代碼，可是結果發現TeamCity好像並無執行這一行，因此只能講這個添加爲單獨的構建步驟。另外原本我是準備使用淘寶封裝的cnpm命令，可是結果發現這個命令在這裏並不可見，強行使用的話只會提示找不到該命令，因此只能採用這種折中辦法。

打包項目

瞭解了第一個步驟，那麼打包項目這個步驟就很容易理解了。

上傳dist文件夾

這一步就是這個持續集成最關鍵的一步了，它涉及到服務器的FTP配置。不過作起來也不算難。首先前面的FTP服務端須要配置好，服務器端nginx也要設置好。而後在這裏設置FTP的用戶名和密碼。這裏最關鍵的一步就是Path to sources的設置了。這是一個箭頭分隔的字符串，左面是項目中須要上傳的文件夾，右面是FTP服務器中要上傳的文件夾。這裏還可使用*和**通配符。詳細配置介紹能夠點擊下面的小問號按鈕（圖裏沒截到）查看官方文檔。

設置完成以後，點擊項目右上角的run按鈕，開始執行構建過程。若是全部配置都正確的話，稍等片刻就會出現構建成功的提示，而後訪問服務器，就會發現nginx也正常的顯示了打包以後的項目。這樣一來就大功告成了。等到下次開發好項目並提交的時候，TeamCity就會自動檢測到變化並執行構建、提交到服務器。這個過程是徹底自動化的，咱們要作的就是等待片刻就能夠看到服務器上的實時變化，是否是很爽呢？