1. 程式人生 > >Gitlab CI&CD 在前端專案自動化構建部署中的實踐

Gitlab CI&CD 在前端專案自動化構建部署中的實踐

引言

現在大部分的公司都搭建了自己的Gitlab,除了Git的程式碼管理能力,Gitlab的CI&CD在專案的持續整合和部署上也盡力提高大家的工作效率。下面用我們專案的例子為大家引薦一下這套工具帶來的便利。

Gitlab CI&CD是什麼
在這裡插入圖片描述
如上官方圖示,可以理解為Gitlab給開發者提供了一項功能,在程式碼提交後自動觸發一段開發者自定義的指令碼,以此來完成諸如但不限於構建部署的工作。

為什麼我們需要使用

  1. 專案業務較多,多個業務並行聯調或測試(不要問我分支怎麼管理的,後面說);
  2. 不斷有新人進入;
  3. 測試機器時常有被更換的風險;
  4. 專案依賴包時常會更新,每個人環境的依賴包小版本可能不一致。

因此我們迫切的需要一個新人低成本或零成本的、快速自動化的構建部署方案。

解決方案

  1. 為環境指定不同的分支,如dev1 代表聯調環境1,test2 代表測試環境2,… ,testN 代表測試環境N。如下圖,各分支與環境的關係
    在這裡插入圖片描述

  2. 利用Gitlab CI&CD工具執行自動化構建,並根據分支部署到不同機器,如上圖,釋出到個環境前都經過了CI階段的自動化構建等操作,線下測試和聯調還可以在CD階段自動部署到對應伺服器

執行步驟

  1. 在倉庫裡面配置.gitlab-ci.yml
  2. 在可以訪問git倉庫的伺服器部署Runner
  3. 在git倉庫網頁上配置對應的Runner

專案配置

配置檔案 .gitlab-ci.yml


在專案的根目錄下建立檔案.gitlab-ci.yml

Keyword Required Description
script yes CI&CD過程需要執行的shell指令碼
stage no 一個job流程,預設test
variables no 定義變數
only no 指定當前job適用的git refs(分支、Tag)列表
except no 與only相反
tags no 通過標籤管理或匹配runner
allow_failure no 指定當前job是否容錯,正常job失敗會跳過後續job流程
before_script no 在當前job執行前執行的shell指令碼
after_script no 在當前job執行後執行的shell指令碼
when no 依賴的上一個job執行什麼狀態後執行當前job, on_success on_failure always manual 預設on_success
dependencies no 指定依賴的job列表,預設順序執行

檢視其他可配置屬性

# 執行job的階段 按順序序列執行
stages:
  - build
  - cleanup
  - deploy

