【React x Laravel】Herokuへのデプロイ

# 動作環境
動作環境は以下の通りです。
* Laravel11
* react（vite）
* Inertia.js
* docker-compose（Laravel sail）

また、以下の前提条件のもと作業を進めますのでこれらを準備してから作業を開始してください。
* Laravelプロジェクトをsailで作成済み
* laravel breezeとreactをインストール済み
* herokuアカウントを作成済み
* 対象のgithubプロジェクトを作成済み
* herokuCLIをインストール済み

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

### 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というファイル名で新規作成します。
``` Procfile
web: vendor/bin/heroku-php-apache2 public/
```

###  AppServiceProvider.phpを編集
https通信で繋がるように追記します。
```diff_php
<?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です。
![imgae1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/8b6209bb-fbbd-4854-8908-b7534364964b.png)
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/ce106d3d-1836-4cef-8cf8-ce48a5fa3cab.png)

### githubのリポジトリを同期
アプリが新規作成されたらデプロイするgithubのリポジトリを連携させます。リポジトリ名を検索して対象のリポジトリをconnect、、、デプロイボタンが出てくればうまく連携できてます！
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/38e7f55f-a120-4b41-9e84-bc4ca8f5e226.png)
![スクリーンショット 2025-02-18 13.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/dbff1ff5-c821-4629-8db4-a6cb8c9f46cf.png)

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

:::note info
今回はcomposerコマンド、npmコマンドを使用してビルドするため以下の２つを追加します
* php
* Node.js
:::

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/5977329d-42dc-4053-a8fd-5fee3fe94015.png)
![スクリーンショット 2025-02-18 13.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/891f6838-066a-4089-a50d-4809378d48f6.png)
![スクリーンショット 2025-02-18 13.11.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/9f2ba065-3606-47a3-8f12-8262e7db62ab.png)
2つ追加されていればokです
![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/9e410ed1-63c7-417a-ad58-ad16b6940b09.png)

### DB接続
次はDBを準備します。heroku内の「JawsDB MySQL」という無料でMySQLサーバーを構築できるアドオンを使用します。Resourcesタブに移動してアドオンを追加します。
![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/89ed17bd-08d7-4831-91cc-3ae68746d5c3.png)
無料プランを選択してください。
![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/b7df6435-194b-4ffb-adb9-cd8233af97f2.png)

アドオンが追加されました。
![iamge8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/d0ef0715-db16-462a-bd4f-b5eeb319bf97.png)

### メールサーバーを構築
続いてメールサーバーを構築します。ここもDBと同じくアドオンを追加します。サービスはmailgunを選択してください。手順はDBと同じなので省略します。こちらも正常にアドオンが追加されればokです。
![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/7dfd5488-0e69-4cf8-8192-d6a1f393dc63.png)

### 各種環境変数を設定
次は環境変数を設定します。ローカルだと.envに記載していた内容ですね。SettingsタブでReveal Config varsをクリックして設定します
![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/13c7046f-d983-4fb5-864a-89f0dc16929b.png)
実はこの時点で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}"`

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

### デプロイ
いよいよデプロイします。Deployタブからボタンクリックだけでデプロイできます。あとは結果を待つだけです。デプロイするブランチは注意してください。私はmasterブランチしか用意してないのでmasterをいきなりデプロイさせちゃいます。ビルドエラーが出る場合はログからトレースしてください。
![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/18cb5594-de51-4394-a9a2-8c27d76ef98e.png)
ビルドできました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364507/0f093621-5f39-43bf-95b9-c8b26277e459.png)

### マイグレーション実行
最後にマイグレーションファイルを実行して準備完了です。ターミナルからコマンドを実行します。
```
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を更新するのを忘れないように。
```diff_json
{
hogehoge...

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

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