CircleCi超入門 [S3 + CloudFrontでホスト]

概要

今までCodeシリーズを使っていたのですが料金などを考慮した結果CircleCiを試しに使ってみようと思い書きました

説明しないこと

• CircleCiのログイン方法
• サンプルアプリの詳細

構築

今回はS3に置いてあるReactのアプリをCloudFrontで公開する流れになります

CircleCi準備

Set Up Projectを押してセットアップを行う

押すとCircleCiを動かすために必要な**.circleci/Config.yml**を追加する方法を聞かれます

上から

• 対象のブランチに.circleci/Config.ymlを追加
• 新しいブランチを新たに作ってくれて.circleci/Config.ymlをそこのブランチで作ってくれる(動作確認してからmainブランチにマージする流れ)
• テンプレートconfig.ymlを自分で編集して追加する

今回は真ん中を選択する。

新しいブランチができているのでmainブランチにPRを送ってマージする

config.ymlを編集するときは先程のブランチで作業してmainにPRを送る方になる。

config.ymlの編集、説明

version: 2.1

orbs: 
  aws-s3: circleci/aws-s3@3.0.0

jobs:
  build:
    docker:
      - image: circleci/node:latest
    resource_class: medium # ここでスペック指定

    working_directory: ~/repo
    steps:
      - checkout
      - run: npm install   # npmパッケージインストール
      - run: npm run build  # ソースビルド実行
      - persist_to_workspace:
          root: .
          paths: [ '*' ]

  deploy_prod:
    working_directory: ~/repo
    docker:
      - image: circleci/node:14
    resource_class: medium
    steps:
      - attach_workspace: 
          at: .
      - aws-s3/sync: 
          from: ./build
          to: $BUCKET_URL
      - run: aws cloudfront create-invalidation --distribution-id $CF_DIS_PRD --path "/*"
      
  deploy_dev:
    working_directory: ~/repo
    docker:
      - image: circleci/node:14
    resource_class: medium
    steps:
      - attach_workspace: 
          at: .
      - aws-s3/sync: 
          from: ./build
          to: $BUCKET_URL
      - run: aws cloudfront create-invalidation --distribution-id $CF_DIS_DEV --path "/*"
      
workflows:
  version: 2
  s3-deploy:
    jobs:
      - build
      - deploy_prod:
          requires:
            - build
          filters:
            branches:
              only: main

      - deploy_dev:
          requires:
            - build
          filters:
            branches:
              only: develop

Orbs

設定をパッケージ化したもので記述量が少なくカスタマイズ簡単に可能。
今回使うのはS3にアップロードするためのOrbs

resource_class

Dockerのスペックを設定する

persist_to_workspace

今回の場合はbuildした成果物をrootに設置している

attach_workspace

at: . で指定したところに先程persist_to_workspaceに設置した成果物を共有できる

上記2つを使用してジョブカンでの青果物共有ができる

環境変数

S3用のOrbsを使用すると下記4つの環境変数が必要

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION
BUCKET_URL

設定は下記流れでできる

まとめ

• CircleCiのOrbsというものが便利なので検索して積極的に使ってみたほうがいい
• Dockerのスペックをconfig.ymlですぐに編集できるのも便利
• ブランチごとのCICDもconfig.yml1つで設定できるのスマート
• エラーログをCircleCiの画面から確認できてエラー文言が見やすい＆わかりやすい

次はFargate周りのデプロイ甩CICDも書いてみようかな〜