近些年前端發展迅速，前後分離已經是一個大趨勢。隨著前端專案的愈加龐大，其自動化也極其重要的一環。不僅僅是通過webpack實現的自動化構建，當專案提交的時候，同時也要實現其自動化的部署、釋出工作。

   接下來我就講一講通過gitlab-ci實現前端自動化部署的各個環節的配置。

期望的效果

    在我們本地向origin提交程式碼的時候，git倉庫可以監聽到這一次提交，並自動將這份push的程式碼clone到伺服器上、執行相關依賴的安裝、打包、檔案拷貝等操作。實現：提交程式碼後，自動將程式碼拷貝、釋出到伺服器上。

將要使用的工具

gitlab-ci

持續整合：是一種軟體開發實踐，即團隊開發成員經常整合它們的工作，整合每天可能會發生若干次。每次整合都通過自動化的構建（包括編譯，釋出，自動化測試）來驗證，從而儘早地發現整合錯誤。

gitlab-ci 即 gitlab提供的持續整合的功能。

webhooks

webhooks可以監聽gitlab上執行的很多操作，可以在gitlab的setting->integrations中設定。如圖，這裡選中了Push events，可以監聽到程式碼push到gitlab的事件。

gitlab-runner

    gitlab-runner即專案自動化的執行者（驅動），它可以執行一個 .gitlab-ci.yml（YAML檔案）的檔案，這個 .gitlab-ci.yml 檔案又指定了webhooks監聽到事件後要執行的操作、指令碼，由指令碼再執行進一步的操作，從而實現自動化。

    .gitlab-ci.yml

具體的語法可以參考-官方文件。

    其.gitlab-ci.yml 檔案的格式大致如下：

配置流程

1.開啟webhook的trigger，使其可以監聽push事件

2.部署伺服器環境

    我這邊採用的是linux系統的伺服器，先把後續操作可能用到的軟體和包都提前安裝好，這樣跑指令碼的時候才會順利進行。

3.下載git並配置ssh key公鑰

使用yum下載git：

yum -y install git 

配置ssh key公鑰

    配置ssh公鑰是為了在伺服器自動獲取gitlab上的程式碼時，可以免輸入密碼，用https的方式clone的話要手動輸入賬號密碼，這樣實現不了想要的自動化效果。

檢視有無.ssh檔案:

ls -al ~/.ssh

執行以下命令：

  cd ~/.ssh/    （如果沒有對應的資料夾，則執行  mkdir  ./.ssh）
  git config --global user.name "san.zhang"
  git config --global user.email "[email protected]"
  ssh-keygen -t rsa -C "[email protected]"

三次回車之後，會在 root/.ssh 目錄下生成 id_rsa  、 id_rsa.pub 兩個檔案

用 cat id_rsa.pub 指令檢視該檔案 並複製出檔案中的ssh公鑰，貼上到gitlab的SSH Keys 中，新增此公鑰，即可完成配置。

新增完成之後，我們直接在linux伺服器上直接使用git clone  [SSH url] 指令，來測試剛剛配置的ssh公鑰是否有效。

若出現類似錯誤：

    The authenticity of host 'gitlab.xxx.net (192.168.1.41)' can't be established.

解決方法：

1）使用ssh連線遠端主機時加上“-o StrictHostKeyChecking=no”的選項，如下：

 ssh  -o StrictHostKeyChecking=no  192.168.xxx.xxx     // 這裡寫的是本機地址

2）一個徹底去掉這個提示的方法是，修改/etc/ssh/ssh_config檔案（或$HOME/.ssh/config）中的配置，新增如下兩行配置：

StrictHostKeyChecking no
UserKnownHostsFile /dev/null

4.安裝node.js（當前最新8.12.0）和yarn

首先下載node.js我們要藉助wget，它是Linux系統下載檔案的工具，具有非常強的穩定性

yum -y install wget

使用wget安裝node.js

// 下載
wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.gz

// 解壓
tar -zxvf node-v8.12.0-linux-x64.tar.gz

// 全域性配置：（設定軟連結）

// 注意：這裡的 /home/node/ 是node解壓出來的檔案所在的路徑。

ln -s /home/node/node-v8.12.0-linux-x64/bin/npm /usr/local/bin/npm

ln -s /home/node/node-v8.12.0-linux-x64/bin/node /usr/local/bin/node

（若建立了軟連線後發現npm和node指令都無法使用，可嘗試先用sudo chmod -R 777修改node資料夾許可權）

安裝yarn ，其目的是 能快速穩定地安裝專案依賴——node_modules

// 通過 RPM 包倉庫安裝 Yarn
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn

// yarn -v 檢視yarn版本

注意：yarn的官方文件其中有一步是這樣描述的：

如果你沒有安裝 Node.js，你也應該配置 NodeSource 倉庫：

curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -

    這裡已經安裝了node的話，就不要執行此操作了，否則可能會修改gitlab-runner使用的node版本。

    如果發現gitlab-runner自動釋出時執行的node指令碼的版本和在伺服器上通過node -v看到的不一樣，可能就是該原因導致的，這時可以通過指定node執行的環境變數來修改。

    若通過 sudo yum install yarn 安裝yarn報以下錯：

    可以執行以下步驟來解決：

sudo yum install epel-release
sudo yum install nodejs
sudo yum install yarn

5.安裝Gitlab Runner

