Laravel × Reactアプリをherokuでデプロイする

この記事はLaravel Sailを使ったローカルでの開発環境構築から、herokuでのデプロイまでの手順をまとめたものです。

開発環境

M1 MacBook Pro
Docker Desktop（必須）

Laravel環境構築

まずはLaravel Sailを使って開発環境を構築していきます。

$ curl -s "https://laravel.build/アプリ名?with=mysql" | bash

$ cd アプリ名

$ ./vendor/bin/sail up -d

ここまでできたら、ブラウザでlocalhostと入力してみてください。
アプリが起動しているのが分かると思います。

Reactの導入

$ ./vendor/bin/sail composer require laravel/breeze --dev

$ ./vendor/bin/sail artisan breeze:install react

$ ./vendor/bin/sail npm install && npm run dev

これでローカルでLaravel × Reactアプリを起動することができます。
Laravel Sailに関する詳しいことはドキュメントを参照してください。
https://readouble.com/laravel/9.x/ja/sail.html

Procfileの作成

ルートディレクトリにProcfileを作成して、ファイル内に下記のコードを記述する。

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

package.jsonの内容を編集する

package.jsonのscriptsというところに下記のコードを追加してください。

    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "heroku-postbuild": "npm run build" <-追加
    },

AppServiceProvider.phpを編集

AppServiceProvider.phpのboot()に下記のコードを追加してください。

    public function boot()
    {
        if (config('app.env') === "production") {
            \URL::forceScheme('https');
        }
    }

GitHubにpushする

ここまでできたら、コード自体の修正は完了です。
GitHubにコードをpushしましょう。

Herokuでアプリを作成する

Herokuにログインして、画面右上のNewボタンを押し、Create New Appを選択する。
アプリ名の設定画面に移動するため、そこで適当な名前をつける（名前は一意なものである必要がある）。

Herokuでデプロイ設定

画面上部のバーで、Settingsを選択し、Config VarsのReveal Config Varsを選択する。

次に、ターミナルに戻って下記のコマンドを実行して、出力されたコードをコピーする。

$ ./vendor/bin/sail artisan key:generate --show

KEYのところにAPP_KEYと入力し、VALUEのところに上記のコマンドの出力結果を貼り付けて、Addボタンを押す。

Buildpacksという欄のAdd buildpackボタンをクリックして、php と nodejs をそれぞれ追加する。

デプロイ

画面上部のバーのDeployを選択し、ページ内のGitHubを選択する。
次に、先ほどのGitHubにpushしたコードが上がっているリポジトリを選択する。

Deploy Branchを実行。

デプロイが完了したら、画面上部にあるOpen appをクリックして、デプロイができているか確認しにいく。
このような画面が表示されていればOK。

DBの設定

DBが使えないことにはアプリケーションとして機能しないため、DBの設定をしていく。
HerokuではPostgresというデータベースを使用している。
OverviewのConfigure Add-onsをクリックする。

Heroku Postgresを選択する。

Hobby Dev - Freeを選択して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