Phoenix アプリケーションで Deploy to Heroku ボタンを作る

GitHub で見かける「Deploy to Heroku」ボタンって、ちょっと動作を確認してみたいときなどに便利ですよね。

Phoenix アプリケーションでもこのボタンは設置可能ですので、GitHub に公開した際には是非置いてみてください。

app.json を作る

Deploy to Heroku ボタンは、リファラーからデプロイする GitHub リポジトリの URL を取得して、そこに含まれる app.json という設定ファイルをもとにデプロイするという仕組みで動いています。

この app.json のスキーマは Heroku の以下のサイトで確認可能です。

app.json Schema | Heroku Dev Center

ほとんどの項目が Optional なんですが、キモとなるのは buildpacks です。
これはビルドの手順書のようなもので、Elixir/Phoenix の場合は以下の 2つ をこの通りの順番で記載する必要があります。

{
  ...
  "buildpacks": [
    {
      "url": "https://github.com/HashNuke/heroku-buildpack-elixir.git"
    },
    {
      "url": "https://github.com/gjaldon/heroku-buildpack-phoenix-static.git"
    }
  ]
}

その他の情報は必要に応じてご記載ください。

エンドポイントの設定を調整する

上記の app.json だけでビルドはできるようになるのですが、アプリケーション側のエンドポイント設定が Heroku を考慮できていないため、起動に失敗してしまいます。

具体的には、Port と Host の情報を適切に設定する必要があります。

config/prod.exs ファイルを以下のように書き換えましょう。

prod.exs

config :your_app, YourApp.Endpoint,
  http: [port: System.get_env("PORT")],
  # url: [host: "example.com", port: 80],
  url: [host: System.get_env("URL"), port: 443],
  cache_static_manifest: "priv/static/manifest.json"

Phoenix アプリケーションにはデプロイ先の URL を教える必要があります。
HerokuApp の URL は {{ app_name }}.herokuapp.com の形式でユーザが自由に決められるのですが、これは環境変数 URL から参照可能ですので、こちらを指定するように変えましょう。
あと、Heroku はデフォルトで https なので、ポートも 443 にしておきます。

ちなみに Heroku 以外のデプロイ環境も想定するような場合は、設定ファイルを分けるか、or を使うかをする必要があります。

以上で準備は完了です。

ボタンを置く

README.md に以下の一行を追加すると、Deploy to Heroku ボタンが設定されます。

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

感想

• URL 設定などが微妙にはまりどころだった
• Heroku は https や WebSocket に対応していて素晴らしい