githubでプルリクを出したら自動でHerokuに確認環境を立ち上げる

アドベントカレンダーは７日目になりました。師走！

最近Wordpressを触る機会が多いのですが、テスト環境がない状況が多くてどうにかならないか悶々としておりました。
色々調べてみるとHerokuで実現できそうだったのでまとめてみました。
無料の範囲でやるので制限はありますが、小規模なサイトでは事足りるんではと思われます。

# やりたい事
githubでプルリクを投げたら、自動でHerokuに確認環境が構築される

# やった事
* Herokuの設定
* githubにリポジトリを作成
* Herokuと連動させる（github、パイプライン作成）
* localのdockerで開発して、プルリクを投げる

# Herokuの設定
* アプリを作成
* githubと連係

これをやっておく（省略）

# ClearDBの設定
Herokuのアプリから設定
<img width="1245" alt="スクリーンショット 2017-12-06 21.36.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/e4873951-78e5-1808-c091-6a68f9b20e03.png">
`Resources` の `Add-ons` から追加できる

<img width="478" alt="スクリーンショット 2017-12-06 21.36.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/7a7810a3-dbfa-b448-e64d-6d2260912992.png">

# Herokuの環境変数を追加
`Settings`の`Config Variables` から設定
<img width="1217" alt="スクリーンショット 2017-12-06 21.53.30-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/0ca280f9-6973-7b85-ca1b-b0019e0b26cb.png">
`CLEARDB_DATABASE_URL`に下記のようなURLが記載されているので、それぞれ`Config Vars`に`Add`していく
mysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}/{DB_NAME}?reconnect=true

`wp-config.php` には下記のように追加しておく

```php:wp-config.php
/** The name of the database for WordPress */
define('DB_NAME', getenv('DB_NAME'));

/** MySQL database username */
define('DB_USER', getenv('DB_USER'));

/** MySQL database password */
define('DB_PASSWORD', getenv('DB_PASSWORD'));

/** MySQL hostname */
define('DB_HOST', getenv('DB_HOST'));
```
これで`Config Vars`を利用するようになった

# Herokuにパイプラインを作成
<img width="1226" alt="スクリーンショット 2017-12-06 22.19.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/9ad48408-2657-e60b-5c84-0fcd6e058abb.png">
`Choose a pipeline` → `Create new pipeline` の順にクリック

# パイプラインの設定
<img width="1229" alt="スクリーンショット 2017-12-06 22.25.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/6fe3dc4f-6349-e8ce-bdb8-44199385dcec.png">
`Enable Review Apps...` を選択

<img width="615" alt="スクリーンショット 2017-12-06 22.26.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/8d06c8d1-5a8e-9fd5-5d98-07b3ec4a407c.png">
`Create an app.json File...` をクリックして `app.json`ファイルを作成する

<img width="1218" alt="スクリーンショット 2017-12-06 22.28.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/d091569d-54f4-25be-9503-bd62b5716149.png">
`app.json`のサンプルがページの下に表示されるのでコピーして自分で追加するか、そのまま`Commit to Repo`で追加してしまう

<img width="613" alt="スクリーンショット 2017-12-06 22.29.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/6e40d601-f7ad-852c-2503-54032acaf733.png">
両方にチェックを入れて `Enable` をクリック
これで準備は完了

# あとはプルリクを作成
プルリクがトリガーになり、Herokuでアプリが自動で立ち上がる
下記のように `Deployed` が表示されるのでアクセスしてみる

<img width="1224" alt="スクリーンショット 2017-12-06 22.51.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/98891/eff3c88d-d5e6-36c6-fc54-e802db188f03.png">

# github
下記の感じです
https://github.com/shiotaro/wordpress-test

# その他、改善できそうなところなど
* Herokuの環境変数を使って、ローカルでは `.env` を使っているのでどちらかにあわせたい
    * 右の方法もある http://dackdive.hateblo.jp/entry/2016/01/26/121900
* 無料のDBは容量制限があるので足りない場合はお金を払うか、参照できるDBを作る必要がある（セキュリティーには気をつける）
* メール配信は `SendGrid` を利用すれば良いが今回は対応していない
* CDNを利用することも考える
* ローカルのDockerで開発して、プルリク時にHerokuが立ちあがって確認できる流れ

# まとめ
こんな感じで、Dockerで開発してプルリク時にHerokuに確認環境が自動で立ち上がります。
無料だとDBの容量には問題がありそうですが、ちょっとした確認なら満足ではないでしょうか。
Herokuにはまだ知らない機能がたくさんあるので、引き続きチェックしていきたいと思います。

# 参考になったサイト
https://www.slideshare.net/mookjp/dockerword-press
http://dackdive.hateblo.jp/entry/2016/01/26/121900
http://blog.itoudium.tokyo/post/wp_new/