# 自定義階段build的job流程
build: # 自定義名字
  stage: build # 指定這階段操作的名稱
  only: # 指定那些分支會進入該處理流程
    - master # 正式環境
    - pre # 預發環境
    - testN # 測試環境 test1 test2 ... testN
    - devN # 聯調環境 dev1 dev2 ... devN
  variables:
    VERSION: 1.0.10 # 除了後面會說到的私密變數 還可以在這裡定義變數
  before_script:
    # 一些特殊情況需要SSH key的場景,該部分見下文
    # - ...
    # 定義變數 如NODE環境變數
    - NODE_ENV=`if [[ ${CI_COMMIT_REF_NAME:0:3} = "dev" || ${CI_COMMIT_REF_NAME:0:4} = "test" ]]; then echo "development"; else echo "production"; fi`;
  script:
    # 為node modules做快取, 有快取用快取,沒有則你npm install並新增快取
    - PACKAGE_HASH=$(md5sum package.json | awk '{print $1}');
    - mkdir -p ~/builds/cache/node_modules # 使用docker模式時需要配置volume 保證快取起作用 在後面runner部分會提到。
    - NPM_CACHE=~/builds/cache/node_modules/${PACKAGE_HASH}.tar
    - if [ -f $NPM_CACHE ];
      then
        echo "Use Cache";
        tar xf $NPM_CACHE;
      else
        npm install;
        tar cf - ./node_modules > $NPM_CACHE;
      fi
    # npm build
    - echo "NODE_ENV=$NODE_ENV node build/build.js"
    - NODE_ENV=$NODE_ENV node build/build.js
    # upload to CDN
    # - ...
    # docker build
    - echo `docker build -t "$CI_PIPELINE_ID" . | awk -F "Successfully built " '{print $2}'`
    # docker push
    - if [ $NODE_ENV = "development" ]; # 如果需要部署的server的runner在同一個機器則可不必push到倉庫
      then
        docker login dev.hub.xxx.com -u$USERNAME -p$PASSWORD;
        docker tag $CI_PIPELINE_ID dev.hub.xxx.com/namespace/webapp:$CI_COMMIT_REF_NAME;
        docker push dev.hub.xxx.com/namespace/webapp:$CI_COMMIT_REF_NAME;
        docker rmi dev.hub.xxx.com/namespace/webapp:$CI_COMMIT_REF_NAME;
        echo "--------------------------------------------------------------------------";
        echo "dev.hub.xxx.com/namespace/webapp:$CI_COMMIT_REF_NAME";
      else
        # 參考上面then中指令碼
        "--------------------------------------------------------------------------";
        echo "hub.prd.xxx.com/namespace/webapp:$DATE.$CI_BUILD_ID";
      fi

# 開發和測試機部署
clean_testN:
  stage: cleanup
  only:
    - testN
  tags:
    - dc2fe-deploy-testN
  script:
    - docker stop webapp
    - docker rm webapp
  allow_failure: true

deploy_testN:
  stage: deploy
  only:
    - testN
  tags:
    - dc2fe-deploy-testN
  script:
    # - ssh [email protected] "docker stop webapp; docker rm webapp; docker run --name webapp -d -p 8000:8000 dev.hub.xxx.com/namespace/webapp-testN:latest"
    # 或者
    - docker pull dev.hub.xxx.com/namespace/webapp:testN
    - docker run --name webapp -d -p 8000:8000 dev.hub.xxx.com/namespace/webapp:testN

# clean_dev: # dev或其他環境部署配置與上面test環境配置類似
# deploy_dev:

如果

  • 你的CI Runner的執行環境沒有許可權訪問你們公司的Gitlab倉庫(一般使用docker模式的Runner或者專案底下有子模組submodule,且需要在Runner中構建的時候checkout)
  • 當前專案構建完後需要部署到其他伺服器,或者需要執行sshrsync等需要認證命令時

你需要

在本文中你可以認為ssh-agent是一個用來在ssh會話過程中管理你的ssh私鑰,並在git倉庫或伺服器需要ssh key認證的時候自動提供與對應公鑰匹配認證的工具

before-script:
  - eval $(ssh-agent -s)
  # 清除一些系統中複製出現的換行符\r,並重定向到/dev/null防止洩露
  - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
  # 建立~/.ssh目錄,並配置許可權(非root執行的runner)
  - mkdir -p ~/.ssh
  - chmod 700 ~/.ssh

除了自己配置的變數,Runner也提供了一些 預置變數

shell模式的Runner需要新增

  - ssh-keyscan Runner宿主機需要訪問的伺服器hostname(git。xxx.com或IP) >> ~/.ssh/known_hosts

docker模式的Runner可直接關閉ssh登入目標host key檢查

  - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

CI Runner

安裝
Runner的安裝比較簡單,根據官方流程即可, 以Linux x86-64為例

 # 下載gitlab-runner並安裝
 sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
 
# 2. 授執行權
 sudo chmod +x /usr/local/bin/gitlab-runner

# 建立GitLab CI使用者:
 sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash

# 安裝並啟動:
 sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
 sudo gitlab-runner start

