Laravel QUEST #6【エラー解説・Git・Herokuへのデプロイ 】

前回までで、アプリケーションの主な機能の実装が終わりましたので、
今回はエラー対処法の解説・アプリケーションの公開方法を学んでいきます。

エラーの対処法が分かれば、独自機能を実装したい場合や、オリジナルのアプリケーションを制作する際に、エンジニアとして最も重要な自分で問題を解決する能力が身に付きます。

また、アプリケーションを世界に公開することができれば、URLを共有するだけで自分の作品を他人に見てもらい、評価をもらう事ができます。

そこから就職・転職・仕事に繋がる可能性も大いにありますので、
エラー対処法・アプリ公開方法もしっかり学んでいきましょう。

●今回のキーポイント

• エラー対処法
• 頻出エラー
• デバッグ関数
• Git
• リポジトリ
• ステージする
• コミットする
• Herokuについて
• デプロイ
• Herokuの環境変数

前回の内容はこちら

https://yu-nocode.com/entry/laravel-quest-5/

Laravelエラーについて

これまで、アプリケーション制作に当たり、皆さんエラーを経験し、対処いただいたことと思います。

Laravelエラーの読み方とエラーに対処する「デバッグ」について見ていきたいと思います。

エラー画面を解説

下記がエラー発生時の画像です。エラー内容の読み解き方を学んでいきましょう。

エラー画面に含まれる情報は以下のとおりです。

• エラーメッセージ

画面左上には、エラーが何故起こっているのか、メッセージが表示されます。
エラー解決に直結しやすい、一番最初に見るべき部分です。
また、どのファイルが原因でエラーが発生したのかも示してくれています。

• エラーファイルとそのエラー発生の行

画面右上には、エラー発生しているファイル名・ファイルパスや
エラーが起きている行とその周辺を表示してくれます。

• トレース表示

エラーが起きた関数がどこから呼び出されたのかを表示してくれています。
エラー発生の原因を直接的に示してくれない場合もありますが、関数の呼び出し状況を確認出来ます。

トレース表示の一番上の部分に、「　Application frames(3) All frames(59)　」と記載がありますが
原則 Application frames( ) のエラー発生部分を参照した方が良いでしょう。
All frames( )は、/venderの下にあるファイルも含んだ関数呼び出し状況を示していますが
私たちが通常のLaravelプロジェクトで/venderの下にあるファイルを改変することはありませんので
改変する可能性の高い/venderの下にない Application frames( )として表示されるトレース結果を確認しましょう。

• リクエスト内容

サーバに送られたリクエストの内容を表示しています。

エラーの対処方法

では、エラー画面が出てきたらどのように対処すべきでしょうか？
まずは、下記手順を参考にしてみて下さい。

①エラーメッセージを確認

②エラーが起きた原因はどの部分か？を調査
　（エラーメッセージや、エラーファイルの場所を参照）

③エラー発生部分に関わるファイルを遡って辿っていく
　（エラー発生ファイルがViewならView→Controller→Router へと辿る等）

④ソースコードを修正する

頻出エラーについて

頻出のエラーについて解説します。

Undefined variable: ××× ～

「記述された×××という名前の変数が存在しません」という内容です。
変数そのものが未定義ではないか、変数名を間違えて記述していないか確認しましょう。

Parse error: syntax error, unexpected ～

文法エラーを示します。プログラミング文法の間違いであれば、エディタが誤り部分を指摘してくれることもありますので、そちらも参考にしながら解決に取り組みましょう。

例）カンマ・セミコロン忘れ、括弧の入力漏れ等

Call to undefined method ～

「記述された名前の関数が存在しません」という内容です。
関数そのものが未定義ではないか、関数名を間違えて記述していないか確認しましょう。

Trying to get property ‘×××’ of non-object ～

「条件に合致するデータが見つかりません」というエラーです。
この場合、「$変数->×××」 の×××（プロパティ）に誤りがある可能性があります。
プロパティの記述ミスがないか、データベースにデータがない可能性などを疑いましょう。

