2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

個人的に一番簡単なHerokuのデプロイ方法

Last updated at Posted at 2020-04-23

対象読者

・Herokuを学習中の方
・リクエスト数が少ないWebアプリを無料で公開したい方
・ポートフォリオを公開したい方
・ステージング環境でテストとかリリース承認フローとか慎重なプロセスは不要な方

概要

GitHubにコミットすると、自動でHerokuにビルド&デプロイされるようにします。
画面操作のみで完結できるので、Heroku CLIのインストールやコマンド実行は不要です。
heroku-overview.png

背景

Heroku CLIを使った方法はたくさん出てきますが、
画面操作のみで完結できる方法はなかなか見つからなかったので書きました。

前提

Herokuのアカウントを登録済みであること。
GitHubのアカウントを登録済みであること。

方法

HerokuでAppを作成し、GitHubリポジトリと連携して自動デプロイする設定をします。

1. App作成メニュー選択

HerokuにデプロイするWebアプリの設定を新規作成します。
04.PNG

2. 名前設定

Webアプリの名前を入れます。公開時のURLに反映されます。
05.PNG

3. デプロイ方法設定

デプロイ方法に「GitHub」を選択して「Connect to GitHub」を実行します。
12.PNG

4. GitHubリポジトリの設定

デプロイ対象のソースがあるリポジトリを設定します。
14.PNG

設定が成功すれば、「connected」になります。
15.PNG

5. 自動デプロイの設定

「Enable Automatic Deploys」を実行して自動デプロイを有効にします。
16.PNG

成功すれば「enabled」になります。
17.PNG

動作確認

GitHubにコミット

GitHubにソースをコミットすると、Herokuで自動ビルド&デプロイが実行されます。
実行の様子は「Overview」で確認できます。
26.PNG

Webアプリにアクセス

「Open app」でWebアプリにアクセスして、デプロイされていることを確認します。

【補足】サンプルソース

さくっとやってみたい場合、Herokuのサンプルソースを使うと早いです。

以上お疲れ様でした。

2
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?