Laravel + MySQL + VueアプリをHerokuにデプロイしたが、api部分で500エラーが出ます。

Question

Laravel + MySQL + Vue.jsで、一覧表アプリを作ったので、Herokuにデプロイしました。

困っていること

Laravelでapi化したものをフロント側のVue.jsにおいて、axiosを使ってそのapi化されたデータベースを取得しているのですが、データベースの部分が全く表示できない状態で、以下のスクリーンショットのように500エラーが出てしまっています。
(データベースを使用していない部分はきちんと表示されています。)

$ heroku run bash
$ php artisan migrate

上記コマンドで、migrationも行いましたし、herokuのconfig varsも設定しました。
下記リンクを参考にデプロイを行いました。
【Heroku】LaravelとMySQLでデプロイする

apiが原因なのでは、ということまではわかるのですが、どのように対処すべきかわからず、困っています。
どなたかご教示いただけますと助かります。

補足

alcList/app/Http/Controllers/Api/AlcController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Alc;
use Illuminate\Http\Request;

class AlcController extends Controller 
{
    public function alcList() {
        $list = Alc::all();
        return response()->json(['lists' => $list], 200, [], JSON_UNESCAPED_UNICODE);
            
    }
}

alcList/app/Models/Alc.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Alc extends Model
{
    protected $table = 'alc';
    
}

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "ext-intl": "*",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.12",
        "laravel/tinker": "^2.5",
        "laravel/ui": "^3.1"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "bin-dir": "vender/bin"
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

補足2

/storage/logs/以下にあるlaravel.logというファイルを見てみましたが、localのエラーは出ていますが、それ以外は修正済みのエラーでした。以下のように出てきていました。

 local.ERROR: Call to undefined method Illuminate\Routing\RouteAction::containsSerializedClosure() {"exception":"[object] (Error(code: 0): Call to undefined method Illuminate\Routing\RouteAction::containsSerializedClosure() at /Users/azusa/Documents/GitHub/ShowingAlcList/alcList/vendor/laravel/framework/src/Illuminate/Routing/RouteSignatureParameters.php:21)

補足3

laravel.logを削除して、Herokuから再度アクセスしてみた結果、同じエラーが出ています。
ただ、リロードすると、GETに原因があるのではないかと思われるような内容に変わりました。

また、Heroku側のlogも確認してみました。すると、以下のようなエラーの記述が見つかりました。
しかし、popper.jsなんて使ったこともないのですが...

補足4

今、Google ChromeのDeveloper ToolsのNetworkのところで確認したところ、以下のスクリーンショットのようなエラーが確認できました。
こちら、apiに関するエラーのようです。

Comments

[kyoya0819]

/storage/logs/以下にログがあると思います。
ご確認ください。

[退会済みユーザー]

kyoya0819さん

/storage/logs/以下にある、laravel.logファイルにてログを確認してみた結果を補足2に追加致しました。

[kyoya0819]

いちど、laravel.logを削除したのち、再度アクセスしてみてください。

[退会済みユーザー]

kyoya0819さん
laravel.logファイルを削除して、再度herokuからアプリにアクセスしてみました。
ですが、エラーは同じものが出ています。
補足3に詳細を追加しました。

Answer 1

migrationは成功したけれど、もしかして、データ自体はきちんと渡っていないのでは...？と思い、MySQLWorkbenchを用いて、データベースをimportしてみました。
すると、きちんとデータが表示されるようになり、axiosの500エラーも消えました。

Base table or view~のエラーどおり、素直にデータベースにテーブルが作成されているのかの確認をすれば良かっただけでした。
今回、Google ChromeのDevelopper Toolで、初めてNetworkのページを利用しましたが、エラーの詳細が見れる場所だとわかり、とても勉強になりました。