View ××× not found.

コントローラで宣言しているViewが見つからないという内容です。Viewファイルそのものが存在しているかどうか、ファイル名が誤っていないか、もしくはファイルのパスの指定が誤っていないかを確認しましょう。

上記で解説されていないようなエラーや、どうしても分からないエラーはWeb検索して「これが原因ではないか？」と可能な限り当たりをつけてみましょう。

デバッグ関数

各プログラミング言語には、バグ（エラー）を取り除くため、デバッグ用の関数が存在します。
PHPの場合、var_dump() や var_dump()die; という関数を用いたことがある方もいると思います。

Laravelには、下記のようなデバッグ関数が準備されています。

• dd($変数)

dd()は、var_dump()die;とかなり近く、この関数を挿入した場所でアプリケーションの処理が止まり、指定の変数の内容を表示させることが可能です。

本講義の中での利用例を挙げてみましょう。
MoviesControllerのstoreアクションにある引数 $requestがどんな内容なのか知りたい場合に使ったり、もしくは、この変数$requestが見つからないというエラーが出た時に、どの場所までこの変数が正常なデータとして届いているのかを確認したい場合に使ったりします。

下記のような使い方です。

public function store(Request $request)
    {
        dd($request);
        
        $this->validate($request,[
            'url' => 'required|max:11',
            'comment' => 'max:36',
        ]);

        $request->user()->movies()->create([
            'url' => $request->url,
            'comment' => $request->comment,
        ]);

        return back();
    }

一度storeアクションを実行するため、動画登録フォームに何か入力して、登録ボタンを押して実行してみて下さい。

次のような画面が表示されると思います。

これで、以下のことが分かります。

• $request変数の中身
• dd($request)のコードの位置まで$request変数のデータが届いていること

フォームからの送信内容をみたい場合は、+requestの右にある▶をクリックして下さい。すると、詳細情報が表示され、さらに#parametersの右にある▶をクリックすると中身の情報を見ることができます。

こうすることで、変数の中身に望んでいる情報が入っているかどうかを確認できますし、変数がどこまで正常に届いているかを知ることで、「どこまでが正常な記述で、どこからが誤った記述となっているのか」を確認することができます。

是非このデバッグ関数を有効に活用しましょう。

Gitを使おう

Git とは、バージョン管理ツールと言われるものです。
Laravelでいうと、テーブル情報をマイグレーションで管理していたのと似ています。
バージョン管理ツールを使えば、テーブル情報以外も含めて全てのファイルにさまざまな変更を繰り返した後に「あの当時のファイルの状態まで戻したい！」という要望を叶えることが可能です。

• Git公式ページ

リポジトリとは？

バージョンの履歴を保存する先は、リポジトリと呼ばれます。バージョンの情報を入れておく「器」のようなイメージです。

リポジトリには、２種類の区別があり、それぞれ「ローカルリポジトリ」「リモートリポジトリ」と呼ばれます。

• ローカルリポジトリ：ご自身のパソコンやCloud9のワークスペース上で保存するリポジトリ
• リモートリポジトリ：オンライン上に保存するリポジトリ（GitHub/Herokuなど）

ワークツリー/インデックス/ローカルリポジトリ

ファイルを変更して、リポジトリに保存する流れは以下の通りです。

• ワークツリー　→（ステージ）→　インデックス　→（コミット）→　ローカルリポジトリ

ファイルが変更されたら、上記のような流れで変更内容を移動させていきます。
ワークツリーからインデックスに渡すことを「ステージする」と言って、インデックスからローカルリポジトリに渡すことを「コミットする」と言います。

リポジトリに保存するに当たって、なぜ一時置き場的なインデックスが存在するのでしょう。
変更内容が保存されるのはコミットした段階ですが、一部のファイルをコミットして一部のファイルの変更を保存したい場合もあるでしょうから、事前に一部ファイルのみステージすることで、コミット内容を選別することが出来ます。

