使用CircleCI2 0持續集成Angular項目

對於Angular項目，以前處理一個ticket的流程咱們的作法：

1. 啓動項目本地開發 npm start
2. 開發完成，跑代碼語法及規範檢測 npm run lint
3. 跑單元測試 npm run test
4. 構建生產靜態資源 npm run build
5. 打包而後上傳到服務器 tar -zcvf oneportal.gz -C dist .

每處理完一個任務都得搞一遍是否是很麻煩?重複並且效率低

這種事情徹底能夠交給CircleCI來處理。不用本身買服務器，比Jenkins簡單。省去了維護和部署。 CircleCI的好處(截止當前的政策2019.2)：

1. 每個月構建時長1000分鐘之內免費 (基本夠用)
2. 提供的構建環境配置2核CPU / 4G內存，(算是很慷慨了) 據測試若是是在1核1G的主機下執行npm run build很容易報內存不足
3. 有專門的配置文件來定義work flow，並且還很強大。

具體實現

Angular項目根目錄新建.circleci目錄(注意以點開頭)，而後在這個目錄裏面再新建config.yml文件 下面是我正在使用的配置，具體語法能夠見官方介紹

# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
# See: https://github.com/ci-samples/angular-cli-circleci/blob/master/.circleci/config.yml
version: 2
jobs:
  build:
    docker:
      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # specify the version you desire here
      # - image: circleci/node:10.14-browsers
      - image: finleyma/circleci-nodejs-browser-awscli
    working_directory: ~/repo
    # https://circleci.com/docs/2.0/env-vars/
    environment:
      ANGULAR_BUILD_DIR: ~/repo/dist
    steps:
      - checkout
      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-
      - run:
          name: install-dependencies
          command: npm install
      - run: node -v
      - run: npm -v
      - run: npm run lint
      - run: npm run ci-test
      - run: npm run ci-build
      - run: tar -zcvf oneportal.gz -C dist .
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run: aws --version
      - run:
          name: upload-to-aws-s3
          command: 'aws s3 cp oneportal.gz s3://your-aws-bucket/path/ --region us-east-1'

workflows:
  version: 2
  build-deploy:
    jobs:
      - build:
          filters:
            branches:
              only: daily-build
複製代碼

須要解釋幾點：

1. 使用的Docker鏡像是finleyma/circleci-nodejs-browser-awscli，這是我基於CircleCI的鏡像又加入了awscli工具。這個鏡像包含了node10, Chrome(爲了跑單元測試), Python2.7(爲了安裝AWS CLI), AWS CLI(爲了上傳打包後的靜態資源)
2. 大體流程就是開頭說的，只不過爲了統一環境咱們的項目是在Docker容器裏跑測試和構建。經過以後將打包的待發布的靜態資源上傳到AWS存儲。 還有配置文件裏限制了分支，只有往daily-build分支上合併代碼纔會觸發CircleCI的構建。
3. 其中npm run ci-test和npm run ci-build 須要在項目的package.json定義好，加入了一些參數，好比不輸出過程，和加入環境參數配置

"start": "npm run proxy",
     ...
    "build": "ng build --prod",
    "test": "ng test --configuration=testing",
    "ci-build": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --configuration=dev --watch=false --progress=false",
    "ci-test": "ng test --configuration=testing --watch=false --browsers=ChromeHeadless --progress=false",
    "lint": "ng lint",
複製代碼

4. 須要在CircleCI後臺配置AWS的Key和Secret。

固然，你能夠直接經過SSH將項目傳到站點服務器部署。也須要在後臺配置下訪問服務器的Key。

效果：