Circle CI - 前端部分

原创

Hello_Martin 2023-03-04 11:40:42 博主文章分类：Angular2.x ©著作权

文章标签 ci/cd 前端 AWS docker ci 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者Hello_Martin的原创作品，请联系作者获取转载授权，否则将追究法律责任

简单来说，我要实现的功能是当某分支提交代码之后，自动拉取代码，自动打镜像，自动推倒AWS服务器

项目前端是Angular，后端API部分是Python

ci脚本与代码平台关系不大，主要靠dockerfile文件

首先根目录下

Circle CI - 前端部分_前端

文件：

## ====================================================
#
#  Angular CircleCI 2.1 configuration file
#
# ====================================================

version: 2.1
orbs:
  node: circleci/node@4.8.0  #我这个需要老node版本
jobs:
  build-nonprod-web:
    working_directory: /home/circleci/xxx  #这个根据自己实际情况
    executor: node/default
    steps:
      - checkout:
          path: /home/circleci/xxx  #这个根据自己实际情况
      - setup_remote_docker:  
          version: 20.10.17
      - run: npm install
      - run: 
          command: npm run build  
          no_output_timeout: 30m  #我这build 时间很长 所以用了个时间限制
      - run:
          name: Install awscli  #装aws，可以用orbs
          command: |
            sudo apt update
            sudo apt install python3-venv python3-pip
            python3 -m venv venv
            . venv/bin/activate
            pip install awscli
      - run:
          name: Build and push Docker image
          command: |
            eval "docker build -f Dockerfile.nonprod.ca -t $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/groweriq/nonprod/web:build-$CIRCLE_BUILD_NUM . "   #这里Dockerfile.nonprod.ca  是我的docker file名，默认的名字可以不指定-f  具体看docker 文档
      - run:
          name: Push image
          command: |
            . venv/bin/activate
            eval $(aws ecr get-login --region $AWS_DEFAULT_REGION --no-include-email)
            eval "docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/xxx:build-$CIRCLE_BUILD_NUM"
            eval "docker tag $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/xxx:build-$CIRCLE_BUILD_NUM $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/xxx:latest"
            eval "docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/xxx:latest"
workflows:
  build_nonprod_web:
    jobs:
      - build-nonprod-web:
            context: xxx_AWS_CONTEXT  #circle ci上的context，具体看文档。用来配置变量的
            filters:
              branches:
                only: development-circleci  #分支名