また、後ほど解説するHerokuにデプロイ したり、共同開発などを行う場合は、ローカルリポジトリからリモートリポジトリへ情報を渡して（「プッシュする」）、オンライン上にリポジトリを公開する場合もあります。

では、実際に今まで作ってきたアプリケーションをGitのリポジトリに入れていきましょう。

本来はアプリケーションの制作当初から少しずつコミットを進めていき、
制作の工程でバージョン管理していくのが理想なのですが
今回は学習時間の関係から、ファイルを一度にコミットしていきます。

グローバル設定

まず、Gitコマンドを使って、ご自身の名前とメールアドレスを設定（グローバル設定）していきましょう。

次のコマンドをターミナルに入力してください。
※ taro.yamada/taro.yamada@questacademia.jp部分は、ご自身の名前・アドレスで記述してください。

$ git config --global user.name "taro.yamada"
$ git config --global user.email "taro.yamada@questacademia.jp"

上記の入力が完了したら、以下のGitのコマンドを使って確認してみましょう。

--globalはグローバル設定ファイルを指定しており、-lは設定ファイルのリストを取得するという意味です。

$ git config --global -l

core.editor=/usr/bin/nano
user.name=taro.yamada
user.email=taro.yamada@questacademia.jp

リポジトリを作成する前に、必ずアプリケーションのディレクトリに移動しましょう。

$ cd laravel-quest

git init　でリポジトリ作成

次のコマンドを実行することでリポジトリが作成され、laravel-questプロジェクトがGitのバージョン管理下に設置されます。

$ git init

Initialized empty Git repository in /home/ec2-user/environment/laravel-quest/.git/

Initialized〜のような表示がされれば、Gitの管理下に入ったということで、「中身が空のGitリポジトリが上記のスペースに設置された」ことを示します。
.git/という隠しフォルダが実際のプロジェクト内に置かれて、こちらがリポジトリの実体となります。こちらのフォルダは原則触らないようにして下さい。

また、Cloud9ではターミナル上の$の前にある（master）という文字で、バージョン管理下にあるということが明示されます。

ワークツリー/インデックスのステータスを確認しよう

まず、下記のgit statusコマンドで、現状のファイル変更状況を確認しましょう。

$ git status

On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .env.example
        .gitattributes
        .gitignore
        app/
        artisan
        bootstrap/
        composer.json
        composer.lock
        config/
        database/
        package.json
        phpunit.xml
        public/
        readme.md
        resources/
        routes/
        server.php
        storage/
        tests/
        webpack.mix.js

No commits yetは「コミットされたファイルがない」状態を指します。
Untracked filesはワークツリー上にある「新規追加ファイル」を指します。

ステージの実行

次に、git add コマンドでステージを実行します。

「 git add ファイル名」と書けば、コミットするファイル・コミットしたくないファイルを分けることも可能です。
ですが、今回はすべてのファイルをコミットしたいので、今回は下記のコマンドですべてのファイルをステージします。

git add .と入力すれば、全ての変更ファイルをステージすることが可能です。

$ git add .

