Web アプリのデプロイ：Heroku へのデプロイ

今回は、デプロイの一例として、GitHub Desktop を使った Web アプリの GitHub へのプッシュ でご紹介した GitHub リモートリポジトリの Web アプリ（NodejsWebApp1）を、Heroku へデプロイしていきたいと思います。

Heroku はクラウドベースの PaaS（Platform As A Service）で、開発者が作成した Web アプリを Heroku の仮想環境で実行して、サービスとしてエンドユーザが利用する環境を提供します。デプロイ時には Web アプリを呼び出す URL が割り当てられるので、誰もがアクセス出来るようになります。

※ ご紹介する画面遷移は2019年4月時点のものです。今後当該サービスプロバイダーによって変更される可能性があります。

GitHub リモートリポジトリのデプロイ

GitHub 同様、Heroku を利用するために Heroku アカウントが必要です。Heroku アカウントをお持ちでなければ、https://signup.heroku.com/login からアカウントを作成してください（無償）。
https://id.heroku.com/login から Heroku アカウントでサインインします。
ページ右上の [New ⇕] ボタンをクリックして、ドロップダウンから [Create new app] を選択してください。
Create New App ページで「App name」欄に Web アプリ名を入力します。ここでは半角英字、数字と半角ハイフンしか利用出来ないので、nodewebapp1 と入力して、[Create app ] ボタンをクリックしてください。
nodewebapp1 アプリのデプロイ情報を定義していきます。[Deploy] タブの「Deployment method」欄で [GitHub] を選択します。
「Connect to GitHub」欄で [Connect to GitHub] ボタンをクリックします。
GitHub アカウントでサインインして、Heroku が GitHub リポジトリを利用出来るように認可を与えます。
「Connect to GitHub」欄に Heroku でデプロイする GitHub アカウント名が表示されるので（①）、[Search] ボタンをクリックして（②）、同アカウント上のリモートリポジトリの一覧を表示させます。一覧からデプロイするリポジトリ NodejsWebApp1 を見つけて、右横の [Connect] ボタンをクリックしてください。
「Connect to GitHub」欄の名前が「App connected to GitHub」に変わり、NodejsWebApp1 リポジトリに接続が完了します。
そのまま [Deploy] タブの画面を下方向にスクロールして、「Manual deploy」欄の [Deploy Branch] ボタンで master ブランチのデプロイを開始します。
デプロイ中のログ情報が順次表示されていきます。
デプロイが正常に完了すると、「Your app was successfully deployed.」メッセージが表示されます。メッセージ下の [View] ボタンをクリックすると、デプロイされた Web アプリが起動します。

今回は https://nodejswebapp1.herokuapp.com/ の URL が自動的に適用されているはずです（アプリ名.herokuapp.com）。
デプロイされた Web アプリは、デバイスやプラットフォームを問わず、どこからでもアクセス出来ます。

Web アプリ更新時の再デプロイ

Web アプリのソースコードを変更/更新した場面では、ローカルリポジトリへのコミットとリモートリポジトリへのプッシュを経て、GitHub 上に更新された状態を確認後、Heroku で再デプロイをおこなってください。この際には、Heroku 上に作成済の Web アプリは GitHub リモートリポジトリに接続された状態を維持しているので、上記手順の 10. にある [Deploy] タブでのデプロイ操作をおこなうだけです。

他の Heroku 環境

今回は Node.js を使ったアプリをデプロイしましたが、Heroku には他の環境やデータベースオプションなども用意されています。必要に応じて https://devcenter.heroku.com/startを確認してみてください。