GitHub
Heroku

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

More than 1 year has passed since last update.

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

最近Wordpressを触る機会が多いのですが、テスト環境がない状況が多くてどうにかならないか悶々としておりました。

色々調べてみるとHerokuで実現できそうだったのでまとめてみました。

無料の範囲でやるので制限はありますが、小規模なサイトでは事足りるんではと思われます。


やりたい事

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


やった事


  • Herokuの設定

  • githubにリポジトリを作成

  • Herokuと連動させる(github、パイプライン作成)

  • localのdockerで開発して、プルリクを投げる


Herokuの設定


  • アプリを作成

  • githubと連係

これをやっておく(省略)


ClearDBの設定

Herokuのアプリから設定

スクリーンショット 2017-12-06 21.36.06.png

ResourcesAdd-ons から追加できる

スクリーンショット 2017-12-06 21.36.35.png


Herokuの環境変数を追加

SettingsConfig Variables から設定

スクリーンショット 2017-12-06 21.53.30-2.png

CLEARDB_DATABASE_URLに下記のようなURLが記載されているので、それぞれConfig VarsAddしていく

mysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}/{DB_NAME}?reconnect=true

wp-config.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にパイプラインを作成

スクリーンショット 2017-12-06 22.19.38.png

Choose a pipelineCreate new pipeline の順にクリック


パイプラインの設定

スクリーンショット 2017-12-06 22.25.44.png

Enable Review Apps... を選択

スクリーンショット 2017-12-06 22.26.05.png

Create an app.json File... をクリックして app.jsonファイルを作成する

スクリーンショット 2017-12-06 22.28.26.png

app.jsonのサンプルがページの下に表示されるのでコピーして自分で追加するか、そのままCommit to Repoで追加してしまう

スクリーンショット 2017-12-06 22.29.21.png

両方にチェックを入れて Enable をクリック

これで準備は完了


あとはプルリクを作成

プルリクがトリガーになり、Herokuでアプリが自動で立ち上がる

下記のように Deployed が表示されるのでアクセスしてみる

スクリーンショット 2017-12-06 22.51.15.png


github

下記の感じです

https://github.com/shiotaro/wordpress-test


その他、改善できそうなところなど


  • Herokuの環境変数を使って、ローカルでは .env を使っているのでどちらかにあわせたい



  • 無料の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/