-- 移除舊版本倉庫：

sudo rm /etc/yum.repos.d/runner_gitlab-ci-multi-runner.repo

-- 新增 GitLab's 官方倉庫:

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

-- 下載最新版 GitLab Runner：

sudo yum install gitlab-runner

-- 安裝 GitLab Runner 的特定版本:

yum list gitlab-runner --showduplicates | sort -r sudo yum install gitlab-runner-10.0.0-1

   gitlab-runner執行的過程中，報錯ERROR: preparation failed時，可能就是gitlab-runner版本有誤，所以儘量下載最新的、或者合適版本的gitlab-runner

6.註冊gitlab-runner

安裝好了gitlab-runner，還要進行註冊，執行以下操作：

// 註冊 gitlab-runner
sudo gitlab-runner register

// 註冊 gitlab-ci-multi-runner
sudo gitlab-ci-multi-runner register

之後會為註冊輸入一系列資訊：

Enter your GitLab instance URL:（填寫GitLab的url）
Please enter the gitlab-ci coordinator URL (e.g. http://gitlab.com )

// 注：URL和token可在gitlab專案的Setting->CI/CD->Runners Setting->Expand中檢視
http://gitlab.example.com/

Enter the token you obtained to register the Runner:（填寫GitLab的token資訊）
Please enter the gitlab-ci token for this runner

WgdB8849hjQwFAxxxxxx

Enter a description for the Runner, you can change this later in GitLab's UI:（runner的描述）
Please enter the gitlab-ci description for this runner

my-runner

Enter the tags associated with the Runner, you can change this later in GitLab's UI:（runner的標籤，用逗號分開）
Please enter the gitlab-ci tags for this runner (comma separated):

// 多個tag使用英文逗號隔開
runner-tag,runner-tag2,runner-tagx

Enter the Runner executor: （runner的執行者）
Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:

shell

（gitlab-runner的資料夾會在 ~/.local/bin 目錄下）

註冊完成後，將gitlab-runner資料夾的使用者所屬修改為gitlab-runner，這樣gitlab-runner對其才會有執行許可權。

sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner

修改檔案讀寫許可權：

sudo chmod -R 777 /home/gitlab-runner

許可權不夠會導致runner在執行的時候報錯 permission denied，即不能對檔案進行讀寫、編輯的操作  

注意：gitlab上clone下來的檔案在linux環境中可能也會沒有讀寫許可權，進而也會報錯 permission denied ，此時就要先把clone下來的專案執行 sudo chmod -R 777 /home/project_name ，使專案中的檔案都可讀寫；再進行一個無關的修改，提交到遠端分支，這樣以後clone或者fetch下來的專案都是可讀寫的了。

註冊好之後如果在gitlab-ci的介面上看到runner的旁邊不是綠點，而是黑色三角的感嘆號，可以使用 gitlab-runner start 或者 gitlab-runner run 的指令來開啟runner的service

7.編寫要執行的shell指令碼

接下來我們寫指令碼檔案，因為我們採用的是linux系統，所以用的是shell檔案。

shell 指令碼要做的事情可以分為這些步驟：

    1. 從gitlab上git clone/fetch 專案資源；

    2.進入專案中，執行 yarn / npm install ，安裝專案依賴

    3.執行npm run build 打包專案

    4.將打包好的dist檔案放到伺服器指定釋出目錄下

如果在釋出後想要執行回滾的操作，可以在第4個步驟執行完成後將檔名按git的commit id 來重新命名，並且每次都把這個檔案再拷貝到一個單獨的目錄下存放；再建立軟連結將專案連結到伺服器的釋出目錄下。這樣一來，每次提交的檔案都會儲存在一個地方，釋出的版本就取決於軟連結所指向的檔案，要更改釋出版本的話，只要手動修改一下軟連結指向的重新命名後的dist檔案就可以了

    5.將之前clone下來的檔案刪除，避免檔案越來越多佔據過多記憶體，同時也方便下次clone

8.提交 .gitlab-ci.yml 檔案

    在gitlab的CI/CD->Pipelines->點選Get start with Pipelines，可看到配置文件。文件告訴我們，在push到gitlab的專案的根目錄中新增 .gitlab-ci.yml 檔案，就可以開啟pipelines。在pipelines中就可以看到我們gitlab監聽到事件後執行.gitlab-ci.yml檔案的過程，以及執行狀態等。

    我們參考 #官方文件 的格式，在 .gitlab-ci.yml 檔案寫入要執行的步驟。

    其中在寫job要執行的scripts時，就可以執行我們剛剛寫好的shell指令碼。我們在專案的與.gitlab-ci.yml檔案的同級目錄下建立一個 /ci 目錄，用來存放要執行的.sh檔案，這樣就可以通過相對路徑引入指令碼 ，如：

stages:
  - deploy

deploy_develop:
  stage: deploy
  script:
    - ci/deploy_develop.sh
  only:
    - develop

deploy_stage:
  stage: deploy
  script:
    - ci/deploy_stage.sh
  only:
    - master

    儲存後push到遠端分支。

    此時我們再進入 CI/CD->Pipelines 中，可以看到gitlab的介面已經發生了變化：

   如果執行順利的話，status列就會顯示 passed 。

   點進去檢查一下指令碼是否也按預期的執行了，如果是的話，通過gitlab-ci實現的前端自動化部署/釋出就大功告成了！