動作環境

動作環境は以下の通りです。

Laravel11
react（vite）
Inertia.js
docker-compose（Laravel sail）

また、以下の前提条件のもと作業を進めますのでこれらを準備してから作業を開始してください。

Laravelプロジェクトをsailで作成済み
laravel breezeとreactをインストール済み
herokuアカウントを作成済み
対象のgithubプロジェクトを作成済み
herokuCLIをインストール済み

作業手順

以下の順序でデプロイを実施します。

pakeage.jsonを編集
Procfileを追加
AppServiceProvider.phpを編集
herokuでアプリを新規作成
githubのリポジトリを同期
buildpackを追加
DB接続
メールサーバーを構築
各種環境変数を設定
デプロイ
マイグレーション実行

pakeage.jsonを編集

heroku-postbuildコマンドを追加してください。これを追加することによりheroku側がこのコマンドを検知して実行してくれます。

package.json

"scripts": 
    {
        "build": "vite build",
        "dev": "vite",
        "heroku-postbuild": "npm install --only=dev && npm install && npm run build"
    }

Procfileを追加

プロジェクトのルート直下にProcfileというファイル名で新規作成します。

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

AppServiceProvider.phpを編集

https通信で繋がるように追記します。

<?php

namespace App\Providers;

use Illuminate\Support\Facades\URL;
use Illuminate\Support\Facades\Vite;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
+        if (app()->environment('development') || app()->isProduction()) {
+           URL::forceScheme('https');
+        }
    }
}

herokuでアプリを新規作成

ここからはheroku側の操作です。「Create new app」を選択してアプリを新規作成します。App nameを入れたらあとはそのままでCreate Appでokです。

githubのリポジトリを同期

アプリが新規作成されたらデプロイするgithubのリポジトリを連携させます。リポジトリ名を検索して対象のリポジトリをconnect、、、デプロイボタンが出てくればうまく連携できてます！

buildpackを追加

buidに必要なツールを追加します。Settingタブへ移動してください。

今回はcomposerコマンド、npmコマンドを使用してビルドするため以下の２つを追加します

php
Node.js

2つ追加されていればokです

DB接続

次はDBを準備します。heroku内の「JawsDB MySQL」という無料でMySQLサーバーを構築できるアドオンを使用します。Resourcesタブに移動してアドオンを追加します。

無料プランを選択してください。

アドオンが追加されました。

メールサーバーを構築

続いてメールサーバーを構築します。ここもDBと同じくアドオンを追加します。サービスはmailgunを選択してください。手順はDBと同じなので省略します。こちらも正常にアドオンが追加されればokです。

各種環境変数を設定

次は環境変数を設定します。ローカルだと.envに記載していた内容ですね。SettingsタブでReveal Config varsをクリックして設定します

実はこの時点でDBとメールに関しては自動でいくつか値が入っていますが、Laravel側で扱えるようにこれをいじります。環境変数の全量は載せませんが、ローカルと違うポイントをいくつか載せておきます。

NODE_ENV

NODE_ENVの変数はローカルでは設定していませんが、ここでは設定してください。（設定を忘れるとビルドエラーになります）
NODE_ENV=development

DBの設定値

すでにJAWSDB_URLという値が入っていますが、これを分解して設定します。JAWSDB_URLはmysql://ユーザー名:パスワード@ホスト名:ポート番号/データベース名の形式になっているのでこれを元に以下を設定してください。

DB_CONNECTION
DB_HOST
DB_PORT
DB_DATABASE
DB_USERNAME
DB_PASSWORD

メールの設定

メールもすでに設定されている値を元に以下のように設定しなおします。

MAIL_MAILER=smtp
MAIL_HOST=MAILGUN_SMTP_SERVERの値
MAIL_PORT=587
MAIL_USERNAME=MAILGUN_SMTP_LOGINの値
MAIL_PASSWORD=MAILGUN_SMTP_PASSWORDの値
MAIL_FROM_ADDRESS=MAILGUN_SMTP_LOGINの値
MAIL_FROM_NAME="${APP_NAME}"

メールのドメインについてはデフォルトだとsandbox環境です。カスタムドメインにしたい場合は別途ドメインの設定が必要です。こちらも別の機会に記載します。

デプロイ

いよいよデプロイします。Deployタブからボタンクリックだけでデプロイできます。あとは結果を待つだけです。デプロイするブランチは注意してください。私はmasterブランチしか用意してないのでmasterをいきなりデプロイさせちゃいます。ビルドエラーが出る場合はログからトレースしてください。

ビルドできました

マイグレーション実行

最後にマイグレーションファイルを実行して準備完了です。ターミナルからコマンドを実行します。

heroku login

heroku run "php artisan migrate" --app 自分のプロジェクト名

マイグレーションが完了したらURLへアクセスします。管理画面上部のOpen appをクリックして正常に表示されていればデプロイ成功です！URLを見るとわかりますが、heroku側で独自ドメインを割り振ってくれています。これを変更する場合は別途カスタムドメインの設定が必要です。

seeder実行時の補足

seederを実行するとClass "Faker\Factory" not foundのエラーが出るかと思います。heoku上でseederを実行したい場合はcomposer.jsonを編集してください。require-devに記載の"fakerphp/faker": "^1.23"（バージョンはそれぞれの記載です）をrequireに移動させてください。最後にcomposer updateを実行してcomposer.lockを更新するのを忘れないように。

{
hogehoge...

"require": {
+       "fakerphp/faker": "^1.23",
        hogehoge...
    },
    "require-dev": {
-       "fakerphp/faker": "^1.23",
        hogehoge...
    },
}

さいごに

最後までご覧いただきありがとうございます！herokuはAWSをベースに作成されているセルフホスティングのサービスで個人的には使いやすくとても気に入っています。インフラにあまりリソースを割きたくない場合などは選択肢に入れてみてもいいのではないでしょうか！
記事の内容に誤りがありましたらご指摘いただけますと幸いです。
最後にこちらの記事にて、私が普段どのようなマインドでエンジニアリングの業務にあたっているかを執筆しています。目を通してもらえるととても嬉しいです！