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

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


## 説明しないこと
- CircleCiのログイン方法
- サンプルアプリの詳細

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

### CircleCi準備
Set Up Projectを押してセットアップを行う

![スクリーンショット 2022-06-26 13.03.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501320/ff407e9b-30fb-708e-f977-aa043cb0457c.png)

押すとCircleCiを動かすために必要な**.circleci/Config.yml**を追加する方法を聞かれます
![スクリーンショット 2022-06-26 13.14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501320/38bbc763-f5ab-b462-12fc-2376491fb685.png)

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

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

新しいブランチができているのでmainブランチにPRを送ってマージする
![スクリーンショット 2022-06-26 13.22.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501320/011f042d-008e-d4f4-f574-d167e6b85478.png)

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

### config.ymlの編集、説明

```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
```

設定は下記流れでできる
![スクリーンショット 2022-06-26 14.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501320/140e2e46-162b-3ee3-b189-da082bd22df6.png)

![スクリーンショット 2022-06-26 14.06.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501320/b9a691d1-7500-c3b5-abad-be0fde5b54f5.png)

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


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