先日開催された、 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が自動で追加されています。

設定の画面で設定を完了させます。

チェックが２つありますが、
上のチェックが、プルリクエストの度に自動で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も無料で使える事が出来ますので、まずは気軽に試してもらえればと思います。

ドキュメント

• Pipelines | Heroku Dev Center
• GitHub Integration | Heroku Dev Center
• Review Apps | Heroku Dev Center
• app.json Schema | Heroku Dev Center