Heroku Buttonを試してみた

先日Herokuから発表された、これ。

Introducing Heroku Button

GitHubにあるのHerokuアプリを直接自分のHerokuアカウントにデプロイして動かせてしまうというもの。

Herokuでルートドメインの静的サイトを構築のときにも書いた通り、個人的に、静的なWebサイトの動作確認などでHerokuを活用させていただいていたりするので、これは使えるのでは、ということで試してみることにしました。

Heroku Buttonの設置準備

そもそもの前提として、

Herokuにデプロイできるアプリケーションがあること
リポジトリがGitHubで公開されていること

になります。

そこで、前述の記事でも書いていたumi-uyura/node-static-siteは、Node.jsベースでHerokuで動かす想定のものだったので、これに設置してみることにしました。

app.jsonを作る

Heroku上でアプリを実行するために必要な情報を記述しておくapp.jsonというファイルを用意します。

形式についてはapp.json Schema | Heroku Dev Centerに掲載されていますが、必須項目はないようです。

umi-uyura/node-static-siteには、環境変数にユーザー名とパスワードを設定することでBASIC認証を有効にできるようにしているので、app.jsonのenvに指定しておきました。

{
  "name": "node-static-site",
  "env": {
    "BASIC_AUTH_USER": "",
    "BASIC_AUTH_PASS": ""
  }
}

ちなみにapp-json/app.jsonというツールがあることを初めて知りました。

$ npm install -g app.json

でインストールして、プロジェクト直下で

$ app.json init

とやると、Herokuのリモートリポジトリがある場合は、そこの情報を元にapp.jsonのひな形を生成してくれるようです。

それ以外にもvalidateなどの機能もあるようですね。

Heroku Buttonの設置方法

次に、Heroku Buttonの設置方法ですが、以下の2種類あるようです。

GitHub内のドキュメントに記載する場合

READMEなどに設置する場合は、Markdown形式で以下のリンクを記載しておくだけ。

[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)

そうすると、refererを元にリポジトリを特定してくれて、Herokuへデプロイしてくれます。

GitHub以外のWebサイトやブログなどに設置する場合

上記のリンクにtemplateパラメータを加えてGitHub リポジトリURLを指定してあげるだけ。

umi-uyura/node-static-siteであれば、

[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy?template=https://github.com/umi-uyura/node-static-site)

HTMLで書くと、こんな感じらしいです。

<a href="https://heroku.com/deploy?template=https://github.com/umi-uyura/node-static-site">
  <img src="https://www.herokucdn.com/deploy/button.png" alt="Deploy">
</a>

Heroku Buttonを設置してみる

というわけで設置してみました。

まずは、準備段階で作成したapp.jsonをcommitし、GitHubへpush。

その後、templateパラメータを指定したURLをブラウザで直叩きしてみます。

https://heroku.com/deploy?template=https://github.com/umi-uyura/node-static-site

すると以下のような、自分のHerokuアカウントへアプリを登録するための画面が表示されました。

f:id:umi-uyura:20140809233928p:plain

自分のアカウントへ登録する際のアプリ名やリージョンの他に、envで設定した環境変数の入力画面も表示されています。

BASIC認証が必要な場合は、アプリの登録と同時に認証情報も登録できるので便利ですね。

f:id:umi-uyura:20140809233942p:plain

画面の下の方にあるDeploy for Freeボタンを押すと、進捗が表示されつつ、アプリが自分のHerokuアカウント上で動くようになりました。

その下にあるView Itのリンクをクリックすると、.herokuapp.comへ飛び、デプロイされたアプリを確認できます。

というわけで、umi-uyura/node-static-siteのリポジトリのREADMEにもボタンを設置。

f:id:umi-uyura:20140809233954p:plain

これで、毎回ローカルにcloneして色々書き換えてHerokuにpushして...といったことをしなくても、Heroku Deployボタン一発で環境が作れるようになりました。

いろんな人のHerokuアプリを手軽に自分の環境で動かせるようになるというのも楽しそう。

Umi Uyuraのブログ

プログラミング関連の作業ログ