本文主要以部署前端Vue項目為例，講述了如何基於雲原生DevOps服務自動化部署前端項目~從開發完成到線上環境，我們只需提交代碼即可~
一、引言
作為一名開發人員，日常工作中我們除了需要負責代碼的開發外，通常還需要負責代碼的部署，運維等工作。而在傳統的手工部署方法中，在每次版本迭代或需求變更完成后，除了將代碼提交到代碼倉庫外，如果需要更新線上環境，我們還需要重復本地構建打包、連接遠程服務器、上傳代碼到服務器指定目錄等步驟。這些步驟雖然簡單，但是通常耗時耗力，若同時存在多個環境時，也容易引起部署錯誤。
而隨着DevOps理念、容器技術和IT自動化等理念與技術的興起，我們可以利用現有的技術和工具，以IT自動化以及持續集成（CI）、持續部署（CD）為基礎，搭建一個完整的工作流，用於優化程序開發、測試、系統運維等所有環節。如下面這個圖所示，從開發完成到線上環境，我們只需提交代碼即可。
接下來，將以部署前端Vue項目為例，講述如何通過騰訊雲CODING DevOps、容器鏡像服務TCR、容器服務TKE和負載均衡CLB等雲產品提供的強大雲原生DevOps服務來實現vue項目的自動化部署，重點記錄了自己的學習過程~
二、需要掌握的技術
在學習基於雲原生DevOps服務自動化部署項目之前，我們需要先熟悉以下技術及工具的基本使用方法~
1、Docker
DevOps是一種理念，而其具體實現通常需要基於容器技術。而Docker作為一個開源容器項目，提供了高效、敏捷和輕量級的容器方案，並支持部署到本地環境和多種主流雲平台。下面主要列舉了Docker的一些常用操作：
|
從倉庫拉取鏡像 []表示可省略 |
docker [image] pull nginx:latest |
|
列出本機的所有鏡像文件 |
docker [image] ls |
|
刪除鏡像 |
docker [image] rm nginx:latest |
|
上傳鏡像 |
docker [image] push nginx:latest |
|
使用Dockerfile構建鏡像 -t：指定鏡像的標簽列表 -f：Dockerfile名稱及路徑 |
docker [image] build -t nginx:new -f /dockerfile_path |
|
運行鏡像，並生成一個容器 -p：容器端口映射 -i：分配偽終端，並綁定到容器的標准輸入上 -t：讓容器的標准輸入保持打開 -d：讓容器在后台以守護態形式運行 |
docker [container] run -p 80:80 -it -d nginx:latest |
| 列出所有正在運行的容器 | docker [container] ps |
| 列出所有容器，包括終止運行的容器 | docker [container] ps -a |
| 啟動容器 | docker [container] start container_name/container_id |
| 暫停容器 | docker [container] stop container_name/container_id |
| 刪除容器 | docker [container] rm container_name/container_id |
2、Kubernetes
Kubernetes（K8S）是負責自動化運維管理多個Docker容器的集群，解決了容器的管理和調度問題，需要理解Node、Pod、Deployment、Service和Ingress等相關概念。
相關學習網站：https://kubernetes.io/zh/docs/concepts/overview/what-is-kubernetes/
3、持續集成/持續部署工具
現有的持續集成/持續部署（CI/CD）工具通常包括了Jenkins、Travis CI、Circle CI、TeamCity、CodeShip、GitLab CI和Bamboo等，由於CODING持續集成全面兼容Jenkins的持續集成服務，所以這里也使用到了Jenkins，需要掌握Jenkinsfile的使用。
4、用到的雲產品
CODING DevOps：https://cloud.tencent.com/product/coding-ci
容器鏡像服務TCR：https://cloud.tencent.com/product/tcr
容器服務TKE：https://cloud.tencent.com/product/tke
負載均衡CLB：https://cloud.tencent.com/product/clb
CODING DevOps能夠與TCR和TKE緊密結合，當CODING代碼倉庫的源代碼發生更新時，就能夠自動觸發鏡像構建，並推送到TCR鏡像倉庫。同時，通過在TCR設置交付流水線，當TCR鏡像倉庫發生更新時，能夠自動觸發TKE集群進行部署，從而更新線上環境。
三、先從一個簡單例子講起
由於采用基於雲原生的DevOps需要使用容器技術實現項目的部署，因此這里以Vue項目為例，介紹了如何采用Docker容器部署前端項目。
1、基於Docker容器部署Vue項目
前提條件：一台已經安裝了Docker環境的服務器（雲服務器CVM），以及一個Vue項目，並且通過npm run build生成了dist目錄。
1）編寫Dockerfile文件
Dockerfile文件一般存放在項目根目錄，也可以自由指定存放目錄。Dockerfile的內容如下：
# 前端應用部署在nginx里面，所以需要依賴nginx鏡像 FROM nginx # 可以指定鏡像的所有者，非必須 MAINTAINER iceshuang@tencent.com # 將構建后的資源目錄復制到nginx默認的靜態資源托管目錄中 COPY dist/ /usr/share/nginx/html/ # 非守護態運行，使容器不會自動退出 CMD nginx -g 'daemon off;'
2）將dist目錄和Dockerfile上傳到服務器指定目錄下
3）根據Dockerfile文件構建鏡像，這里將鏡像的標簽名稱命名為web
4）構建好鏡像后，會根據這個鏡像創建並啟動容器，這里將容器名稱命名為為vue
5）由於創建容器時綁定了端口號8080，因此可以通過ip:8080訪問前端項目
2、使用CODING DevOps創建自己的構建計划
接下來，將基於上面的基礎，使用CODING DevOps創建一個完整的工作流，實現從開發完成到線上環境，只需提交代碼即可。
前提條件：已經申請了CODING DevOps的團隊域名和團隊項目，並且已經創建並初始化了一個項目倉庫（詳細文檔）。
1）創建Docker類制品庫
選擇制品管理 -> 制品倉庫，創建Docker類制品庫。創建成功后，點擊使用訪問令牌生成配置，記錄下對應的登錄名和密碼（詳細文檔），如下圖所示，創建了一個名為image的鏡像倉庫。
點擊項目設置（左下角）-> 開發者選項 -> 憑據管理 -> 錄入憑據，配置登錄名密碼生成憑據，創建成功后，會生成一個憑據ID。該憑據用於向制品庫拉取和上傳鏡像。
2）雲服務器創建SSH密鑰對
在雲服務器控制器創建SSH密鑰對，並且將密鑰對綁定到對應的雲服務器（詳細文檔）。
點擊項目設置（左下角）-> 開發者選項 -> 憑據管理 -> 錄入憑據，根據上面生成的密鑰信息，配置SSH密鑰生成憑據，創建成功后，會生成一個憑據ID。該憑據用於登錄雲服務器。
3）創建Jenkinsfile文件
Jenkinsfile文件主要用於自定義持續集成流水線過程，可以根據實際情況設置Jenkinsfile的路徑。這里主要在Vue項目根目錄新建了deploy目錄，並將Jenkinsfile和Dockerfile放入deploy中。
vue |- package.json |- README.md |- /deploy |- Dockerfile |- Jenkinsfile |- /node_modules |- .src |- .dockerignore
Dockfile內容和前面保持一致，Jenkinsfile內容如下，其中，變量DOCKER_REGISTRY_CREDENTIALS_ID、CVM_REGISTRY_CRENDENTIALS_ID、CVM_NAME、CVM_IP和CVM_USER需要在步驟4）中進行設置。
pipeline { agent any stages { stage('檢出') { steps { checkout([$class: 'GitSCM', branches: [[name: GIT_BUILD_REF]], userRemoteConfigs: [[ url: GIT_REPO_URL, credentialsId: CREDENTIALS_ID ]]]) } } stage('安裝依賴') { steps { sh 'npm install' } } stage('構建') { steps { sh 'npm run build' } } stage('構建鏡像') { steps { echo '構建鏡像...' script { sh "docker build -t icesices-docker.pkg.coding.net/vue/image/${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER} -f ./deploy/Dockerfile ." } echo '構建鏡像完成' } } stage('推送鏡像') { steps { echo '推送鏡像...' script { // DOCKER_REGISTRY_CREDENTIALS_ID需要在變量與緩存中進行設置 withCredentials([usernamePassword(credentialsId: env.DOCKER_REGISTRY_CREDENTIALS_ID, usernameVariable: 'REGISTRY_USER', passwordVariable: 'REGISTRY_PASS')]) { sh "docker login -u ${env.REGISTRY_USER} -p ${env.REGISTRY_PASS} icesices-docker.pkg.coding.net" sh "docker push icesices-docker.pkg.coding.net/vue/image/${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER}" } } echo '推送鏡像完成' } } stage('部署') { steps { echo '部署中...' script { // CVM_NAME 服務器名稱 CVM_IP 服務器ip CVM_USER 賬號名稱，需要在變量與緩存中進行設置 def remote = [:] remote.name = env.CVM_NAME remote.allowAnyHosts = true remote.host = env.CVM_IP remote.port = 22 remote.user = env.CVM_USER // CVM_REGISTRY_CRENDENTIALS_ID需要在變量與緩存中進行設置，該步驟主要通過SSH登錄到雲服務器，並且拉取Docker鏡像，啟動並運行容器 withCredentials([sshUserPrivateKey(credentialsId: env.CVM_REGISTRY_CRENDENTIALS_ID, keyFileVariable: 'id_rsa')]) { remote.identityFile = id_rsa // DOCKER_REGISTRY_CREDENTIALS_ID需要在變量與緩存中進行設置 withCredentials([usernamePassword(credentialsId: env.DOCKER_REGISTRY_CREDENTIALS_ID, usernameVariable: 'REGISTRY_USER', passwordVariable: 'REGISTRY_PASS')]) { sshCommand remote: remote, command: "docker login -u ${env.REGISTRY_USER} -p ${env.REGISTRY_PASS} icesices-docker.pkg.coding.net" sshCommand remote: remote, command: "docker pull icesices-docker.pkg.coding.net/vue/image/${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER}" sshCommand remote: remote, command: "docker stop vue | true" sshCommand remote: remote, command: "docker rm vue | true" sshCommand remote: remote, command: "docker run --name vue -p 8080:80 -d icesices-docker.pkg.coding.net/vue/image/${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER}" } } } echo '部署完成' } } } }
4）創建構建計划
點擊持續集成 -> 構建計划 -> 自定義構建過程，選擇對應的倉庫，並且填入Jenkinsfile的路徑。
配置節點池，這里可以采用CODING提供的雲主機構建（有構建限制，需要提高配額才能有更好的體驗），也可以采用自定義構建節點devcloud構建（詳細文檔），可以根據實際需要進行選擇。
設置觸發規則，當代碼發生更新就自動觸發構建。
設置變量與緩存，這里設置的變量為在Jenkinsfile中定義的變量，其中，DOCKER_REGISTRY_CREDENTIALS_ID為制品庫的推送憑據，CVM_REGISTRY_CRENDENTIALS_ID為雲服務器的SSH密鑰，這里的值對應了步驟2）和步驟3）中生成的憑據的ID，將對應的值復制過來就好。CVM_NAME、CVM_IP和CVM_USER分別表示雲服務器的名稱、IP和賬號名稱。
5）執行構建計划
完成上述步驟之后，當我們本地完成開發，只要推送代碼到代碼倉庫，就能夠觸發構建計划，自動進行代碼編譯構建、鏡像推送和代碼部署等工作，當構建成功后，重新訪問我們的網站，就能夠看到線上環境更新了。同時，在制品庫也能夠看到每次推送的鏡像。
四、進階學習
在實際的項目中，通常我們需要部署的服務器往往不止一台，而一台服務器上通常又會運行多個Docker容器。因此，為了更加高效的管理和調度Docker容器，並且得到更加安全，獨享的高性能應用制品托管分發服務，接下來，將會介紹如何基於CODING DevOps、TCR、TKE和CLB等雲產品提供的的強大的雲原生DevOps服務來部署前端項目。
1、容器鏡像服務TCR
TCR主要用來存儲鏡像，使用交付流水線實現容器DevOps，從而更新TKE集群中工作負載的鏡像（詳細文檔）。
1）創建容器鏡像實例
TCR包括了個人版和企業版，企業版能夠提供更加安全、獨享的高性能應用制品托管分發服務，因此這里使用了企業版，需要購買后才能使用。
創建實例成功后，點擊實例進入配置，並新建訪問憑證。記下該訪問憑證的賬號密碼，並在CODING DevOps的憑據管理中進行錄入，從而使得CODING DevOps能夠向TCR推送鏡像，具體見下文CODING DevOps的步驟2）。
2）創建命名空間和鏡像倉庫
由於創建鏡像倉庫時需要選取命名空間，因此這里需要先創建命名空間，然后再創建鏡像倉庫，生成的倉庫地址就是我們在后續中拉取和推送鏡像的地址。
3）配置網絡訪問策略
內網訪問通過配置內網訪問鏈路，指定可以訪問鏡像數據的私有網絡VPC，通過內網方式拉取鏡像可以提高推送和拉取速度。下文TKE集群在配置TCR插件拉取鏡像時，需要先配置好內網訪問策略。
4）配置交付流水線
前提條件：已經按照下文的部署創建好TKE集群和工作負載，部署了容器應用。
配置交付流水線包括兩種場景，第一種是推送代碼后自動觸發鏡像構建和應用部署，第二種是本地推送鏡像后自動觸發部署（詳細文檔）。這里使用到了第二種場景。
選擇容器鏡像服務 -> 交付中心 -> 交付流水線，新建流水線，填寫流水線的相關信息。選擇需要拉取的鏡像倉庫及所需要更新的TKE集群。
創建成功后，在容器鏡像服務 -> 運維中心 -> 觸發器中可以看到自動生成了觸發器。
此外，在容器鏡像服務 -> 實例列表 -> 訪問憑據中可以看到自動生成了流水線交付專用憑據。
完成上述步驟后，當有新的鏡像推送到鏡像倉庫時，就會觸發觸發器，更新TKE集群的工作負載。同時，交付流水線也會被觸發執行。
2、CODING DevOps
CODING DevOps主要用來托管代碼，通過配置構建計划，實現代碼編譯構建，鏡像構建和推送鏡像到TCR（詳細文檔）。
前提：已經申請了CODING DevOps的團隊域名和團隊項目，並且已經創建並初始化了一個項目倉庫。
1）創建Jenkinsfile文件
同前面的例子一樣，仍然在Vue根目錄中創建了deploy目錄，並將Dockerfile和Jenkinsfile放入deploy中。Dockerfile的內容仍然保持不變，Jenkinsfile的內容如下：
pipeline { agent any stages { stage('檢出') { steps { checkout([$class: 'GitSCM', branches: [[name: GIT_BUILD_REF]], userRemoteConfigs: [[ url: GIT_REPO_URL, credentialsId: CREDENTIALS_ID ]]]) } } stage('安裝依賴') { steps { sh 'npm install' } } stage('構建') { steps { sh 'npm run build' } } stage('構建鏡像') { steps { echo '構建鏡像...' script { sh "docker build -t vue-web.tencentcloudcr.com/vue/image:${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER} -f ./deploy/Dockerfile ." } echo '構建鏡像完成' } } stage('推送鏡像') { steps { echo '推送鏡像...' script { // DOCKER_REGISTRY_CREDENTIALS_ID需要在變量與緩存中進行設置 withCredentials([usernamePassword(credentialsId: env.DOCKER_REGISTRY_CREDENTIALS_ID, usernameVariable: 'REGISTRY_USER', passwordVariable: 'REGISTRY_PASS')]) { sh "echo ${REGISTRY_PASS} | docker login -u ${REGISTRY_USER} --password-stdin vue-web.tencentcloudcr.com" sh "docker push vue-web.tencentcloudcr.com/vue/image:${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER}" } } echo '推送鏡像完成' } } } }
2）設置訪問憑據
點擊項目設置（左下角）-> 開發者選項 -> 憑據管理 -> 錄入憑據，配置賬號密碼生成憑據，該憑據是推送鏡像到TCR的憑據，賬號密碼需要在TCR中獲取，具體見上文容器鏡像服務TCR的步驟1）。
3）創建構建計划
點擊持續集成 -> 構建計划 -> 自定義構建過程，選擇代碼倉庫，填寫Jenkinsfile的路徑，創建構建計划。
創建成功后，需要進行基礎信息和觸發規則的配置。
此外，還需要進行變量與緩存的配置，其中，DOCKER_REGISTRY_CREDENTIALS_ID的值為步驟2）中生成的憑據ID。
3、容器服務TKE
容器服務TKE主要用於創建集群，並拉取TCR中的鏡像創建工作負載，部署業務應用，對外提供服務（詳細文檔）。
1）創建TKE集群
根據官網的指引（詳細文檔）創建TKE集群，根據實際需求選擇節點數量，配置安全組等。創建集群成功后，在雲服務器控制台可以看到創建了相應的節點服務器（這里創建時選擇了兩個節點）。
2）安裝TCR插件
在TKE集群中通過使用TCR插件，能夠實現內網免密拉取企業版實例內容器鏡像（詳細文檔）。但是需要TKE集群和TCR部署在同一個地域，並且在容器鏡像服務 -> 訪問管理 -> 內網訪問中需要已經創建好了私有網絡VPC，具體見上文步驟。
在組件管理中，點擊新建，選擇TCR容器鏡像服務插件，並勾選“使用TCR插件為集群配置關聯實例內網訪問鏈路的自動解析”。
創建成功后，會在命名空間tcr-assistant-system下，自動創建名稱為tcr-assistant-controller-manager的Deployment和名稱為tcr-assistant-webhook-service的Service。
同時，在容器鏡像服務 -> 實例列表 -> 實例 -> 訪問憑證中也可以看到生成了TKE集群的專用訪問憑據。
3）創建工作負載
點擊工作負載 -> Deploment -> 新建，創建工作負載（詳細文檔）。
設置工作負載的名稱和命名空間。
設置實例內容容器的名稱、鏡像倉庫、鏡像版本、鏡像拉取策略和實例數量。由於這里創建的TKE集群包含了2個節點，所以創建了2個pod實例，可以根據實際情況進行設置。
訪問設置，由於下文中需要通過負載均衡CLB轉發流量到Node，因此這里采用了主機端口訪問的方式（詳細文檔）。在端口映射中，由於這里希望向外提供服務的端口為80，而容器內nginx服務的端口為80，因此需要將對外服務的端口和nginx服務的端口進行映射。
創建成功后，可以看到pod實例已經成功運行，通過實例所在節點IP，可以看到pod實例運行在哪個節點上。同時，在服務與路由 -> Servide中，也可以看到在對應命名空間下生成了對應的Service。
創建好工作負載后，如果登錄到節點所在的雲服務器上，通過kubectl get pod -o wide查看，也可以看到pod正常運行在雲服務器中。
4、負載均衡CLB
負載均衡CLB能夠提供安全快捷的流量分發服務，訪問流量經由CLB可以自動分配到多台雲服務器上。當某台雲服務器發生故障時，CLB能夠將流量調度到正常的節點，從而使得服務不會發生中斷（詳細文檔）。
1）創建負載均衡實例
2）配置監聽器和規則
點擊新建HTTP/HTTPS監聽器，選擇需要監聽的端口號，創建監聽器。
創建好監聽器后，還需要配置轉發規則，這里需要輸入域名（支持IPV4地址）、URL路徑和均衡方式等信息。若選擇輸入域名，域名需要和該CLB的VIP已經進行了綁定。
配置好轉發規則后，需要進行綁定后端服務綁定，這里選擇的雲服務器為TKE集群中的節點，端口就是在TKE集群創建工作負載時生成的Service的主機端口。Service的主機端口可以在容器服務 -> 集群 -> 服務與路由 -> Service中查看。
配置完上述步驟之后，通過域名加端口號，就可以訪問到web服務了。此外，如果服務是需要通過https訪問的，還需要設置443端口的監聽，並將http服務重定向到https服務，具體操作可以查看官方文檔。
5、遇到的問題
問題一：當本地推送代碼到CODING倉庫后，交付流水線成功執行，但是集群的pod在更新時一直處於pending狀態，重新訪問頁面不能看到更新。
原因：TKE集群默認采用滾動更新方式更新（只有新的pod運行成功，才會終止原來的pod），這里主要是因為節點的內存不足，所以無法完成pod更新。
解決方法：因為集群節點運行時K8S自身相關組件會占用一部分系統資源，所以在創建集群節點時配置不能太低。
問題二：當本地推送代碼到CODING倉庫后，交付流水線成功執行，但是集群對應的pod沒有觸發更新（即上圖頁面中一直只有舊的pod處於Running狀態）。
原因：每次向鏡像倉庫推送鏡像時不要使用相同的tag，對於同名的tag，會認為是同一個鏡像，所以集群不會進行更新。
解決方法：在Jenkinsfile中構建鏡像時可以使用CI_BUILD_NUMBER變量進行版本標記，這樣每次構建鏡像時鏡像的tag都會不同。
sh "docker build -t vue-web.tencentcloudcr.com/vue/image:${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER} -f ./deploy/Dockerfile ."
問題三：TKE集群創建工作負載后，怎么驗證pod已經在節點上正常運行
解決方法： 方法1：可以在雲服務器控制台找到服務器的公網ip，通過NodePort訪問web服務是否能夠正常訪問
方法2：找到集群節點對應的雲服務器，登錄雲服務器，通過運行kubectl get pod -o wide查看pod是否正常運行
問題四：負載均衡CLB能夠提供流量分發服務，當其中一個節點發生故障時，能夠將流量轉發到正常節點，但是實現過程中，總共包括兩個節點，將其中一個集群節點關機，發現web服務會中斷幾分鍾才能訪問，並且CLB對兩個節點的健康檢查狀態都是異常（正常應該是服務不會中斷，並且一個節點正常，一個節點異常）。
原因：TKE集群創建的工作負載pod實例數量小於節點數量，比如有兩個集群節點，但是只創建了一個pod，這個時候pod只會運行在其中一個節點中，因此，當關機的節點剛好就是pod運行的那個節點時，需要花一些時間在另一個節點上重新創建並運行pod，pod啟動成功后，CLB才會將流量調度到該節點，因此中間會有幾分鍾不能方法。
解決方法：TKE集群在創建pod實例時，有多少節點就應該創建至少多少個pod，比如上面創建了2個節點，就創建兩個pod，並且設置反親和性，這樣能夠保證每個節點至少運行一個pod，當其中一個節點發生故障時，CLB能夠快速將流量轉發到正常節點，不會中斷服務。
問題五：開發時通常會有很多個環境，需要創建不同的鏡像倉庫，怎么修改Jenkinsfile才能自動根據當前分支推送鏡像到對應的鏡像倉庫
解決方法：假設現在有develop，test和master三個不同環境，並且對應三個不同鏡像倉庫，可以在Jenkinsfile加入下面代碼
stage('構建鏡像') {
steps {
echo '構建鏡像...'
script {
switch(env.GIT_LOCAL_BRANCH) {
case 'develop':
sh "docker build -t vue-web.tencentcloudcr.com/vue/image-develop:${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER} -f ./deploy/Dockerfile ."
break
case 'test':
sh "docker build -t vue-web.tencentcloudcr.com/vue/image-test:${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER} -f ./deploy/Dockerfile ."
break
case 'master':
sh "docker build -t vue-web.tencentcloudcr.com/vue/image-master:${env.GIT_LOCAL_BRANCH}-${env.CI_BUILD_NUMBER} -f ./deploy/Dockerfile ."
break
}
}
echo '構建鏡像'
}
}
}
當完成上面的所有步驟之后，只要我們推送代碼到CODING倉庫，就能夠自動執行代碼構建、鏡像構建、推送鏡像和更新TKE集群工作負載等步驟。當我們重新訪問頁面時，就可以看到線上環境已經自動更新啦~