通过gitlab ci进行持续集成和持续部署一个前端项目

一 基础环境准备

1. 首先准备一个前端项目，并编写Dockerfile与kustomize，我这里准备了的是公司的一个前端项目

   • 编写Dockerfile

   FROM node:latest
   COPY . /data
   WORKDIR /data/
   RUN npm --registry.npm.taobao.org install && npm run build
   FROM nginx:1.19.4
   COPY nginx.conf /etc/nginx/nginx.conf
   COPY --from=0 /data/dist /data/dist
   CMD ["nginx","-g","daemon off;"]

   • 准备kustomize(有需要可以去https://kustomize.io/学习)

     首先创建准备kustomize环境

   [root@baozexu xiaoneng]# tree kustomize
   kustomize
   ├── base
   │   ├── deployment.yaml
   │   ├── hpa.yaml
   │   ├── kustomization.yaml
   │   └── svc.yaml
   └── overlays
       └── dev
           └── kustomization.yaml

二 . 准备.gilab-ci.yml(有需要学习gitlab ci 语法可以去https://docs.gitlab.com/ee/ci/README.html学习)

• stages:
    - build
    - quality
    - deploy
    - rollback
  
  
  
  quality:sast:
    stage: quality
    tags:
      - baozexu
    variables:
      LANG: zh_CN.UTF-8
    image:
      name: xxxxxxx
      entrypoint: [""]
    cache:
      key: $CI_COMMIT_REF_SLUG-coverage
      paths:
        - coverage.xml
      policy: pull
    script:
      - sonar-scanner -Dsonar.gitlab.commit_sha=$CI_COMMIT_SHA
          -Dsonar.gitlab.ref_name=$CI_COMMIT_REF_NAME
          -Dsonar.gitlab.project_id=$CI_PROJECT_ID
          -Dsonar.gitlab.user_token=$PRIVATE_TOKEN
          -Dsonar.login=$SONAR_TOKEN
    only:
      refs:
      - sit
      variables:
        - $SONARQUBE == "enabled"
  
          
  build:front-node-image:
    image: docker:18.09.9
    tags:
      - baozexu
    dependencies: []
    variables:
      DOCKER_HOST: tcp://localhost:2375
      DOCKER_DRIVER: overlay2
    services:
      - name: docker:18-dind
        command: ["--registry-mirror=https://mirror.ccs.tencentyun.com"]
    before_script:
      - '[ "$DEBUG" = "true" ] && set -x'
      - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
    stage: build
    cache: {}
    script:
      - docker build -t "$CI_REGISTRY/lzwk/value-front:${CI_COMMIT_REF_NAME}" .
      - docker push "$CI_REGISTRY/lzwk/value-front:${CI_COMMIT_REF_NAME}" 
    only:
      - master
      - tags
          
  
  
  
  deploy front node: #(测试环境)
    image: kustomize:3.8.0
    stage: deploy
    tags:
      - baozexu
    dependencies: []
    before_script:
      - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
      - '[ "$DEBUG" = "true" ] && set -x'
      - eval ns=\$${CI_COMMIT_REF_NAME/master/}
      - cd kustomize/overlays/dev
    script:
      - kustomize edit set image $CI_REGISTRY/lzwk/value-front:${CI_COMMIT_REF_NAME}
      - kustomize build . | kubectl apply -f -
    only:
      - master
      - tags
  
   
  #delpoy to production front node: #(生产环境 这里不需要执行所以注释)
    #image: kustomize:3.8.0
    #stage: deploy
   # dependencies: []
    #tags:
      #- production
    #before_script:
      #- cd kustomize/overlays/production
   # script:
     # - kustomize edit set image "$CI_REGISTRY/lzwk/value-front":${CI_COMMIT_REF_NAME}
     # - kustomize build . | kubectl apply -f -
    #only:
      #refs:
        #- tags
      #variables:
        #- $CI_COMMIT_REF_NAME = baozexu
   # when: manual
  
    
  roll back to a previous revision:
    image: bitnami/kubectl:1.18.5
    stage: rollback
    dependencies: []
    tags:
      - production
    before_script:
      - cd kustomize/overlays/production
      - ns=`cat kustomization.yaml| grep namespace | awk '{print $NF}'`
    script:
      - kubectl -n $ns rollout undo deployment/value-front
    after_script:
      - kubectl -n $ns rollout status deployment/value-front
    only:
      refs:
        - tags
      variables:
        - $CI_COMMIT_REF_NAME =~ /^v.*$/
    when: manual

3. 编写完成之后，推送代码到gitlab中

4. 查看流水线是否执行成功

5. 查看pod是否运行

6. 编写ingress 通过ingres访问该服务(前提是k8s中有ingress-controller)

   apiVersion: v1
   items:
   - apiVersion: extensions/v1beta1
     kind: Ingress
     metadata:
       annotations:
       labels:
         app: value-front-web
         version: v1
       name: value-front-web
       namespace: xiaoneng
     spec:
       rules:
       - host: www.baozexu.com
         http:
           paths:
           - backend:
               serviceName: value-front
               servicePort: 8000
             path: /