今回は、デプロイの一例として、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を確認してみてください。
今回デプロイした Web アプリは Forge を利用していませんが、デプロイまでの手順はおおまかに把握いただけるものと思います。
By Toshiaki Isezaki
You must be logged in to post a comment.