天天看點

Gitlab 配置前端自動化部署

前言

本文将介紹使用gitlab+gitlab-runner實作前端自動化部署的基本步驟:

  • gitlab開啟自動化
  • 使用docker-compose 安裝gitlab-runner
  • 注冊gitlab-runner到 gitlab中
  • 編輯.gitlab-ci.yml
  • 編輯環境變量

gitlab開啟自動化

進入項目=>設定=>CI/CD=>自動化=>自動部署到預釋出環境,手動部署到生産環境=>儲存更改

Gitlab 配置前端自動化部署

檢視runners

Gitlab 配置前端自動化部署

使用docker-compose 安裝gitlab-runner

vi docker-compose.yml
           

增加配置内容

version: '3' 
services:
    runner:
      image: 'gitlab/gitlab-runner:v12.4.0'
      container_name: gitlab-runner
      privileged: true
      restart: always
      volumes: 
        - ./config:/etc/gitlab-runner
        - /var/run/docker.sock:/var/run/docker.sock

           

運作gitlab-runner

docker-compose up -d
           

注冊gitlab-runner到 gitlab中

執行指令

docker exec -it gitlab-runner gitlab-runner register
Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )
#輸入你的gitlab位址,需檢查容器間後容器的網絡互通性  
Please enter the gitlab-ci token for this runner
#gitlab的token(在gitlab的Admin Area中) 或者倉庫的token(倉庫->設定->Runner)
Please enter the gitlab-ci description for this runner
# 描述資訊
Please enter the gitlab-ci tags for this runner (comma separated):
#可以為空,後續修改
Please enter the executor: parallels, shell, ssh, virtualbox, docker+machine, docker-ssh+machine, docker, docker-ssh, kubernetes:
#選擇執行器,非常重要的步驟,這裡選擇docker(這樣就是docker in docker 了)
Please enter the Docker image (eg. ruby:2.1):
#docker:stable
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!
           

注冊成功後如下圖所示:

Gitlab 配置前端自動化部署

編輯.gitlab-ci.yml

自動化部署有以下幾個步驟

  • 0.配置ssh免密碼登陸
  • 1.下載下傳node鏡像
  • 2.npm install 項目依賴
  • 3.npm run build 打包項目
  • 4.rsync 同步到服務端
  • 5.執行站點更新腳本
image: node:6.9.0
cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/  #緩存node_modules
stages:
  - build
  #- test
  - deploy

master-build:
  stage: build
  script:
    - dir
    #- npm config set registry https://registry.npm.taobao.org
    - npm install
    - npm run build
    - dir
  only:
    - master
  artifacts:
    expire_in: 1 week
    paths:
      - dist              #提供可下載下傳
master-deploy:
  stage: deploy
  script:
    - mkdir -p ~/.ssh
    - echo "$TEST100_DEPLOY_SSH" >> ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    #- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete dist/ "$TEST100_DEPLOY_USER"@"$TEST100_DEPLOY_HOST:"$TEST100_DEPLOY_PATH"
    - sh $TEST100_UPDATE_SHELL
  only:
    - master
           

編輯環境變量

進入項目=>設定=>CI/CD=>變量=>新增所需環境變量并儲存

Gitlab 配置前端自動化部署

至此前端的自動化部署已經完成,開發者送出代碼到主分支即觸發自動化部署

繼續閱讀