配置
註冊專案
在這裡插入圖片描述

  1. 配置專案ci的倉庫地址 如下圖灰色mask部分2
  2. 配置專案唯一標識Token 如下圖灰色mask部分3
  3. 給當前Runner一個描述,或者命名
  4. 配置當前Runner的Tag, 可以多個,tag可以用來管理和關聯專案和Runner,以實現部署到不同伺服器等
    在這裡插入圖片描述
  5. Runner的其他屬性配置, 也可以在介面配置如下圖
    在這裡插入圖片描述
  6. 配置當前Runner的模式,

成功
Alt text
如圖,配置成功後當你提交程式碼到對應配置了CI&CD stage的分支,Gitlab就會自動觸發執行指令碼,當然如圖所示,你也可以直接在介面上重試或新建pipelines

一次提交觸發一次CI&CD即執行一次指令碼對應一個pipeline;一個pipeline對應stages下的所有job;一個stage對應一個job;一個job可以允許失敗,比如我們的例子中,每次清除就得docker容器的時候可能失敗,因為新機器上沒有對應的容器或者其他一些不影響主流程的操作可以新增容錯配置。

結語

  1. 除了給Gitlab倉庫配置CI&CD,同時他也支援其他倉庫如Github等;
  2. Gitlab也定義了一下API可以結合其他工具來執行CI&CD任務;
  3. 如果使用gitlab>=v11的版本還可以根據需要配置Auto DevOps

相關推薦

Gitlab CI&CD前端專案自動化構建部署實踐

引言 現在大部分的公司都搭建了自己的Gitlab,除了Git的程式碼管理能力,Gitlab的CI&CD在專案的持續整合和部署上也盡力提高大家的工作效率。下面用我們專案的例子為大家引薦一下這套工具帶來的便利。 Gitlab CI&CD是什麼 如上

Jenkins配合github實現前端專案自動化構建部署

前言 大家以前寫前端專案部署,可能都是手動執行命令,打包完,然後壓縮,再利用FTP、Xshell等這類的工具上傳到伺服器解壓。也或者你不會操作,你認為這些事情是運維做的,你只需要打包你的前端專案程式碼後發給運維你就不管了。這種方式確實有點low且效率也不高。 現在大

前端專案自動化構建工具——Webpack入門教程

  參考資料:https://www.webpackjs.com/(中文文件)   https://www.webpackjs.com/(官方文件)   首先有必要說明一下,本文側重講解webpack基本配置屬性,不附帶例項,將會以通俗易懂的形式地講解;如若需要例項進行相關練習,可將本文作

gitlab-ci實現前端自動化部署(步驟全面)

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

centos7下使用gitlab+shell實現CI/CD持續集成持續部署

argument shel tro 項目 rman lob b+ pull 部署過程                   centos7下使用gitlab+shell實現CI/CD持續集成持續部署 流程解釋:第一步ci客戶端向gitlab服務器註冊自己,建立通信,

gitlabci/cd釋出專案隱藏帳號密碼

轉載請註明出處:gitlab的ci/cd釋出專案隱藏帳號密碼 為了安全需要,一般專案中不允許包含明文密碼,防止獲取到專案程式碼的人拿到資料庫的帳號密碼,防止帳號密碼洩露。 去掉明文密碼的方式 有很多,比如: 1、使用k8s的secret,參考文章 python專案中通過環境變數的

jenkins+git+maven+centos7自動化構建部署專案(二)

在預設情況下,Tomcat Manager是處於禁用狀態的,需要我們進行相應的使用者配置之後才能使用Tomcat Manager。 Tomcat Manager的使用者配置是在Tomcat安裝目錄/conf/tomcat-users.xml檔案中進行管理的。 我們只需要在tomcat-users節點中配置相

Jenkins實現前端專案自動化整合打包部署

前言: 為了前端專案的工程化,減少專案釋出環境的部署,實現自動化整合打包部署。 本文是針對前端專案和gitlab倉庫程式碼,簡述jenkins實現自動化部署的配置流程。 jen

jenkins+git+maven+centos7自動化構建部署專案(一)

