【生徒用】Herokuのデプロイ手順ver.3
- 6671
デプロイ手順
- この手順はGitHub Educationに申請している。
- Herokuで「Github Students offer」に申請しており、認証されている
以降の作業は上記の2点が必ず終わっていることを確認してから行ってください。
もし終わってない場合はこちらを参考に申請をしてください。
EcoDynoを申し込む
Eco Dynoとは$5/月で使えるDynoのプランです。
月に1000時間までアプリを起動することができます。
使用時間は自分が立てた全Eco Dynoで共有されます。（AとBというアプリをEco Dynoで立てた場合、Aを700時間使った場合は、Bを300時間使用できる。）
- Herokuにログイン
- 「Accout settings」>「Billing」>「Eco Dynos Plan」>「Subscribe to Eco」をクリック
- 「Subscribe to Eco」が「Cansel Subscription」になっていたら完了です。
Procfileの作成
※以降の処理は、 必ずmasterブランチに移動してから行ってください！
以下のコマンドで、Procfileを作成します。
echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile
Procfileに以下の内容が入力されます。
web: vendor/bin/heroku-php-apache2 public/
この変更を確定させておきましょう。
$ git add .
$ git commit -m "Procfile for Heroku"
GitHubにpushする
ここまでできたら、コード自体の修正は完了です。
GitHubにコードをpushしましょう。
Herokuでアプリを作成する
Herokuにログインして、画面右上のNewボタンを押し、Create New Appを選択する。
アプリ名の設定画面に移動するため、そこで適当な名前をつける（名前は一意なものである必要がある）。
Herokuでデプロイ設定
画面上部のバーで、Settingsを選択し、Config VarsのReveal Config Varsを選択する。
次に、ターミナルに戻って下記のコマンドを実行して、出力されたコードをコピーする。
$ php artisan key:generate --show
KEYのところにAPP_KEYと入力し、VALUEのところに上記のコマンドの出力結果を貼り付けて、Addボタンを押す。
Buildpacksという欄のAdd buildpackボタンをクリックして、php を追加する。
buildpacksの追加
以下の設定は、Laravel10で認証機能（Breeze）を使用している人のみ行ってください
カリキュラムで使用している認証機能のBreezeを動かすにはPHPだけでなくて、nodejsも必要になります。
phpに続きnodejsもbuildpacksに追加してください。
次にpackage.jsonのscriptsという欄を下記のように修正してください。
"scripts": {
"dev": "vite",
"build": "vite build",
"heroku-postbuild": "npm run build"
},
ここまでできたら、変更を確定させておきましょう。
$ git add .
$ git commit -m "update package.json"
最後にGitHubにコードをpushしましょう。
デプロイ
画面上部のバーのDeployを選択し、ページ内のGitHubを選択する。
次に、先ほどのGitHubにpushしたコードが上がっているリポジトリを選択する。
Deploy Branchを実行。
デプロイが完了したら、画面上部にあるOpen appをクリックして、デプロイができているか確認しにいく。
このような画面が表示されていればOK。
DBの設定
DBが使えないことにはアプリケーションとして機能しないため、DBの設定をしていく。
HerokuではPostgresというデータベースを使用している。
OverviewのConfigure Add-onsをクリックする。
Heroku Postgresを選択する。
Hobby Dev - Miniを選択してSubmit Order Formを選択する。
SettingsのReveal Config Varsをクリックしてみると、新しくDATABASE_URLという環境変数が設定されている。
DATABASE_URLのValueの値は
postgres://[ユーザ名]:[パスワード]@[ホスト]:5432/[DB名]
という、構成になっている。
これを参考に、新しく下記の環境変数を設定していく。
DB_CONNECTION=pgsql
DB_HOST=[ホスト]
DB_DATABASE=[DB名]
DB_USERNAME=[ユーザ名]
DB_PASSWORD=[パスワード]
環境変数を全て設定することができたら、もう一度デプロイし直す。
最後にMoreのRun Consoleを選択して、下記のコマンドを実行してマイグレートをしたら完了です。
$ php artisan migrate
シーディングの実行
シーディングも実行したい場合は、同じRun Consoleで以下のコマンドを実行します。
$ php artisan db:seed
S3やAPIを使っている場合
S3やAPIを使っていて、デフォルトの.envファイルに新たに追記しているものがある場合は、これらの値も忘れずに環境変数に設定しましょう。
Herokuサイト側から設定する場合はHerokuアプリのダッシュボードを開き、Settingsタブ > Config Varsから設定しましょう。Reveal Config Varsボタンを押すと設定画面が出てきます。
確認方法
デプロイできたかどうかの確認を行います。
Herokuでデプロイしたアプリのページの右上のOpem Appをクリックすると、デプロイしたアプリが起動します。今までのようにパソコンからだけではなく、ケータイからアクセスすることもできますので、試してみてください。
ファイルを変更した場合
デプロイ後にファイルを変更した場合、もう一度gitにプッシュしHerokuでデプロイする必要があります。
$ git add .
$ git commit -m "変更箇所"
$ git push origin master
Dynoを停止したい場合
Eco Dynoは自分が立てたアプリで合計1000時間/月に動かすことができます。
（AとBというアプリをEco Dynoで立てた場合、Aを700時間使った場合は、Bを300時間使用できる。）
Herokuはデフォルトで30分間アクセスがないと停止するという仕様になっていますが、時間を節約するために、手動で停止することもできます。
停止したいアプリのダッシュボード >「Resources」の「Eco Dynos」の鉛筆マークをクリック >「Confirm」をクリック
エラー集
デプロイ後に500エラーが出る
heroku上で全員が見れる状態のアプリでは、エラー文が表示されないようになっています。普段見ているWebページも、アクセスできない時にエラーが表示されることはないと思います。これは、環境変数のAPP_DEBUGがfalseになっているからです。エラー文を見るために、trueに値を設定しましょう。
①Herokuの以下のリンクにアクセスして、自分のアプリを選択してください。
https://dashboard.heroku.com/apps/
②Settingsメニューをクリックしてください。
③Reveal Config Varsをクリックして、環境変数を確認してください。ここには、先ほど設定したデータベースのユーザー名やパスワードなども設定されていると思います。
④APP_DEBUGの値にtrueを設定して、Addボタンを押してください。
この①～④の作業によって、エラーが表示されるようになります。エラーを解消した後は、この環境変数をfalseにするのを忘れないようにしてください。
