Heroku Button でHerokuアプリケーションのテンプレートを作成する

様々なアプリケーション開発環境をすばやく作成する Heroku Button の設置方法と利用方法について紹介していきます。

従来 Heroku アプリケーションの複製には heroku-cli 経由で heroku fork コマンドを利用するのが一般的でしたが、昨年末に heroku fork コマンドは deprecated となりました。

代替案として Review App を利用する方法等が紹介されていましたが、ブランチごとの確認環境など固定の環境を要するには Review App は不向きな点も多いです。

ここでは、複数の開発環境を準備するための Heroku アプリケーションテンプレートとして動作する Heroku Button の使い方を紹介していきます。

Heroku Button | Heroku

Creating a ‘Deploy to Heroku’ Button | Heroku Dev Center

Heroku Button の準備

Heroku Button を作成するには、プロジェクトのルートに app.json ファイルを作成する必要があります。

フォーマットは Review App で使用する ものとほぼ同様ですが、一部修正が必要になる箇所もあります。

app.json のテンプレートは、

https://dashboard.heroku.com/apps/{application_name}/app-json

のURLから確認することが可能です。

{
  "name": "Node.js Sample",
  "description": "A barebones Node.js app using Express 4",
  "repository": "https://github.com/heroku/node-js-sample",
  "logo": "https://node-js-sample.herokuapp.com/node.png",
  "keywords": ["node", "express", "static"],
  "scripts": {},
  "env": {
  },
  "formation": {
    "worker": {
      "quantity": 1
    },
    "web": {
      "quantity": 1
    }
  },
  "addons": [
    "papertrail",
    "heroku-postgresql",
    "heroku-redis",
    "sendgrid"
  ],
  "buildpacks": [
    {
      "url": "heroku/nodejs"
    },
    {
      "url": "heroku/php"
    }
  ]
}

詳細なスキーマ情報は、以下のURLから確認することもできます。

app.json Schema | Heroku Dev Center

app.json のスキーマ情報

name, description, keyword, website, repository, logo

Heroku Buttonでアプリを作成する際に表示されるオプション情報。

基本的にoptionalで省略可能。

logo は外部にホスティングされた画像のURLを指定し、SVG,PNG,JPGが使える。

success_url

アプリがデプロイされた際に表示するURL

/スタートで、アプリ自体のURLを指定する事が可能

{
  "success_url": "/welcome"
}

script

デプロイに併せて実行されるスクリプト。現在postdeploy エントリのみサポート

{
  "scripts": {
    "postdeploy": "bundle exec rake bootstrap"
  }
}

env

アプリに設定する環境変数。"generator": "secret"でrandomな値を自動生成させることが出来る。

{
  "env": {
    "SECRET_TOKEN": {
      "description": "A secret key for verifying the integrity of signed cookies.",
      "generator": "secret"
    },
    "WEB_CONCURRENCY": {
      "description": "The number of processes to run.",
      "value": "5"
    }
  }
}

formation

dynoの種類を定義する。Procfileの代わりになるものではない。

{
  "formation": {
    "web": {
      "quantity": 2,
      "size": "Performance-M"
    }
  }
}

image

Dockerで使用するイメージ名。Dockerで使用しないなら不要。

addons

使用するAddons

buildpacks

複数指定可能で、最後に記述したものがアプリケーションのタイプを規定する。

Heroku Button を作成する

リポジトリルートに app.json を設置できたら、次は Heroku Button の作成を行います。

任意のボタン要素に対し、リポジトリのURLを使用して以下のようなURLを設定すればOKです。

https://heroku.com/deploy?template=https://github.com/heroku/node-js-sample/tree/master

ボタン画像のURLとしては公式から以下のようなものが提供されています。

  • https://www.herokucdn.com/deploy/button.png
  • https://www.herokucdn.com/deploy/button.svg

Github の README 上にボタンを展開する場合は、template パラメータは不要です。

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

これは、Referer の仕組みを利用して動作するため、Refererの付与されないプライベートリポジトリでは template パラメータの指定が必要になります。

Heroku Button のカスタマイズ

env[SLACK_SUBDOMAIN]=testdomain のような形式で URL パラメータを付与して Heroku Button 上のアプリケーションテンプレートに任意の環境変数を付与できます。

注意点

  • Heroku Button は Heroku Fork や Review App と異なり、特定の Heroku App からのコピーという形式ではなく、リポジトリからの新規作成という動作をします。
  • そのため、 例えば env で required 指定した値の親からのコピーなどの動作はなく、一切の App との関わりがない状態でアプリケーションが作成されます。
  • app.json は Review App や Heroku CI 等でも利用される構成ファイルです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です