また、git statusコマンドで状況を確認してみましょう。

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   .env.example
        new file:   .gitattributes
        new file:   .gitignore
        new file:   app/Console/Kernel.php
        new file:   app/Exceptions/Handler.php
        new file:   app/Http/Controllers/Auth/ForgotPasswordController.php
        new file:   app/Http/Controllers/Auth/LoginController.php
        new file:   app/Http/Controllers/Auth/RegisterController.php
        new file:   app/Http/Controllers/Auth/ResetPasswordController.php
        new file:   app/Http/Controllers/Controller.php
        new file:   app/Http/Controllers/MoviesController.php
        new file:   app/Http/Controllers/UserFollowController.php
        new file:   app/Http/Controllers/UsersController.php
        new file:   app/Http/Kernel.php
        new file:   app/Http/Middleware/EncryptCookies.php
        new file:   app/Http/Middleware/RedirectIfAuthenticated.php
        new file:   app/Http/Middleware/TrimStrings.php
        new file:   app/Http/Middleware/TrustProxies.php
        new file:   app/Http/Middleware/VerifyCsrfToken.php
        new file:   app/Movie.php
        new file:   app/Providers/AppServiceProvider.php
        new file:   app/Providers/AuthServiceProvider.php
        new file:   app/Providers/BroadcastServiceProvider.php
        new file:   app/Providers/EventServiceProvider.php
        new file:   app/Providers/RouteServiceProvider.php
        new file:   app/User.php
        new file:   artisan
        new file:   bootstrap/app.php
        new file:   bootstrap/cache/.gitignore
        new file:   composer.json
        new file:   composer.lock
        new file:   config/app.php
        new file:   config/auth.php
        new file:   config/broadcasting.php
        new file:   config/cache.php
        new file:   config/database.php
        new file:   config/filesystems.php
        new file:   config/mail.php
        new file:   config/queue.php
        new file:   config/services.php
        new file:   config/session.php
        new file:   config/view.php
        new file:   database/.gitignore
        new file:   database/factories/UserFactory.php
        new file:   database/migrations/2014_10_12_000000_create_users_table.php
        new file:   database/migrations/2014_10_12_100000_create_password_resets_table.php
        new file:   database/migrations/2019_12_01_161538_create_movies_table.php
        new file:   database/migrations/2019_12_07_204713_add_title_to_users_table.php
        new file:   database/migrations/2019_12_07_212452_create_user_follow_table.php
        new file:   database/seeds/DatabaseSeeder.php
        new file:   database/seeds/UsersTableSeeder.php
        new file:   package.json
        new file:   phpunit.xml
        new file:   public/.htaccess
        new file:   public/css/app.css
        new file:   public/css/styles.css
        new file:   public/favicon.ico
        new file:   public/index.php
        new file:   public/js/app.js
        new file:   public/robots.txt
        new file:   public/web.config
        new file:   readme.md
        new file:   resources/assets/js/app.js
        new file:   resources/assets/js/bootstrap.js
        new file:   resources/assets/js/components/ExampleComponent.vue
        new file:   resources/assets/sass/_variables.scss
        new file:   resources/assets/sass/app.scss
        new file:   resources/lang/en/auth.php
        new file:   resources/lang/en/pagination.php
        new file:   resources/lang/en/passwords.php
        new file:   resources/lang/en/validation.php
        new file:   resources/views/auth/login.blade.php
        new file:   resources/views/auth/register.blade.php
        new file:   resources/views/commons/error_messages.blade.php
        new file:   resources/views/commons/footer.blade.php
        new file:   resources/views/commons/header.blade.php
        new file:   resources/views/follow/follow_button.blade.php
        new file:   resources/views/layouts/app.blade.php
        new file:   resources/views/movies/create.blade.php
        new file:   resources/views/movies/movies.blade.php
        new file:   resources/views/users/followers.blade.php
        new file:   resources/views/users/followings.blade.php
        new file:   resources/views/users/show.blade.php
        new file:   resources/views/users/tabs.blade.php
        new file:   resources/views/users/users.blade.php
        new file:   resources/views/welcome.blade.php
        new file:   routes/api.php
        new file:   routes/channels.php
        new file:   routes/console.php
        new file:   routes/web.php
        new file:   server.php
        new file:   storage/app/.gitignore
        new file:   storage/app/public/.gitignore
        new file:   storage/framework/.gitignore
        new file:   storage/framework/cache/.gitignore
        new file:   storage/framework/sessions/.gitignore
        new file:   storage/framework/testing/.gitignore
        new file:   storage/framework/views/.gitignore
        new file:   storage/logs/.gitignore
        new file:   tests/CreatesApplication.php
        new file:   tests/Feature/ExampleTest.php
        new file:   tests/TestCase.php
        new file:   tests/Unit/ExampleTest.php
        new file:   webpack.mix.js

Changes to be committedは、コミット対象のファイルを指しており
new file:としてステージされた対象ファイルが列挙されています。

コミットの実行

いよいよ、コミットを実行してみましょう。
git commit のコマンドの後に、-m "（コメント内容を記述）" と付けることで
コミットメッセージを入力することが可能です。

