CircleCIのOrbに入門してみた

　現在の職場ではCircleCIを使ってCI/CDを実現しているのですが、私自身あまりこの部分を担当したことがなく、そのことについてずっと危機感を覚えていました。そんなとき、Twitter上でこんなツイートを見つけました。

https://twitter.com/CircleCIJapan/status/1506866927087800321

CircleCI、Dockerコンテナ……ちょうど興味のある分野でした。Herokuにデプロイというのも、あまりハードルが高すぎず、私のような初心者でもとっつきやすい印象があったので、4/1(金）のイベントに参加してみました（プレゼントのボトルがほしかったというのも背景にあります笑）。

以下は、イベントに参加したときに得た知識や、抱いた感想をまとめたものになります。


## Orbとは？
> CircleCI Orb とは、ジョブ、コマンド、Executor などの、パラメーター化および再利用が可能な設定要素をまとめた共有可能なオープンソースパッケージです。

[引用元公式ページ](https://circleci.com/docs/ja/2.0/orb-intro/#:~:text=CircleCI%20Orb%20%E3%81%A8%E3%81%AF%E3%80%81%E3%82%B8%E3%83%A7%E3%83%96,%E3%81%AA%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%A7%E3%81%99%E3%80%82)

 CircleCIを使う目的というのは、自動テストや自動デプロイを継続的に実施することで、スムーズな開発体験を実現したい、というのが背景にあると思います。そしてこれを実現するためには、CI/CDのための設定ファイルが、開発者にとって管理しやすいことも大事な要素のはずです。

　一方で、CircleCIの設定ファイルであるconfig.ymlは、言ってしまえば自由に記述することができてしまいます。結果的にCI/CDが実現できていれば、チームにとっての正がそのconfig.ymlになってしまい、リファクタしたり、追記修正したりするのがちょっと怖くなってしまいますよね（自分がいじったせいで、テストやデプロイがうまくいかなくなったら怖いですよね）。だから結果的に、そのあたりが詳しい開発者が主担当となってしまって、知見の共有ができなかったり、「オレオレconfig.yml」が出来上がったりしてしまうこともあると思います。

　しかしOrbを使えば、config.ymlをもっとすっきりさせることができます。考えてみれば、デプロイやテスト実行などの手順は、各プロジェクトによってそこまで差異がないはずです。そういう共通化できそうな部分をひとまとまりにして、プロジェクトを横断して利用できるようにしたものがOrbです。

　私の現場ではOrbをあまり使っておらず、例えばCIに失敗したときのSlack通知用に利用しているくらいでした。ちなみに、奇しくもそのorbを追加したのは私です笑（とは言え仕組みはまったく理解していませんでした。。。）。今回もくもく会に参加してみて、orbについて入門し、今後のCI/CD環境整備に役立ててみたいというのが狙いです。


## ハンズオンでHerokuに自動デプロイできるようにした

下記は、もくもく会の資料を参考に、ハンズオンで自分用に記述したものの一部抜粋です。config.ymlを覗いてみましょう。

```yaml:config.yml一部抜粋
version: 2.1

orbs:
　　　　docker_orb: circleci/docker@2.0.3
  heroku_orb: circleci/heroku@1.2.6

jobs:
  build-and-deploy:
    executor:
      name: docker_orb/machine
      dlc: true
    steps:
      - checkout
      - heroku_orb/push-docker-image:
          app-name: $CIRCLE_PROJECT_REPONAME
          process-types: web
      - heroku_orb/release-docker-image:
          app-name: $CIRCLE_PROJECT_REPONAME
```
上記は今回利用するheroku・dcokerのorbとjobsの記載です。
[公式](https://circleci.com/developer/ja/orbs/orb/circleci/heroku)に行くと、各orbの内容やコマンドの詳細を確認することができます。
例えば、`heroku_orb/push-docker-image`というコマンドは、
> Push a Docker image to the Heroku Docker registry.

と記載があり、読んで字のごとく、HerokuのDocker registoryにイメージをプッシュしてくれるものになります。元となるコマンドソースを覗いてみると、なんだか長い処理が、、、こういう長ったらしい記述をorbだけで表現できるのは大変便利ですね。そして公式ドキュメントに沿って適切なenv情報を渡せば、あとはよしなにやってくれるわけです。

事前にCircleCIに必要なenvを登録しておきます。

![スクリーンショット 2022-04-10 18.12.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400584/1c00d1d0-5eaa-bce3-44e8-6a71bad10163.png)

これでバッチリですね。ちなみにここで一つポイント。先ほどの`config.yml`に記載されていた`$CIRCLE_PROJECT_REPONAME`の情報がありません。。。これはCircleCIで定義済みの環境変数となり、いちいち自分で設定しなくても良いものになります。これも便利ですね。定義済み環境変数については[こちら](https://circleci.com/docs/ja/2.0/env-vars/#built-in-environment-variables)をご確認ください。

諸々の設定に関する説明を省いて恐縮ですが、とりあえず自分の修正内容がgithubにPushしただけで、Herokuに反映されるか、確認してみましょう。
`index.ejs`を少し修正してみます。

```diff_html:index.ejs
<!DOCTYPE html>
<html>

<head>
  <title>
    <%= title %>
  </title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <h1>
    <%= title %>
  </h1>
  <p>Welcome to <%= title %>
  </p>
-
+ <h3> hello hikaru !! </h3>
</body>

</html>

```
pushしてみましょう。
```bash:bash
git add .
git commit -m'add my name'
git push origin HEAD
```

CircleCIのPipelinesを覗きにいってみましょう。
![スクリーンショット 2022-04-10 18.29.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400584/c496f4a4-5bbd-94ea-e064-845fe071680c.png)
ぐるぐる回っていますね。。。
![スクリーンショット 2022-04-10 18.32.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400584/90dff1aa-bb39-2622-babc-33a2528ed6a1.png)

終わりました！　きちんとデプロイされて、修正内容が反映されたのか、アプリを確認しましょう。

![スクリーンショット 2022-04-10 18.35.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400584/9198e25a-b8d5-4c25-ca42-56de3f16577f.png)

おお！きちんと反映されていました！ orbを使うと非常に簡単ですね。

### 感想

CI/CDを秘伝のタレ化しないためにも、orbという共通化の手段をどんどん使っていくのもいいかもしれません。config.ymlの肥大化を防ぐこともできます。まずは自分たちのプロジェクトにおいてどんなorbが適用できるかを整理していくのがいいと思います。

そしてこのorbは自作することもできるそうです。こちらのもくもく会にも参加してみたいですね。

https://twitter.com/CircleCIJapan/status/1512233790210560002?s=20&t=8eGFsgMR9BjidY92_4ebxQ

orbを使いこなして快適なCI/CDライフを楽しみたいですね！（なんだか宣伝っぽい終わり方になってしまいました。。）