環(huán)境清單：
1，本機(jī)環(huán)境： Mac OSX
2，服務(wù)器環(huán)境：Centos7 ，nodejs，git
3，需要基礎(chǔ)：一些基本服務(wù)器操作指令，git使用及了解gitlab平臺(tái)基本使用
注：這里演示的都是基礎(chǔ)能用的版本，實(shí)際生產(chǎn)肯定不能這么來(lái)的，根據(jù)大佬的建議一般來(lái)說(shuō)這部署應(yīng)該在docker環(huán)境配置，并且權(quán)限配置也很重要，而且runner機(jī)器和生產(chǎn)代碼機(jī)器應(yīng)該獨(dú)立。
好了，前端自動(dòng)部署，這個(gè)聽(tīng)起來(lái)如此高大上的東西是啥叻，我們?yōu)槭裁葱枰?，?duì)于眾javaer來(lái)說(shuō)jenkins肯定是不陌生的，這個(gè)原理頗為相似，但配置起來(lái)卻簡(jiǎn)單的多(那不然我就寫(xiě)不了這個(gè)文章了)，我們目前希望能夠?qū)崿F(xiàn)：
本地代碼推到master? => 觸發(fā)鉤子服務(wù)器自動(dòng)執(zhí)行腳本? => 拉代碼，自動(dòng)裝依賴，打包，編譯，上線
好了，確保你擁有環(huán)境清單里面的2，3，當(dāng)然沒(méi)有也沒(méi)關(guān)系，慢慢折騰嘛......
1，第一步準(zhǔn)備你的服務(wù)器公鑰
如果你有的話它應(yīng)該在 ～/.ssh目錄下的id_rsa.pub，沒(méi)有的話你可以創(chuàng)建一個(gè)
ssh-keygen -t rsa -C "youremail@example.com"
然后去gitlab setting的ssh key那里添加一下，這里是為了方便服務(wù)端去拉取git倉(cāng)庫(kù)代碼，也是我們搞事情的關(guān)鍵。
2，在服務(wù)端安裝gitlab runner
移除舊版本倉(cāng)庫(kù)(如果你之前搞過(guò)這個(gè)，如果沒(méi)有，這步可以忽略)：
sudo rm /etc/yum.repos.d/runner_gitlab-ci-multi-runner.repo
添加 GitLab's 官方倉(cāng)庫(kù):
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash
下載最新版 GitLab Runner：
sudo yum install gitlab-runner
3，注冊(cè)runner
我們需要在這里和gitlab建立連接，命令行敲入
sudo gitlab-runner register
// 注冊(cè) gitlab-ci-multi-runner
sudo gitlab-ci-multi-runner register
出來(lái)一系列對(duì)話如下
# 填寫(xiě)gitlab ci地址(見(jiàn)圖1)
Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )
我這里用的是gitlab的庫(kù)當(dāng)然就是https://gitlab.com/啦，參數(shù)可看圖1
------------------------------------------------------------
輸入您獲得的注冊(cè)Runner的令牌：(見(jiàn)圖1)
Please enter the gitlab-ci token for this runner
token，圖一的位置有
------------------------------------------------------------
# 輸入Runner的描述，你可以稍后在GitLab的UI中進(jìn)行更改：
Please enter the gitlab-ci description for this runner[hostame]
my-runner (如果不是實(shí)際生產(chǎn)，隨便寫(xiě)，只是標(biāo)識(shí)作用)
------------------------------------------------------------
# 輸入與Runner關(guān)聯(lián)的標(biāo)簽，稍后可以在GitLab的UI中進(jìn)行更改：
Please enter the gitlab-ci tagsforthisrunner (comma separated):
xxx(這里不填也行)
------------------------------------------------------------
選擇Runner是否應(yīng)該選擇沒(méi)有標(biāo)簽的作業(yè)，可以稍后在GitLab的UI中進(jìn)行更改（默認(rèn)為false）：
Whether to run untagged jobs [true/false]:
[false]:true (暫時(shí)自己玩的話，可以直接空格調(diào)過(guò))
------------------------------------------------------------
選擇是否將Runner鎖定到當(dāng)前項(xiàng)目，稍后可以在GitLab的UI中進(jìn)行更改。
Runner特定時(shí)有用（默認(rèn)為true）：
Whether to lock Runner to current project [true/false]:
[true]:true (暫時(shí)自己玩的話/不知道干啥用的，可以直接空格調(diào)過(guò))
------------------------------------------------------------
# 輸入Runner執(zhí)行者：Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell
shell(這里我們用較簡(jiǎn)單的shell命令來(lái)玩先)
步驟1，2信息可在gitalb -setting -ci(見(jiàn)圖1)里面找到相關(guān)信息
完成注冊(cè)后我們的gitlab runner應(yīng)該會(huì)被安排在/home/gitlab-runner 目錄，至少我的是這樣的。隨后我們需要給gitlab-runner文件夾賦予權(quán)限，否則很有可能在跑runner的時(shí)候報(bào)permission denied，操作如下
sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner
sudo chmod -R 777 /home/gitlab-runner
注意這里有個(gè)坑：遠(yuǎn)端拉下來(lái)的代碼文件很可能在linxu下沒(méi)有執(zhí)行權(quán)限，我們可能會(huì)遇到permission denied的情況，這時(shí)候需要手動(dòng)加權(quán)限 sudo chmod -R 777 /project_name ，然后使項(xiàng)目中的文件都可讀寫(xiě)；再進(jìn)行一個(gè)無(wú)關(guān)的修改，提交到遠(yuǎn)端分支，這樣以后clone或者fetch下來(lái)的項(xiàng)目都是可讀寫(xiě)的了。
一頓操作之后如果發(fā)現(xiàn)gitlab setting runner左邊(例圖2)這里有一個(gè)綠點(diǎn)證明我們剛剛掛載成功了，如果是紅點(diǎn)和黑點(diǎn)，可能需要手動(dòng)啟動(dòng)runner一下
sudo gitlab-ci-multi-runner start
4，編寫(xiě)一個(gè)簡(jiǎn)單shell腳本去操作我們的前端文件
因?yàn)槲覙O少接觸shell，所以這里也是參考其他大佬的簡(jiǎn)單寫(xiě)法，因?yàn)槲业那岸宋募?www/wwwroot/下，所以這里執(zhí)行的操作就是去這個(gè)目錄自動(dòng)拉代碼并且編譯，然后把這個(gè)文件放到/usr/local/bin/ ，放這里只是方便全局執(zhí)行，其實(shí)也可能用其它方式去調(diào)用，任君選擇，注意這玩意沒(méi)后綴。
注：這里只是簡(jiǎn)單演示其基本原理，作為實(shí)際生產(chǎn)的ci，我們其實(shí)應(yīng)該編譯目錄和線上目錄是分開(kāi)的，專門(mén)有一份文件進(jìn)行這些拉/裝/編/合的操作，最后進(jìn)行替換才能減少用戶被影響的時(shí)間，如果真的像如下這樣搞，那用戶等編譯白屏這個(gè)過(guò)程2，3分鐘，豈不日了狗。
deploy
# echo "更新代碼...."
cd /root/../www/wwwroot/項(xiàng)目目錄/
git pull
# build
echo "正在構(gòu)建..."
npm install
npm run build
echo "構(gòu)建成功...."
5，我們還需要一份.gitlab-ci.yml(這是建立連接的關(guān)鍵)
我們的項(xiàng)目一級(jí)目錄添加一個(gè).gitlab-ci.yml，里面內(nèi)容大概就是我們r(jià)unner定義的，意思是在我們master分支有變動(dòng)時(shí)，觸發(fā)鉤子自動(dòng)執(zhí)行deploy腳本
https://gitlab.com/szdubinbin1/tryci/blob/master/.gitlab-ci.yml
stages:
? - deploy
deploy:
? ? stage: deploy
? ? script:
? ? ? - deploy
? ? only:
? ? ? - master
? ? tags:
? ? ? - my-runner
最后，測(cè)試一下
當(dāng)我們的master代碼發(fā)生變化(因?yàn)槲覒?，所以我用的是create-react-app腳手架做的測(cè)試)，gitlab項(xiàng)目的ci/cd這里就可以看到我們執(zhí)行的runner(圖3)
passed就是成功了，當(dāng)然，光看這里是不行的，如果拉取git代碼失敗，它還是提示passed，原因猜測(cè)可能是它監(jiān)測(cè)到shell腳本跑完就覺(jué)得ok的，這里還需要看一下jobs
我們可以發(fā)現(xiàn)在jobs(圖4)它會(huì)反饋我們整個(gè)shell腳本、包括拉代碼/裝依賴/編譯打包的過(guò)程，如果如下，具體項(xiàng)目可能不同，我這個(gè)是react，理論上vue打包成功也差不多這樣，這時(shí)候我們刷新自己的項(xiàng)目地址就會(huì)發(fā)現(xiàn)修改生效了。
坑
1，跑腳本的時(shí)候，npm install可能會(huì)說(shuō)權(quán)限不夠，這時(shí)候只能去修改項(xiàng)目目錄的權(quán)限
2，跑腳本的時(shí)候，git說(shuō)沒(méi)有ssh key，原因是我們剛開(kāi)始添加的是root的ssh key ，gitlab runner可能用不了，解決方案：切到gitlab runner用戶去添加一個(gè)ssh key
命令：su gitlab-runner? => 添加ssh key
因?yàn)楣臼褂眠@個(gè)方案，不過(guò)當(dāng)然比我這個(gè)高級(jí)的太多，我們重在實(shí)踐了解一下前端自動(dòng)化部署的大概流程，說(shuō)不定哪天這玩意真的需要我們自己搭呢？折騰了這玩意一天，有一些莫名其妙的坑，不過(guò)好在都算解決了，真的感覺(jué)這玩意太高效率了，以后自己做項(xiàng)目就不用去服務(wù)器拉代碼了。
