LoginSignup
5

More than 5 years have passed since last update.

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

Posted at

アドベントカレンダーは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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5