コミットメッセージは、バージョン管理する時に、今回のコミット内容が「どういう変更を意味しているか」を示す重要な記述です。

$ git commit -m "first-commit"

[master (root-commit) 3bc8c79] first-commit
 104 files changed, 8200 insertions(+)
 create mode 100644 .env.example
 create mode 100644 .gitattributes
 create mode 100644 .gitignore
 create mode 100644 app/Console/Kernel.php
 create mode 100644 app/Exceptions/Handler.php
 create mode 100644 app/Http/Controllers/Auth/ForgotPasswordController.php
 create mode 100644 app/Http/Controllers/Auth/LoginController.php
 create mode 100644 app/Http/Controllers/Auth/RegisterController.php
 create mode 100644 app/Http/Controllers/Auth/ResetPasswordController.php
 create mode 100644 app/Http/Controllers/Controller.php
 create mode 100644 app/Http/Controllers/MoviesController.php
 create mode 100644 app/Http/Controllers/UserFollowController.php
 create mode 100644 app/Http/Controllers/UsersController.php
 create mode 100644 app/Http/Kernel.php
 create mode 100644 app/Http/Middleware/EncryptCookies.php
 create mode 100644 app/Http/Middleware/RedirectIfAuthenticated.php
 create mode 100644 app/Http/Middleware/TrimStrings.php
 create mode 100644 app/Http/Middleware/TrustProxies.php
 create mode 100644 app/Http/Middleware/VerifyCsrfToken.php
 create mode 100644 app/Movie.php
 create mode 100644 app/Providers/AppServiceProvider.php
 create mode 100644 app/Providers/AuthServiceProvider.php
 create mode 100644 app/Providers/BroadcastServiceProvider.php
 create mode 100644 app/Providers/EventServiceProvider.php
 create mode 100644 app/Providers/RouteServiceProvider.php
 create mode 100644 app/User.php
 create mode 100755 artisan
 create mode 100644 bootstrap/app.php
 create mode 100644 bootstrap/cache/.gitignore
 create mode 100644 composer.json
 create mode 100644 composer.lock
 create mode 100644 config/app.php
 create mode 100644 config/auth.php
 create mode 100644 config/broadcasting.php
 create mode 100644 config/cache.php
 create mode 100644 config/database.php
 create mode 100644 config/filesystems.php
 create mode 100644 config/mail.php
 create mode 100644 config/queue.php
 create mode 100644 config/services.php
 create mode 100644 config/session.php
 create mode 100644 config/view.php
 create mode 100644 database/.gitignore
 create mode 100644 database/factories/UserFactory.php
 create mode 100644 database/migrations/2014_10_12_000000_create_users_table.php
 create mode 100644 database/migrations/2014_10_12_100000_create_password_resets_table.php
 create mode 100644 database/migrations/2019_12_01_161538_create_movies_table.php
 create mode 100644 database/migrations/2019_12_07_204713_add_title_to_users_table.php
 create mode 100644 database/migrations/2019_12_07_212452_create_user_follow_table.php
 create mode 100644 database/seeds/DatabaseSeeder.php
 create mode 100644 database/seeds/UsersTableSeeder.php
 create mode 100644 package.json
 create mode 100644 phpunit.xml
 create mode 100644 public/.htaccess
 create mode 100644 public/css/app.css
 create mode 100644 public/css/styles.css
 create mode 100644 public/favicon.ico
 create mode 100644 public/index.php
 create mode 100644 public/js/app.js
 create mode 100644 public/robots.txt
 create mode 100644 public/web.config
 create mode 100644 readme.md
 create mode 100644 resources/assets/js/app.js
 create mode 100644 resources/assets/js/bootstrap.js
 create mode 100644 resources/assets/js/components/ExampleComponent.vue
 create mode 100644 resources/assets/sass/_variables.scss
 create mode 100644 resources/assets/sass/app.scss
 create mode 100644 resources/lang/en/auth.php
 create mode 100644 resources/lang/en/pagination.php
 create mode 100644 resources/lang/en/passwords.php
 create mode 100644 resources/lang/en/validation.php
 create mode 100644 resources/views/auth/login.blade.php
 create mode 100644 resources/views/auth/register.blade.php
 create mode 100644 resources/views/commons/error_messages.blade.php
 create mode 100644 resources/views/commons/footer.blade.php
 create mode 100644 resources/views/commons/header.blade.php
 create mode 100644 resources/views/follow/follow_button.blade.php
 create mode 100644 resources/views/layouts/app.blade.php
 create mode 100644 resources/views/movies/create.blade.php
 create mode 100644 resources/views/movies/movies.blade.php
 create mode 100644 resources/views/users/followers.blade.php
 create mode 100644 resources/views/users/followings.blade.php
 create mode 100644 resources/views/users/show.blade.php
 create mode 100644 resources/views/users/tabs.blade.php
 create mode 100644 resources/views/users/users.blade.php
 create mode 100644 resources/views/welcome.blade.php
 create mode 100644 routes/api.php
 create mode 100644 routes/channels.php
 create mode 100644 routes/console.php
 create mode 100644 routes/web.php
 create mode 100644 server.php
 create mode 100644 storage/app/.gitignore
 create mode 100644 storage/app/public/.gitignore
 create mode 100644 storage/framework/.gitignore
 create mode 100644 storage/framework/cache/.gitignore
 create mode 100644 storage/framework/sessions/.gitignore
 create mode 100644 storage/framework/testing/.gitignore
 create mode 100644 storage/framework/views/.gitignore
 create mode 100644 storage/logs/.gitignore
 create mode 100644 tests/CreatesApplication.php
 create mode 100644 tests/Feature/ExampleTest.php
 create mode 100644 tests/TestCase.php
 create mode 100644 tests/Unit/ExampleTest.php
 create mode 100644 webpack.mix.js

