Github の masterブランチへ commit が行われたら CircleCI に Heroku へのデプロイを実行させる

# はじめに

Githubでソースの管理を行って、Herokuでアプリを動かしている場合、
**Githubへのpush**と**Herokuへのデプロイ**のために、

```
$ git push origin master
$ git push origin heroku
```

のようなコマンドを実行しているケースがあると思われます。

本投稿では、**Github の masterブランチへ commit が行われたら CircleCI に Heroku へのデプロイを実行させる**ための手順を紹介します。

# もくじ
1. CircleCIにProject(リポジトリ)を登録
2. Github と CircleCI を連携させる
3. CircleCI と Heroku を連携させる

# 手順

## 1. CircleCIにProject(リポジトリ)を登録

### 1.1 CircleCIにSignUp

[CircleCI](https://circleci.com/)を利用したことがない場合は、SingUpします。
SignUpする際にGithubアカウントを指定することによってリポジトリをCircleCIのProjectとして登録出来るようになります。

![circleci01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/99728c0c-2c43-9fa9-a3bd-894fd28300f6.png)
![circleci02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/b5cf7488-2023-922f-894f-b7b62da72a59.png)
![circleci03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/a82dc535-304a-1e07-c859-ba70922d96c2.png)

### 1.2 CircleCIにProjectとしてリポジトリを登録

HerokuへデプロイさせたいソースのリポジトリをCircleCIにProjectとして登録します。
「Start Building」ボタンをクリックしたタイミングでリポジトリに`.circleci/config.yml`が存在しないとビルドが失敗しますが、問題ありません。

![circleci04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/7771c5d5-42de-81f4-e179-30c081d6f779.png)

![circleci05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/2d341831-aa50-9779-b842-e96b3258c563.png)

## 2. Github と CircleCI を連携させる

### 2.1 リポジトリに`.circleci/config.yml`を追加

GithubとCircleCIが連携できてることを確認するために、リポジトリに`.circleci/config.yml`を追加します。

```yml:.circleci/config.yml
# Use the latest 2.1 version of CircleCI pipeline processing engine, see https://circleci.com/docs/2.0/configuration-reference/
version: 2.1

# Use a package of configuration called an orb, see https://circleci.com/docs/2.0/orb-intro/
orbs:
  # Declare a dependency on the welcome-orb
  welcome: circleci/welcome-orb@0.3.1

# Orchestrate or schedule a set of jobs, see https://circleci.com/docs/2.0/workflows/
workflows:
  # Name the workflow "Welcome"
  Welcome:
    # Run the welcome/run job in its own container
    jobs:
      - welcome/run
```

### 2.2 リポジトリをcommitして、Githubへpush

`.circleci/config.yml`の追加をcommitして、Githubへpushします。

```
$ git add  .circleci/
$ git cm -m 'Add .circleci/config.yml' 
$ git push origin master
```

### 2.3 CircleCIでビルドが実行されることを確認

GithubへのcommitをトリガーにCircleCIがビルドを実行するので、CircleCIのコンソールでビルドが実行→成功したことを確認します。

![circleci10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/716b15b5-4030-d308-8960-0b589b9663aa.png)


## 3. CircleCI と Heroku を連携させる

### 3.1 Heroku の API token を取得

**Heroku CLI**で CircleCIからのデプロイで必要となる API token を取得します。

```
$ heroku auth:token
 ›   Warning: token will expire MM/DD/YYYY
 ›   Use heroku authorizations:create to generate a long-term token
xxxx-xxxx-xxxx-xxxx-xxxx
```

### 3.2 CircleCI で 環境変数を設定

CircleCIのコンフィグでHerokuへのデプロイに必要な環境変数を設定します。

`BUILD SETTINGS > Environment Values`

key | value 
:--- | :--- 
HEROKU_APP_NAME | herokuアプリ名
HEROKU_API_KEY | API token

![circleci11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/b4e6ee7f-6b64-1be5-3389-71730d3a10c3.png)
![circleci12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/d7459d9a-7fcd-52e0-ae6c-486872366629.png)
![circleci13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/ce55ecdf-b1bb-79c7-1e90-90da5e5a645e.png)
![circleci14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/6a47b7b6-1a4c-64c8-0948-eaa40baa319d.png)
![circleci15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/76bd4681-713d-13f2-3cae-a4aefbdced26.png)

### 3.3 `.circleci/config.yml`を編集

Github の masterブランチへ commit が行われたら CircleCI に Heroku へのデプロイを実行させるように`.circleci/config.yml`を編集して、Githubへpushします。

```yml:.circleci/config.yml
version: 2.1
orbs:
  heroku: circleci/heroku@0.0.8
workflows:
  heroku_deploy:
    jobs:
      - deploy
jobs:
  deploy:
    executor: heroku/default # Uses the basic buildpack-deps image, which has the prerequisites for installing heroku's CLI.
    steps:
      - checkout
      - heroku/install # Runs the heroku install command, if necessary.
      - heroku/deploy-via-git: # Deploys branch to Heroku via git push.
          only-branch: master # If you specify an only-branch, the deploy will not occur for any other branch.
```

```shell-session
$ git cm -am 'Update .circleci/config.yml'
$ git push origin master  
```

### 3.4 Herokuへデプロイされたことを確認

CircleCIのコンソールでビルドが成功したことを確認

![circleci20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141934/9fef1dd7-6556-1041-d538-e746504b8451.png)

Heroku のログからデプロイが実行されたことを確認

```shell-session
$ heroku logs --source app --dyno api

2019-06-18T05:13:41.000000+00:00 app[api]: Build started by user xxxxx@gmail.com
2019-06-18T05:14:06.909755+00:00 app[api]: Deploy xxxxx by user xxxxx@gmail.com
2019-06-18T05:14:06.909755+00:00 app[api]: Release vxx created by user xxxxx@gmail.com
2019-06-18T05:14:13.000000+00:00 app[api]: Build succeeded
```

# 注意事項

[CircleCIの公式ドキュメント](https://circleci.com/docs/2.0/deployment-integrations/#heroku)では**orbs**に`heroku@1.0.0`が指定されているが、本投稿の執筆時点では`heroku@1.0.0`は存在しないバージョンのため、ビルドエラーになった。

リリース済みの最新バージョンを[確認](https://circleci.com/orbs/registry/orb/circleci/heroku)したところ、`0.0.8`となっていたので、本投稿ではこのバージョンを利用した。

```yml:.circleci/config.yml
version: 2.1
orbs:
  heroku: circleci/heroku@1.0.0
workflows:
  heroku_deploy:
    jobs:
      - heroku/deploy-via-git
```

# 参考

- [Heroku CLI Authentication \| Heroku Dev Center](https://devcenter.heroku.com/articles/authentication#retrieving-the-api-token)
- [Configuring Deploys \- CircleCI](https://circleci.com/docs/2.0/deployment-integrations/)
- [CircleCI Orb Registry](https://circleci.com/orbs/registry/)
- [CircleCI Orb Registry \- circleci/heroku](https://circleci.com/orbs/registry/orb/circleci/heroku)