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

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

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

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

HerokuはGithubと連携をして、特定のブランチがコミットされたら、自動的にHerokuへデプロイすることができます。また、PR(Pull Request)と連携するレビューアプリ機能もあります。Githubさえ使えれば、Herokuの多くの機能と連携して利用できるようになります。

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

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

CircleCI を間に挟んでみよう

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

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

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

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

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

今回、Bitbucket 上のsampleコードを準備しました。この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' がズバリそのものになります。

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

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

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

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

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

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へのデプロイしているところのコード部分だけ拾ってみると、次の部分です。

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

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

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

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

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