コマンド不要で超簡単！HerokuでWebアプリ開発を30分で始める【php+postgres】

こんにちは。エンジニアのmickey-STRANGEです。
前回はめんどくさがりによるめんどくさがりのためのスマホアプリ開発についてお話したいと思います。

なんて言いながら、全てをJSでごりっと無理やり解決する方法をご紹介しました。

はい、タイトル詐欺です、すみません。冷静に考えて、この作りのWebページが世の中にない現状、これよりも簡単な方法が必ずあるはずなんですよね（当時サンプル書きながらコレめんどくさいな、なんて思ってないです）。

今回はタイトル詐欺ではなく、Herokuというサービスを用いてWebアプリ開発の環境構築が本当に簡単に出来てしまう方法をご紹介いたします。

• Heroku（へろく）とは
• Herokuで環境構築
• • php+postgresアプリの作成
  • デプロイソースの指定
  • ブラウザからアクセス！
  • 【補足】phpからpostgresの接続
• 終わりに

Heroku（へろく）とは

Herokuとは、PaaS（Platform as a Service）の1種で、アプリケーションの底にあるプラットフォームそのものを、Webを通じて提供してくれるサービスです。
今回の記事では、Heroku上でphp+postgresをプラットフォームとするWebアプリの構築、が目的となります。

Herokuで環境構築

Herokuを用いて、ということなのでHerokuのアカウント登録は完了している前提で説明を始めます。使用するのは以下の2サービスですので、アカウント登録まだだよ、という方はご準備ください。

• Heroku

・GitHub

php+postgresアプリの作成

まず最初に、Heroku上にアプリケーションを作成します。ログインして右上NewからCreate New App、もしくはアプリケーションが1つもない場合は画面真ん中にあるCreate New App
をクリックします。

アプリ名を入力し、Create app
をクリックします。これでアプリケーションが作成できました。
といっても、名前と枠組みだけの状態なので、これからphp+postgresで動くアプリケーションだという設定をします。

アプリケーションのページからSettings→Add buildpackの順にクリックします。

立ち上がったポップアップの中でphpを選び、Save changesをクリックします。

これで作成したアプリケーションはphpで動きますよ、という設定が出来ました。

続いてpostgresを設定します。
Resources→Find more add-onsからHeroku Postgresを探してクリックし、Install Heroku Postgres
をクリックします。

Heroku Postgres
はアドオンですので、料金プランの選択があります。というと身構えてしまうかもしれませんが、Hobby Devという無料プランがありますので、これを選択します。そしてpostgresを追加するアプリケーションを選択し、Provision add-onをクリックします。

以上で作成したアプリケーションをphp+postgresのアプリケーションであるという設定が完了しました。あとはソースをデプロイすればWebアプリケーションとして稼働する状態です。

デプロイソースの指定

続いて、ソースのデプロイ元の設定をご説明します。
ソースのデプロイ元として使用するのがGitHub
になります。GitHubにデプロイ用リポジトリを作成し、直下にindex.php
をpushします。

今回作成したファイルは以下のものです。php+postgresが稼働していること、phpからpostgresに接続できていることの確認が目的なので簡単なものです。

今回もGitHubへのpushはGitHub Desktop
を使用しました。直感でぽちぽちできるデスクトップアプリはやはり強いですね。
GitHub Desktop | Simple collaboration from your desktop

とはいえ、これでGitHub側の操作は終わりです。Herokuの画面に戻ります。
Deploy→GitHub→Searchとクリックし、上記index.phpをpushしたリポジトリの隣にあるConnect
をクリックします。

これでGitHubリポジトリからデプロイする設定が完了しました。HerokuからGitHubへの接続が初めての場合は、連携をするかどうかの確認が出ますので、表示されるとおりに進めていけばOKです。

最後に、Enable Automatic deploysとDeploy Branchをクリックしましょう。
Enable Automatic deploysは自動デプロイの設定です。ブランチを指定して自動デプロイを有効にすることで、そのブランチにpushされるたびに自動でアプリケーションを最新のソースに置き換えてくれます。
Deploy Branchは手動デプロイのボタンです。アプリケーションの設定とデプロイ元の指定をしただけで、まだデプロイはされていません。自動デプロイを有効にしたとしても、初回だけは手動で行います。

ブラウザからアクセス！

これまでの手順で全ての準備が完了しました。実際に作成したアプリケーションにアクセスしてみましょう。
アプリケーションのページの右上にOpen app
というボタンがあるのでクリックしてみましょう。

作成したindex.php
の通りに表示されました！
postgresのバージョンもphpから取得出来ているのでgetAttribute
の代わりにSQLを発行して動きをつけていけば立派なWebアプリケーションになりますね。

個人的な感想として、postgresが10.3と最新に対してphp5.6がツッコミどころに思えて仕方がなかったのですが、phpのバージョンを指定する方法がちゃんと用意されています。画面から作っただけではデフォルト設定で作られる、といった感じでしょうか。composer.json
に改めて指定することでphpのバージョン変更が可能です。
Heroku PHP Support | Heroku Dev Center

【補足】phpからpostgresの接続

ここまでアプリケーション稼働までの手順をご説明いたしましたが、1つだけ補足があります。

最初、phpからpostgresに接続するにあたって、接続情報の取り方に詰まりました。Herokuの画面上から確認は出来るのです。ですが、これだけ環境構築が簡単なのに接続情報はまったく関係ないサービスであるGitHub上のソースにべた書きで持つ、というところが引っかかりました。GitHub上のソースを見れば他の人のアプリのDBにアクセス出来てしまいます。
調べたところ、postgresをアプリケーションに追加したときに、環境変数に追加されているようで、そこから取得する方法が、上記のindex.php
の記述になります。
Heroku Postgres | Heroku Dev Center

終わりに

今回はタイトル詐欺ではなく、めんどくさがりでもすぐにWebアプリ開発が出来る手順の記事になっていると思います。

Herokuを初めて使ったのですが、とても簡単で驚きました。調べるにも公式ドキュメントが多いので、詰まってどうしようもなくなるということはありませんでした。
タイトルの30分というのも嘘ではなく、「よし、やるか」と思い立ってHerokuのアカウントを作成してから、特に調べるでもなく直感でぽちぽち画面を操作して、phpinfo()
を画面に出すまでの時間がそれぐらいでした。本当に簡単です。
コマンド要らずの設定の簡単さも素晴らしいのですが、特にpushからの自動デプロイがめんどくさがりの心にかなり響きました。

気を付けないといけないところは、前回の記事で作成したアプリはアクセス者本人の画面にのみデータが表示されるのに対し、Herokuは通常のWebアプリになりますので、脆弱性のあるサービスを公開してしまうと攻撃の踏み台として使われてしまう可能性があります。アプリの作成、公開は気を付けて行いましょう。

さて、これにて今回の記事は終わりとしますが、前回のタイトル詐欺の汚名を返上できたでしょうか。 最後までお読みいただきありがとうございました。