Docker環境でRspecとRubocopを入れる場合のGithubとCircleCIの接続方法

環境
---
Mac0S Big Sur 11.5.2
ruby 3.0.2
rails 6.1.4
docker 20.10.6
MySQL 8.0.27

はじめに
---

Docker環境でRspecとRubocopを入れるまでの記事は多くあったのですが、その後GithubとCircleCIを接続する説明が書いてある記事はなかったので書くことに決めました。

RspecとRubocopのインストール方法はこちら
[Rspecのインストール方法](https://qiita.com/minoppp411/items/50f8599a3229d146c85c)
[Rubocopのインストール方法](https://qiita.com/minoppp411/items/bf82a0a3f794e70ab1b4)

CircleCIの導入と自動テスト
---
まず、[CircleCIのサイト](https://circleci.com/ja/vcs-authorize/)に飛んでGithubでログインし、CircleCIとGithubを接続します。

そして、テキストエディタで自分のプロジェクトのすぐ下（テキストエディタのファイルの一番上)に`.circleci`というディレクトリを作成し、この中に`config.yml`というファイルを作成します。

####こんな感じ

![スクリーンショット 2021-11-05 13.56.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1340036/a14ac722-9a6c-093c-e902-e4a7ed7ae31f.png)

`config.yml`のファイルの中身は以下です。
今回はビルドとテスト、Herokuにデプロイまでできるように書きました。
RspecとRubocopの記述も書いてあります。

```ruby:.circleci/config.yml
version: 2.1
orbs:
  ruby: circleci/ruby@1.1.2
  heroku: circleci/heroku@1.2.3

jobs:
  build:
    docker:
      - image: circleci/ruby:3.0.2
    working_directory: ~/minoirofake
    steps:
      - checkout:
          path: ~/minoirofake
      - ruby/install-deps

  test:
    docker:
      - image: circleci/ruby:3.0.2
      - image: circleci/mysql:8.0
        environment:
          MYSQL_ROOT_PASSWORD: password
          MYSQL_DATABASE: rails-front-demo-db
    environment:
      BUNDLE_JOBS: "3"
      BUNDLE_RETRY: "3"
      APP_DATABASE_HOST: "127.0.0.1"
      RAILS_ENV: test
    working_directory: ~/minoirofake
    steps:
      - checkout:
          path: ~/minoirofake
      - ruby/install-deps
      - run:
          name: Database setup
          command: bundle exec rails db:migrate
      - run:
          name: rspec
          command: |
            bundle exec rspec --format RspecJunitFormatter \
                              --out test_results/rspec.xml \
                              --format documentation
      - run:
          name: Rubocop
          command: bundle exec rubocop
      
      - store_test_results:
          path: test_results

  deploy:
    docker:
      - image: circleci/ruby:3.0.2
    steps:
      - checkout
      - setup_remote_docker:
          version: 20.10.6
      - heroku/install
      - run:
          name: heroku login
          command: heroku container:login
      - run:
          name: push docker image
          command: heroku container:push web -a $HEROKU_APP_NAME
      - run:
          name: release docker image
          command: heroku container:release web -a $HEROKU_APP_NAME
      - run:
          name: database setup
          command: heroku run bundle exec rake db:migrate RAILS_ENV=production -a $HEROKU_APP_NAME
      
workflows:
  version: 2
  build_test_and_deploy:
    jobs:
      - build
      - test:
          requires:
            - build
      - deploy:
          requires:
            - test
          filters:
            branches:
              only: main
```
####環境変数の設定

その後.gitignoreに指定されているmaster.keyというディレクトリの中に入っている数字の羅列を環境変数として設定します。これをしないとrailsがうまく動かないらしいです。

```
$ heroku config:add RAILS_MASTER_KYE=‘master.keyの中の数字’ -a 自分のアプリケーション名
```
そしてgitにpushします。

REDだとこれ

![スクリーンショット 2021-11-05 14.10.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1340036/b58d73b3-a0aa-d6ef-1b2e-2cf37735c352.png)

GREENだとこれ
![スクリーンショット 2021-11-05 14.10.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1340036/1f0fbbbb-0167-df13-b63b-d065897eee6b.png)

私はDockerのバージョンとHeroku Loginのところでエラーになりました！
まずDockerのバージョンエラーについて
現在(2021/11/5時点)ではDocker Engine20.10.7までしかサポートしてないらしいです。
それまでは20.10.8を使っていたのでダウングレードし、20.10.6にしました。これで解決。

Docker環境でHerokuとCircleCIを接続する方法
---
次にHeroku Loginのところで起こったエラーについて
[公式ドキュメント](https://devcenter.heroku.com/categories/deploying-with-docker)にもあるとおり、まず`heroku.yml`というディレクトリを作ります。Gemfileとか.gitignoreと同じ階層でいいです。

```ruby:heroku.yml
build:
  docker:
    web: Dockerfile
run:
  web: bundle exec puma -C config/puma.rb
```
アプリケーション側の設定はこれで完了です。

ではHeroku側の設定をしてデプロイしていきましょう。

Herokuにアプリケーションを作ります。この時、Githubや他の設定したアプリケーション名と同じでないとpushできないので注意してください。

```
$ heroku create アプリケーション名

Creating app... done, ⬢ *******
https://******.herokuapp.com/ | https://git.heroku.com/*******.git
```
今回DockerコンテナをHerokuにのせるので、Heroku側でコンテナにアプリのStackをセットします。

```
$ heroku stack:set container
```
さらに、sshkeyを発行し
公開鍵を
https://dashboard.heroku.com/account
に登録

これでデプロイするための設定は完了しました。

次に、circleCI側の設定をします。

CircleCIのダッシュボードのプロジェクトの一番右のボタンを押すとproject settingが出てくるのでこちらをクリック

![スクリーンショット 2021-11-05 14.22.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1340036/c2b7cc93-fcdf-1f10-951e-b74675b8e396.png)

Add VariablesからHEROKU_API_KEYとHEROKU_APP_NAMEを設定します。


![スクリーンショット 2021-11-05 14.23.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1340036/da877a88-bfc9-30f0-ac7a-5822b19675c0.png)

注意しなければならないのは、私の場合だけなのかもしれないですが、HEROKU_API_KEYをHerokuのサイトに書いてあるAPIKEYを入れても接続がうまくいかなかったことです。
なので、HEROKU_API_KEYには

```
$ heroku auth:token
```
とターミナルで打って出てきた数字を入れてください。

設定は以上です。
これで、

Githubへpush → CircleCiが自動でテスト → パスすればHerokuに自動でデプロイ

という風に動きます。

最後に
---
自動でデプロイができるようになればかなり楽になります。
私は初めてのポートフォリオ作成の第二段階でGithubとCircleCIの接続をやる予定でしたが、実際には第一段階の実装前にやりました。早く入れてよかったと思っているのでみなさんも早い段階で入れることをオススメします。

記事どおりやってもうまくいかない場合
---
https://qiita.com/sizukutamago/items/76d3ca5d37b1b2bbcd1b

こちらのサイトを参考にしてください。

役に立つ記事
---
https://circleci.com/docs/ja/2.0/add-ssh-key/

https://qiita.com/wakahara3/items/52094d476774f3a2f619

参考にした動画
---
https://youtu.be/bmXoupfX_r0