[Heroku] Bitbucket から CircleCI を使って自動デプロイする

( ノﾟДﾟ)こんにちわ。これは[CircleCI Advent Calendar 2020](https://qiita.com/advent-calendar/2020/circleci) 23日目、かしゆかの誕生日を CircleCIで祝おうのコーナーです(n‘∀‘)η ﾔｧｰｯﾎｫｰ
はい、めでたい。

さて今年は、ゆかちゃんとはまったく縁もゆかりもなさそうなHerokuとCircleCIの共演です。

## Bitbucket からの自動デプロイができない

[HerokuはGithubと連携](https://devcenter.heroku.com/ja/articles/pipelines#github-sync)をして、特定のブランチがコミットされたら、自動的にHerokuへデプロイすることができます。また、PR(Pull Request)と連携する[レビューアプリ](https://devcenter.heroku.com/articles/github-integration-review-apps)機能もあります。Githubさえ使えれば、Herokuの多くの機能と連携して利用できるようになります。

しかし、これらの特徴的機能は残念ながら`Github`「だけ」です。そのほかのVCSでは、連携する機能を持っていません。残念。

Privateがたくさん持てた、わがはいの `Bitbucket` はどうしたら...。

## CircleCI を間に挟んでみよう

そこで、`CircleCI` です。特定のイメージをうまく使えば、好きにコマンドを利用して何でもできる、あの`CircleCI`を使えばどうにかなるのではないか...。先人たちは考えました。

まぁ考えることはみんな同じです。CircleCI の Orbs にも [circleci/heroku@1.2.3](https://circleci.com/developer/orbs/orb/circleci/heroku) が公開されているじゃありませんか。そうです、これをうまく使えさえすれば、`Bitbucket`から、`CircleCI`でテストしたソースコードを`Heroku`へデプロイが可能です。さぁ、やってみましょう(๑•̀ㅂ•́)و✧

流れとしては、こう。あ、すでに Bitbucket と CircleCIは連携済で、プロジェクトが登録されている前提で話を進めます。

1. Heroku の設定を取得する
2. CircleCI へ環境変数を定義する
3. .circleci/config.yml を追加して `main` へ commit&push

## Heroku の設定をもぎ取ってこよう

今回、`Bitbucket` 上の[sample](https://bitbucket.org/oshiire/sample/src/main/)コードを準備しました。この`main`ブランチへコミットしたタイミングで、自動的に`Heroku`へデプロイされる仕組みを準備します。

まず、CircleCIが連携するための`Heroku`側の設定が必要です。

1. デプロイ先の Heroku アプリケーション名
2. Heroku へログインしているユーザの API Key

取得方法です。1. については、言わずもがなと思いますが、`heroku create -a <app_name>` で指定した `<app_name>` や、自動で割り当てられた Heroku アプリケーションの名前そのものです。

Heroku ダッシュボードからは、該当のアプリケーションの`Settings`タブの "App Information" にある 'App Name' がズバリそのものになります。

![Screen Shot 2020-12-22 at 18.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/5dcb1d1f-1449-832b-2512-3901415ad82d.png)

もう一つの API Key は、コマンドを打ってサクッとゲットしましょう。1年間有効なAPI Keyが発行されます。ユーザがパスワードを変更したりすると、このAPI Keyが変わってしまうようなので「あれ、うまくいかない...」みたいになったら、API Keyを再設定した方が良いかもしれません。

```bash
heroku auth:token
 ›   Warning: token will expire 12/10/2021
 ›   Use heroku authorizations:create to generate a long-term token
xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
```

## CircleCI の環境変数を定義する

ここで取得したHerokuの情報を、CircleCIの環境変数へ入力します。

該当するプロジェクトの `Project Settings` 内にある "Environment Valiables" へ設定します。設定する環境変数名は次の二つ。

|環境変数名|定義する内容|
|---|---|
|HEROKU_APP_NAME|Herokuアプリケーション名|
|HEROKU_API_KEY|Heroku API Key|

設定してみると、こんな感じになってることでしょう。

![Screen Shot 2020-12-22 at 18.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/f08a2e9a-e0c8-a68b-a9da-fb4a37f18527.png)

## .circleci/config.yml を追加して `main` へ commit&push

はい、あとは `config.yml` を生成してぶち込んだら終了です。簡単ですね!

```yaml
version: 2.1

orbs:
  node: circleci/node@4.1
  heroku: circleci/heroku@1.2.3

jobs:
  test:
    executor:
      name: node/default
      tag: "14.13.1"
    steps:
      - checkout
      - node/install-packages
      - run:
          command: npm run test

workflows:
  version: 2

  test-and-deploy:
    jobs:
      - test
      - heroku/deploy-via-git:
          requires:
            - test
          filters:
            branches:
              only: main
```

シンプル。`Orbs`を利用すると最小限になって便利ですね。

`Heroku`へのデプロイしているところのコード部分だけ拾ってみると、次の部分です。

```yaml
      - heroku/deploy-via-git:
          requires:
            - test
          filters:
            branches:
              only: main
```

`heroku/deploy-via-git` が `Orbs` で定義されている名前ですね。その中のいくつかの定義を指定しています。`test` ジョブが完了して `main` ブランチがコミットされたときだけに設定してます。ブランチをうまく定義することによって、開発環境とテスト環境、本番環境へのデプロイを分けることも可能ですね。便利。

ちなみに具体的にどのようなコマンドを実行しているかは、`Orbs`を見ていただけると分かります。ちなみに、`heroku` へデプロイしているところのコードは次の通りです。`<<parameters.*>>`のところは環境変数の内容ですね。

```bash
https://heroku:$<< parameters.api-key >>@git.heroku.com/<<parameters.app-name >>.git
```

こんな感じでした、やっほい。