Vue專案部署到遠端伺服器 並實現自動遠端同步專案
使用Vue開發專案時通常是前後端分離的，這樣就前後端各有一個地址，使用者訪問的是前端的地址，即前端路由，前端再向後端地址請求頁面資料然後渲染頁面。本文簡單介紹通過Apache2部署前端專案到伺服器，以及如何將本地專案自動推送到遠端服務。
我的伺服器系統版本 ubuntu16.04，如果你的也是ubuntu應該差別就不大。這裡我用的伺服器是國外的Vultr雲伺服器 ，平時就隨便玩玩(科學上網)還可以，關鍵是比阿里雲便宜太多而且科學上網不會收到警告(竟然是一句廣告！)。
以下分步介紹伺服器部署以及遠端同步專案。
1. 安裝Apache2
sudo apt install apache2 無意外的話安裝好就自動啟動了，瀏覽器位址列輸入ip或者域名就能夠看到Apache2服務的預設頁面了。
Apache2預設訪問的檔案路徑是/var/www/html，會返回該路徑下的index.html檔案內容給瀏覽器。
2.更改伺服器訪問目錄
Apache2的配置檔案為/etc/apache2/sites-available/000-default.conf。
vim開啟：
看到DocumentRoot即為服務根目錄，我們修改為我們想要的目錄同時增加許可權相關配置（Directory標籤中的內容，如果沒有許可權配置，訪問會被拒絕）：
這裡我們用一個建立一個簡單的index.html檔案來測試目錄更改是否成功：
在瀏覽器訪問ip或者域名：
訪問成功！
3. 設定免密ssh連線遠端伺服器
以上步驟簡單地搭建了web服務，但是要把我們自己的專案放到伺服器上還是比較不方便。最開始我是通過git來傳輸，本地build後把專案push到github，然後再在遠端伺服器將程式碼pull下來並且把服務訪問路徑修改為build後的/dist路徑。這種方式太過麻煩，後來請教了別人學會了更好的方式。
對於一個Vue專案，通常build後的程式碼目錄為/dist，所以我們只要把/dist複製到Apache2服務的訪問目錄即可。接下來看看怎樣推送原生代碼到遠端服務。
這裡使用linux的rsync命令（如果是windows系統的git Bash或者PowerShell，可以自行百度怎麼安裝該命令），rsync命令可以將本地檔案與遠端檔案對比，傳送檔案中不同的部分，因此同步速度槓槓的。關於rsync命令詳細用法，可參考
這裡rsync通過ssh方式向遠端伺服器同步檔案，為了快捷，我們設定ssh免密方式傳輸：
①本地生成ssh公鑰：
ssh-keygen 如果已有金鑰，命令執行過程中會詢問是否覆蓋，可以使用已有的金鑰，也可以覆蓋生成新金鑰。命令會在~/.ssh資料夾下生成金鑰對id_rsa和id_rsa.pub，分別為私鑰和公鑰，我們只要把公鑰放到遠端伺服器的~/.ssh/authorized_keys裡即可實現本機和遠端伺服器的ssh免密連線。
②將本機ssh公鑰放到遠端伺服器上。
你可以試試rsync（更好的辦法是使用ssh-copy-id指令，不過這裡為了介紹一下rsync），rsync 的基本使用格式為rsync (-options) srcfile destip:destfile，options是可選的：
rsync /home/lushg/.ssh/id_rsa.pub lushg@45.76.166.80:/home/lushg/.ssh/authorized_keys
可以登入遠端伺服器檢視同步是否成功。
現在再使用ssh連線遠端伺服器，順利的話可以不用密碼了。如果遇到下面的報錯：
sign_and_send_pubkey: signing failed: agent refused operation然後依舊要求輸入密碼，原因是生成的金鑰沒有加到ssh agent，此時只需在本機執行以下命令：
ssh-add ~/.ssh/id_rsa然後重新執行即可。
注: 複製公鑰到遠端主機更好的方式為ssh-copy-id指令，該指令將本地公鑰追加到遠端主機的.ssh/authorized_keys檔案中，使用方式如下。
ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected]- 自動推送原生代碼到遠端伺服器
現在回到Vue前端專案，怎樣構建完成自動同步到遠端伺服器？我們只需要在專案目錄下新增一個sh指令碼remotesync.sh，把構建命令、同步命令寫入指令碼（指令各選項含義可以參照指令詳情）：
remotesync.sh
#!/bin/bash
yarn run build
rsync -avr --delete-after dist/* [email protected]45.76.166.80:/home/lushg/www注意把伺服器地址、檔案路徑對應替換為你自己的，修改檔案執行許可權：
chmod a+x ./remotesync.sh ./remotesync.sh執行指令碼即可實現遠端同步，以後需要構建並遠端的時候就可以一鍵完成啦～～