これでローカルリポジトリへのコミットまで完了しました。

今後、アプリケーションに追加機能などの変更を加えた場合、都度Gitコマンドでステージ→コミットを実行するようにしましょう。

Herokuについて

今まで作ったアプリケーションを世界に公開したいと思います。

今回は、Heroku（へロク） というサービスを使います。
Herokuは、Webサービス等を公開するためのサーバコンピュータを提供してくれるサービスです。

• Heroku

Heroku では Gitの情報を使ってアプリケーションを公開（デプロイ）します。

デプロイは、アプリケーションをサーバ上に上げて起動して、ユーザに対してアプリケーションを公開することです。

アカウント作成

Heroku

https://jp.heroku.com/

上記ページからアカウントを新規作成していきます。
本講義では、無料プランを利用していきましょう。無料プランでは当然ながら制約があります。

• １アカウントで５５０時間／月の稼働時間が上限（クレジットカードを登録すると上限１０００時間に）
• ３０分アクセスがないとサーバがスリープモードに入り、次の初動が遅くなる

まず、Herokuにアカウント登録をしていきましょう。下記ページを参考にして、新規でHerokuアカウントを作りましょう。

プログラミング入門ナビ　Herokuアカウントの新規作成方法

https://programmingnavi.com/1438/

デプロイするための準備

これから、作成したアプリを Heroku に、デプロイしていきます。 

まず、Herokuを操作するため、heroku-cliというコマンドラインツールを導入します。下記コマンドを実行して下さい。

$ wget https://cli-assets.heroku.com/heroku-linux-x64.tar.gz -O heroku.tar.gz
$ sudo mkdir -p /usr/local/lib/heroku
$ sudo tar --strip-components 1 -zxvf heroku.tar.gz -C /usr/local/lib/heroku
$ sudo ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku

次に、Herokuへログインしましょう。

$ heroku login -i

heroku: Enter your login credentials
Email: Herokuに登録済みのメールアドレスを入力
Password: Herokuに登録済みのパスワードを入力
Logged in as 上記メールアドレスがココに表示されます