基礎環境         建議使用jdk1.5以上版本  (這裡不做jdk安裝講解,去官網下載jdk下載地址)         下載(jdk-7u45-linux-x64.tar.gz版本) jenkins安裝          執行以下命令:               

使用 Gitlab CI/CD 實現自動化釋出站點到 IIS

說明 這裡先介紹下兩個東西 CI/CD、GitLab Runner,當然在此之前你需要對 git 有所瞭解,關於 git 這裡不做說明,可以自行百度。 首先介紹 CI/CD :隨著我們開發方式的轉變,程式的釋出變得非常頻繁,而其這些釋出操作都是重複的。CI/CD 就是為了使這些操作能變得自動化,那它是怎麼實現

前端初探 Gitlab CI/CD

前言 縱觀人類歷史的發展以及三次工業革命,你會發現利用機器來替代部分人力勞動,將重複的工作自動化從而解放生產力都是發展的必然趨勢,在軟體工程領域也不例外,其中 CI/CD 就是其中一項,那麼什麼是 CI/CD 呢,網上的解釋不要太多,這裡我就直接放一幅 Gitlab 官網的工作流程圖好了: 準備條件 G

jenkins和docker實現自動化構建部署

TE 場景 ins 部署 提交 jenkin 工作 cat 構建 應用場景 程序員開發應用,開發後需要提交svn,然後從svn拉取代碼,進行構建,發布到tomcat中,發布,然後看呈現效果,這樣的工作是頻繁反復的在進行的,浪費了程序員的大量時間,那麽能不能把這些工作自動化

『中級篇』CI/CD持續集成/持續部署(69)

zhong 鏈接地址 語言 view tlab 謝謝 itl 部署 成都 >原創文章,歡迎轉載。轉載請註明:轉載自IT人故事會,謝謝!>原文鏈接地址:『中級篇』CI/CD持續集成/持續部署(69) 從這次課就開始學習CI/CD,結合docker或者是使用k8s來

gitlab CI/CD環境搭建

1.安裝gitlab-runner # Linux x86-64 sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab

Linux專案自動化構建工具---make/makefile

背景    1. 會不會寫makefile,從側面說明了一個人是否具備完成大型工程的能力。    2. 一個工程的原始檔不計其數,其按型別,功能,模組分別放在若干個目錄裡,makefile定義了一系列的規則來指定,哪些檔案需要先編譯,哪些檔案需要重新編譯,

Gradle 5.1 RC1 釋出,專案自動化構建工具

   Gradle 5.1 RC1 釋出了。 該版本包含以下新增特性:依賴性匹配倉庫, 生產環境就緒的 configuration avoidance API, Gradle Kotlin DSL 1.1, 等。 閱讀 Gradle 5.x 升級指

Gradle 5.1 RC2 釋出,專案自動化構建工具

   Gradle 5.1 RC2 釋出了,該 RC 版本針對 5.1 RC1 報告的問題進行了修復: #8036 - Remove history after no-source outputs have been cleaned #8042 - E

Docker安裝Jenkins實現自動化構建部署到Tomcat

安裝Docker 安裝VirtualBox 安裝Jenkins 安裝好docker-toolbox之後啟動Terminal 開啟virtualbox,然後等待下載好boot2docker.iso,下載好之後就可以看到virtualbox就

GitLab CI/CD

1、持續整合(Continuous Integration)         持續整合指的是頻繁的將程式碼整合到主幹,每次整合都通過自動化的構建(包括編譯、釋出、自動化測試)來驗證,它的好處主要有兩個:      &nbs

github+jenkins+maven+docker自動化構建部署

前言 傳統的開發、測試、部署方式,是由開發人員本機或打包機進行打包,將war包提交給測試人員部署,測試通過後,再由實施人員負責部署到預發、生產環境中。中間的銜接不連貫,容易出錯,而且打包、部署存在重複的工作量。自動化構建部署(CICD)就是解決該問題,將從開發