CirclCIの導入について

# はじめに
CirclCIを導入することで、herokuへのデプロイやテストなどを自動で行いたいと思い、今回導入を決めました。初めてのポートフォリオ作成のため、間違いがあればすみません。コメントなどでご教授ください。

# 現状
Dockerを活用したrailsの環境を整えており、herokuでデプロイをしています。これらをCirclCIと連携させていきたいと思います。準備しておくことは、ローカルで.circleci/config.ymlを作成しておいてください。また、git pushも忘れず実行しておいてください。

# 手順
まずは、[CirclCI](https://circleci.com/)に登録してgithubとの連携をしてください。そうするとProjectsの画面にgithubで作成したリポジトリが出てくるので、連携したいリポジトリの「Set Up Project」を選択してください。
![スクリーンショット 2024-12-25 15.47.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3952789/f941599b-5fcb-09b0-6502-5cfad43d6861.png)
次の画面で、リポジトリ名とブランチの選択がありますので、記述したら、再度「Set Up Project」をクリックしてください。
この時点では、まだconfig.ymlに何も設定を記述していないので、circleciは起動しません。

#### .circleci/config.ymlの編集
###### 全体のコード
```php:.circleci/config.yml
version: 2.1

orbs:
  heroku: circleci/heroku@2.0.0

jobs:
  rspec:
    working_directory: ~/kintube
    docker:
      - image: cimg/ruby:3.1.4
    resource_class: small
    steps:
      - checkout
      - setup_remote_docker:
          version: default
      - run:
          name: Setup environment variable
          command: |
            echo "export COMPOSE_FILE=compose.ci.yml" >> $BASH_ENV
      - run:
          name: Start services
          command: docker-compose up -d
      - run:
          name: Setup database
          command: |
            docker-compose exec web rails db:create RAILS_ENV=test
      - run:
          name: Run rspec
          command: docker-compose exec web rspec

  rubocop:
    working_directory: ~/kintube
    docker:
      - image: cimg/ruby:3.1.4
    resource_class: small
    steps:
      - checkout
      - run:
          name: bundle install
          command: bundle install
      - run:
          name: Run rubocop
          command: bundle exec rubocop --parallel

  deploy:
    working_directory: ~/kintube
    executor: heroku/default
    steps:
      - checkout
      - heroku/install
      - run:
          name: Deploy
          command: |
            git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git HEAD:master
      - run:
          name: Run db:migrate
          command: heroku run bin/rails db:migrate -a $HEROKU_APP_NAME

workflows:
  version: 2
  build:
    jobs:
      - rspec
      - rubocop
      - deploy:
          requires:
            - rspec
            - rubocop

```
以下にそれぞれのコードについて記載いたします。まずはrspecの設定です。
```php
rspec:
    working_directory: ~/kintube
    docker:
      - image: cimg/ruby:3.1.4
    resource_class: small
    steps:
      - checkout
      - setup_remote_docker:
          version: default
      - run:
          name: Setup environment variable
          command: |
            echo "export COMPOSE_FILE=compose.ci.yml" >> $BASH_ENV
      - run:
          name: Start services
          command: docker-compose up -d
      - run:
          name: Setup database
          command: |
            docker-compose exec web rails db:create RAILS_ENV=test
      - run:
          name: Run rspec
          command: docker-compose exec web rspec
```
###### 説明
```php
  rspec:
    working_directory: ~/kintube
    docker:
      - image: cimg/ruby:3.1.4
    resource_class: small
```
「rspec:」の部分はjobの名称です。ここのjobでは、rspecについての設定を記述するので、このようになっています。
「working_directory:」では、circleciがどこのファイルを参照するのか指定しています。今回は「kintube」というフォルダを指定しています。
「docker:」の部分はdockerイメージの指定をしています。circleci用のイメージが用意されているので、[そちら](https://hub.docker.com/r/cimg/ruby)を活用します。
「resource_class:」は指定をしなくてもデフォルトで実行されますが、公式で指定した方が良いとのことだったので、今回は予算もかけずに規模の一番小さい「small」を指定しています。

```php
    steps:
      - checkout
      - setup_remote_docker:
          version: default
      - run:
          name: Setup environment variable
          command: |
            echo "export COMPOSE_FILE=compose.ci.yml" >> $BASH_ENV
      - run:
          name: Start services
          command: docker-compose up -d
      - run:
          name: Setup database
          command: |
            docker-compose exec web rails db:create RAILS_ENV=test
      - run:
          name: Run rspec
          command: docker-compose exec web rspec
```
「steps」にはcircleciで行いたいコードを記述していきます。色々と失敗しながら今のコードになったのですが、その経緯は省略して現在のコードの説明をしていきます。
「- checkout」はcircleciがコードをリポジトリから取得します。それによりcircleci上で、rspecやrubocopが起動します。
「- run」は４つあるので、１つずつ説明していきます。「Setup environment variable」はこのまま、docker-composeを実行したら、基本的にcompose.yamlを参照するようになっているので、それをcompose.ci.ymlに変更する設定。COMPOSE_FILEはdocker-composeを行うとそこに何かがあれば取得してくれるので、今後はcompose.ci.ymlが取得される。
>ちなみにcompose.ci.ymlを活用する理由は、circleciでは、volumesとportsの設定をしなくても良いので、少しでも軽量になるのではと考えました。それに加え、開発環境とテスト環境を分けた方が何かしらのエラーも少なくなるのではと考え、このrunを入れています。
「Start services」「Setup database」「Run rspec」の３つはそれぞれrspecを起動するのに必要なコードです。

次にrubocopの説明です。以下はrubocopに関わるコードです。
```php
  rubocop:
    working_directory: ~/kintube
    docker:
      - image: cimg/ruby:3.1.4
    resource_class: small
    steps:
      - checkout
      - run:
          name: bundle install
          command: bundle install
      - run:
          name: Run rubocop
          command: bundle exec rubocop --parallel
```
###### 説明
```php
    steps:
      - checkout
      - run:
          name: bundle install
          command: bundle install
      - run:
          name: Run rubocop
          command: bundle exec rubocop --parallel    steps:
      - checkout
      - run:
          name: bundle install
          command: bundle install
      - run:
          name: Run rubocop
          command: bundle exec rubocop --parallel
```
rubocopはrspecと異なり、アプリケーション環境が不要なため、１つ目の「run:」で実行しているbundle installのみで良いです。2つ名の「run:」では、rubocopを実行しています。

次にherokuの自動デプロイに関する説明です。以下はデプロイに関わるコードです。
```php
orbs:
  heroku: circleci/heroku@2.0.0
~中略~
  deploy:
    working_directory: ~/kintube
    executor: heroku/default
    steps:
      - checkout
      - heroku/install
      - run:
          name: Deploy
          command: |
            git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git HEAD:master
      - run:
          name: Run db:migrate
          command: heroku run bin/rails db:migrate -a $HEROKU_APP_NAME
```
###### 説明
```php
orbs:
  heroku: circleci/heroku@2.0.0
```
「orbs:」の「circleci/heroku@2.0.0」はcircleciで活用できるherokuのパッケージのようなものらしいです。これを活用することで、heroku cliの設定などさまざまなことが実行しやすくなります。
「steps:」の部分にある、- heroku/installで実際にheroku cliがインストールできるらしく、すごく楽にできました。その他のコードはデプロイをするためのコードなので、参照してみてください。

以上で、CircleCIの導入が完了したと思います。後はgit pushを実行したときにcircleciが動き出すことを確認して、エラーがなければ良いのだと思います。

# さいごに
まだまだ駆け出しで、わからないことだらけですが、少しでも誰かのお役に立てれば幸いです。最後まで閲覧いただき、誠にありがとうございました。