Gitのバージョン情報を下に、Herokuにアプリケーションを反映していくので、自身のアプリのプロジェクトフォルダに移りましょう。

$ cd laravel-quest

Herokuアプリを新規作成しよう

下記コマンドにて、アプリ名を付けていきます。

$ heroku create 任意のアプリ名

このアプリ名はアプリ自体のURLの一部となるため、重複が許されず、仮に一人のユーザが「 youtube-curation 」としてHerokuアプリを作れば、同じ名前のアプリは作れないことになります。

他者と重複しないような名前を付ける必要があります（大文字・_(アンダーバー)は×）
その後、アプリ名がきちんと登録されたかを確認するために、下記コマンドを入力して下さい。
下記コマンド実行後、自身のHerokuアプリ名が表示されれば登録完了です。

$ heroku apps

アプリ名と同時に、Gitにリモートリポジトリとして「heroku」のリポジトリが作られることになります。こちらは、下記コマンドの実行で確認が可能です。

$ git remote -v

設定ファイルを作る

次に、「Herokuにおいて利用するWebサーバソフトの種類」を指定していきます。
下記コマンドで、Procfileファイルを作っていきましょう。必ずlaravel-questのプロジェクト直下で実行して下さい。

$ echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile

下の内容が書かれただけのファイルが生成されるだけなのですが、
これで「Herokuのapache2というWebサーバソフト」が使われることになります。

Procfile

web: vendor/bin/heroku-php-apache2 public/

ここで、一旦Gitでコミットを実行しておきましょう。

$ git add .

$ git commit -m 'add procfile'

デプロイの実行

コミットした内容を、いよいよHerokuにデプロイをしていきます。

下記コマンドだけで（少々実行に時間は掛かりますが）Herokuにデプロイが出来ます。

$ git push heroku master

デプロイ完了直前に、下記の様に表示されると思います。自分で設定した下記のようなURLにアクセスしてみましょう。

remote:        https://youtube-curation.herokuapp.com/ deployed to Heroku

仮に、Herokuアプリ名をyoutube-curationと設定していたら、

https://youtube-curation.herokuapp.com/

このようなURLになります。

しかし、アクセスしてもおそらく下記のようなエラーメッセージが表示されるだけではないでしょうか？

Whoops, looks like something went wrong 

もしこのメッセージではなく、[There's nothing here, yet.]と出てきたら、入力されたURLが誤っている可能性がありますので、確認してみて下さい。
正しいURLを取得したい場合は、下記コマンドが有効です。

$ heroku apps:info

環境変数の設定が必要

Whoops, looks like something went wrong というメッセージが出てきたのは、環境変数の設定がなされていないからです。ここでは環境変数を設定していきましょう。

これまでは.envファイルが環境変数を指定していたのですが、
こちらのファイルはGitコミットされるファイルには含まれていないので、別途環境変数の指定が必要となるのです。

ではまず、APP_KEY を設定してアプリケーションのセキュリティを高めましょう。
ローカルの環境下でも、.envファイルにAPP_KEYが設定されているので、下記のコマンドによって.envファイルのKEY とHeroku上のKEYが合致するようにします。

$ heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)

次に今入力した環境変数が登録されているかを見ていきましょう。
下記コマンドにて、環境変数を確認できます。

$ heroku config

=== youtube-curation Config Vars
APP_KEY: 設定されたAPP_KEYが表示されます

データベースを設定する

Herokuでは、PostgreSQLが標準のデータベースとして用意されていますので、PostgreSQLを利用していきたいと思います。

ここでも下記コマンドにより、無料プランhobby-devでデータベースを使う方法を選択したいと思います。

• Heroku Postgres

$ heroku addons:create heroku-postgresql:hobby-dev

データベースの内容は、HerokuのWebページ上でも確認いただけます。

• Datastores

各種の環境変数を設定する

.envファイルには、下記のような環境変数を指定していたかと思います。
Herokuには.envファイルは適用されませんので、それとは別で環境変数をデータベース用に規定しなければなりません。

