HerokuのGitHub連携を使ってPipelineとReview Appsでスムーズな開発環境を作る
先日開催された、 PHPer Loves Heroku #1 にて、Herokuでの開発環境の作り方を発表してきました。
半分以上、その場でデモをさせてもらったのですが、その内容をこちらでも紹介させて頂きます。
全体像
全体像としては以下のような構成になる想定です。
GitHub
Herokuと連携し、ソースの管理はGitHubで行います。
Review Apps
GitHubにプルリクエストを出すと自動的にHeroku側にアプリが立ち上がる機能です。
マージ前にブラウザ上から変更点を確認することが出来ます。
Staging (Heroku)
GitHubのmasterリポジトリにPushされると、HerokuのStagingアプリに自動的にdeployされるようにします。
これにより、直接HerokuにはPush、deployする必要がなくなり、安全です。
Production (Heroku)
本番へは、HerokuのPipelineを利用し、ブラウザ上からPromoteボタンをクリックする事でリリースすることが出来ます。
Stagingの環境がそのまま本番へ反映されるため、反映漏れなどが起こることはありません。先祖返りなども心配いりません。
また、エンジニアでなくても、ディレクター側で最終的なリリースが可能です。
構築
Heroku
Heroku側でアプリの作成を行います。
アプリの作成
まずは本番公開用のアプリを作成します。Herokuのサイト上から、create new app
をクリックし、作成します。
適当なアプリ名を記入し、create app
をクリック (記入しなかった場合はランダムな名前が割り振られます)。
BuildPack
今回は、PHPのアプリを作成するので、buildpackにphpを指定します。buildpackを指定することで、そのアプリをどの言語を使用するかを指定することが出来ます。
Setting
から、Buildpacks
のエリアにある、Add buildpack
をクリックします。
今回はPHPアプリを使用しましたので、PHPを選択して、Save changes
をクリックします。
これで次回のdeployからこのアプリはPHPのアプリとして動作するようになりました。
(buildpackは指定をしなくても動作させる事は可能ですが、指定しておいた方がよいでしょう。)
devアプリの作成
同じ方法で開発用のアプリを作成します。今回はtanuki-dev
で作成しました。
Pipeline
作成した上記のアプリ2つを、pipelineで接続します。
Herokuのトップから、Create new pipeline
をクリックします。
適当に名前をつけて、Create pipeline
をクリックします。
STAGINGとPRODUCTIONが表示されるので、それぞれに先程作ったアプリを紐付けます。
紐付けた後。
これで開発用のアプリから、本番用のアプリへリリースする準備が出来ました。
ソースのアップ
アップするソースを用意します。
Herokuにアップする場合には、以下のファイルが必要となります。
- Procfile : ドキュメントルートの設定などをするファイル
- composer.json : PHPの各種設定を行うファイル
composer.json
はPHPのバージョンやインストールするエクステンションなどを指定出来るものですが、今回は特に何も入れないでおきます。
{}
Procfile
ではドキュメントルートを指定しておきます。今回は、public
フォルダをドキュメントルートとしました。
web: vendor/bin/heroku-php-apache2 public/
GitHub
ファイルをアップするためのリポジトリを作成します。
GitHubのサイト上から、 New repository
をクリックしします。
適当なリポジトリ名でリポジトリを作成します。Herokuのアプリと近い名前とするとわかりやすいでしょう。
先程用意したソースを、作成したリポジトリにpushします。
$ git init
$ git add .
$ git commit -m 'first commit'
$ git remote add origin git@github.com:k-usk/tanuki.git
$ git push origin master
Heroku-GitHub連携
開発用のアプリをGitHubと接続し、先程作成したGitHubのリポジトリにpushされるとHerokuに自動的にdeployされるように設定します。
Herokuに戻り、先程作成した開発用アプリの、Deployページ内の、Deployment method
からGitHubを選択します。
GitHubとの連携が済んでいない場合は接続させておきます。
連携済みの場合はリポジトリの検索が出来るようになっているので、ここから検索し、対象のリポジトリと連携させます。
自動deploy
接続後、自動deployの設定をします。
Automatic deploys
の項目から、自動dployさせたいブランチを選択し、Enable Automatic Deploys
をクリック。今回は、master
ブランチと連携させます。
設定後。
これで連携が完了しましたので、GitHubのmasterブランチにpushしてみます。まだHeroku側には何もアップされていないので、空コミットでpushしてみます。
$ git commit -m 'for deploy Heroku' --allow-empty
$ git push origin master
そうすると、自動的にHeroku側にもdeployが走り、無事、開発環境にアプリが公開されました。
Review Apps
次に、開発環境の手前に、GitHubへのプルリクエスト単位に確認用のアプリが作成されるように設定をします。
app.json
自動的にアプリを作成するには、 app.json
というファイルを作成してやる必要があります。このファイル内に書かれた設定の通りにアプリが作成されることになります。
pipeline上のREVIEW APP
から、Enable Review Apps
をクリックします。
どのアプリに対してレビューアプリを作るかを聞かれるので、今回はdevアプリを選択し、Create an app.json File...
をクリックします。
app.json
を作成するためのフォームが表示されるので、必要事項を入力し、JSONファイルを作成します。
対象のアプリの設定が引き継がれるため、すでに、環境変数やアドオンなどはなし、ビルドパックはPHPとなっています。特に何も触らずに生成されるjsonは以下のような内容となります。
{
"name": "tanuki",
"scripts": {},
"env": {},
"formation": {
"web": {
"quantity": 1
}
},
"addons": [],
"buildpacks": [
{
"url": "heroku/php"
}
]
}
JSONの詳細な設定内容については以下の公式を参照して下さい。
app.json Schema | Heroku Dev Center
環境変数を設定する場合には設定の仕方を指定することが出来るのですが、その種類がいくつかあります。
Copy at build time
: アプリ生成のタイミングで設定されている親アプリの変数内容をコピーしますCopy now
: 現在設定されている親アプリの変数内容を直接指定しますSet value
: 任意の値を指定しますGenerate Secret
: アプリ生成のタイミングでランダムな文字列を生成します
特にこだわりがない場合は Copy at build time
を指定しておけばよいでしょう。Copy now
やSet value
を指定すると app.jsonに変数の内容が記述されてしまうため、GitHubの公開リポジトリにアップしている場合は注意が必要です。
また、アドオンやDynoなどはこの画面からは変更が出来ないため、app.json作成後に編集するか、生成されたコードをもとに編集したapp.jsonをアップするようにして下さい。
内容を確認し、最下部にある、Commit to Repo
をクリックします。
GitHubで確認すると、連携したリポジトリにapp.json
が自動で追加されています。
設定の画面で設定を完了させます。
チェックが2つありますが、
上のチェックが、プルリクエストの度に自動でReview Appsを作成するか、で
下のチェックが、Review Appsが5日間変更がない場合に自動で削除するか、の設定となります。
下のチェックは要件にもよりますが、今回は2つともオンにしておきます。
最後に、Enable
をクリック。
これで Review Appsを自動生成するための準備が完了しました。
プルリクエスト
ひとまず、masterで先程追加されたapp.json
をpullしておきます。
$ git pull origin master
プルリクエスト用に適当なブランチを作ります。
$ git branch change
$ git checkout change
何かしらコードを修正しないとプルリクエストが出せないため、ソースを修正します。修正後、コミットして、先ほどのブランチにpushします。
$ git add .
$ git commit -m 'change'
$ git push origin change
push後、GitHubを見ると、以下のような表示となっているので、Compare & pull request
をクリックします。
change
からmaster
へのプルリクエストとなっている事を確認し、タイトルや中身を適当に書き、Create pull request
をクリックし、プルリクエストを作成します。
クリックするとプルリクエストが作成され、同時にHeroku側に自動的にReview Appsがdeployされます。
GitHub側にも構築中であることが表示されます。
deployが完了するとGithHub側にも生成されたReview Appsのページへのリンクボタンが表示されます。
これで、GitHub側でプルリクエストを作成すると、Heroku側に自動的にReview Appsが生成されるようになりました。ちなみに、どのブランチに対してプルリクエストを出してもReview Appsは作成されます。
マージ
Review Appsでの確認が完了したら、masterにマージします。マージされると、Review Appsは自動で削除され、staging環境に自動deployの設定を入れているため、自動でdeployが行われます。
本番リリース
さて、最後に本番環境へリリースを行います。本番へのリリースは、pipeline上から行います。
Pipeline上で、リリースしたいアプリの、 Promote to production
をクリックするだけです。
内容を確認して、 Promote
をクリックします。
即座にPRODUCTIONのアプリに反映されます。
PipelineによるPromoteは、アプリがdeployされるわけではなく、アプリの内容がそのまま移行されるような形のため、Deployの時間を待つことなく、ほぼ即時に反映されます。
(リリースされるのはアプリのソースのみです)
これで、Review Appsから開発環境、本番環境へのリリースの流れを作成することができました。
まとめ
説明の内容としてはそこそこに長くなってしまいましたが、実際にはほとんどブラウザ上からポチポチと設定していくだけで完了することが多いため、簡単に構築することが出来ます。
実際の案件では、Stagingのアプリを2つにしたりと、もう少し複雑にしていますが、基本的な流れは同じです。
HerokuもGitHubも無料で使える事が出来ますので、まずは気軽に試してもらえればと思います。