• DB_CONNECTION：データベースへの接続の種類
• DB_USERNAME：データベースに接続するユーザ名
• DB_PASSWORD：データベースに接続する際のパスワード
• DB_HOST：データベースのサーバのホスト名
• DB_DATABASE：データベースの名前

まず、下記コマンドでHerokuアプリの環境変数を確認出来ますので、見てみましょう。
このようなDATABASE_URLという形で、環境変数が表示されます。

$ heroku config

=== youtube-curation Config Vars
APP_KEY:      base64:設定されたAPP_KEYが表示
DATABASE_URL: postgres://ユーザ名:パスワード@ホスト名:5432/データベース名

表示されたURLから「ユーザ名」「パスワード」「ホスト名」「データベース名」を読み取って、下記のように一つひとつの変数を設定していきましょう。
まずデータベースの設定から行っていきます。

$ heroku config:set DB_CONNECTION=pgsql

DB_CONNECTION=pgsqlとしているのは、config/database.phpに「'default' => env('DB_CONNECTION', 'mysql'),」と書かれているため、データベース接続の種類として「pgsql」が適用されます。
更に、'pgsql' => [〜]の中で、下記の環境変数が宣言されているため、これらの変数が有効となるのです。

$ heroku config:set DB_USERNAME=ユーザ名

$ heroku config:set DB_PASSWORD=パスワード

$ heroku config:set DB_HOST=ホスト名

$ heroku config:set DB_DATABASE=データベース名

再度 heroku config を実行し、下記のように設定されているか全ての変数を確認して下さい。

$ heroku config

=== youtube-curation Config Vars
APP_KEY:       base64: APP_KEY
DATABASE_URL:  postgres://ユーザ名:パスワード@ホスト名:5432/データベース名
DB_CONNECTION: pgsql
DB_USERNAME:   ユーザ名
DB_PASSWORD:   パスワード
DB_HOST:       ホスト名
DB_DATABASE:   データベース名

ここまで来れば、heroku run ○○○ のようなコマンドでHerokuアプリを操作することが可能です。

では、Herokuアプリのマイグレーションを実行してみましょう。

$ heroku run php artisan migrate

Running php artisan migrate on ⬢ youtube-curation... up, run.1836 (Free)
**************************************
*     Application In Production!     *
**************************************

 Do you really wish to run this command? (yes/no) [no]:
 > yes

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
Migrating: 2019_12_01_161538_create_movies_table
Migrated:  2019_12_01_161538_create_movies_table
Migrating: 2019_12_07_204713_add_title_to_users_table
Migrated:  2019_12_07_204713_add_title_to_users_table
Migrating: 2019_12_07_212452_create_user_follow_table
Migrated:  2019_12_07_212452_create_user_follow_table

もし、下記のように聞かれたら

Do you really wish to run this command? (yes/no) [no]:

「yes」と入力下さい。

HerokuアプリのURLに再度アクセスしよう

環境変数の設定　→　マイグレーションの実行　という段階まで進められれば
アプリケーションはエラーなく動作すると思いますので、今一度URLにアクセスしましょう。

https://Herokuアプリ名.herokuapp.com/

上手く表示されましたでしょうか？
万一エラーが出たら、環境変数が正しいかどうかを改めて確認下さい。

Herokuでのエラー表示設定

Herokuでエラーが発生した場合、現状の設定では

something went wrong.

というメッセージが表示されるだけです。
エラーの詳細を表示させたい場合、下記の環境変数を設定しましょう。

$ heroku config:set APP_DEBUG=true

ただ、一般のユーザにこのURLを公開する場合、エラーを出してしまうと自身のアプリケーションの脆弱性を晒すことになってしまいますので注意しましょう。

一通りエラーの対処が完了したら、環境変数を下記の様に変更することで
またエラーが表示されないように戻しておきましょう。

$ heroku config:set APP_DEBUG=false

問題なくご自身のアプリケーションがHeroku上で動作すれば、今回は完了です。
お疲れ様でした！

次回はこちら

https://yu-nocode.com/entry/laravel-quest-7