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

# 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**を選択する。
アプリ名の設定画面に移動するため、そこで適当な名前をつける（名前は一意なものである必要がある）。

![スクリーンショット 2022-07-09 23.22.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/8971b9ec-6dcf-507e-db68-ce2dd05299c2.png)

## Herokuでデプロイ設定
画面上部のバーで、**Settings**を選択し、Config Varsの**Reveal Config Vars**を選択する。
![スクリーンショット 2022-07-09 23.32.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/a3a137cc-a319-813c-3ba1-54f106730266.png)

次に、ターミナルに戻って下記のコマンドを実行して、出力されたコードをコピーする。
```
$ ./vendor/bin/sail artisan key:generate --show      
```
KEYのところに**APP_KEY**と入力し、VALUEのところに上記のコマンドの出力結果を貼り付けて、Addボタンを押す。
![スクリーンショット 2022-07-09 23.40.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/1da909ec-2f4e-54d0-3360-b800e99d45b3.png)

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

![スクリーンショット 2022-07-09 23.44.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/fa9bd961-98a0-17f0-a496-71170ad5a181.png)

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

![スクリーンショット 2022-07-09 23.48.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/ede0f24d-2b19-734e-ff4d-19000b843eba.png)
Deploy Branchを実行。

![スクリーンショット 2022-07-09 23.53.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/e17a3421-f5cb-93c3-8b8d-f20f3090a05c.png)

デプロイが完了したら、画面上部にある**Open app**をクリックして、デプロイができているか確認しにいく。
このような画面が表示されていればOK。
![スクリーンショット 2022-07-09 23.59.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/3dd3d720-9a16-6dbf-401f-4766fc23b1df.png)

## DBの設定
DBが使えないことにはアプリケーションとして機能しないため、DBの設定をしていく。
HerokuではPostgresというデータベースを使用している。
**Overview**の**Configure Add-ons**をクリックする。
![スクリーンショット 2022-07-10 0.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/36939c20-9d5f-567b-aaf2-0a01dced5fa7.png)
**Heroku Postgres**を選択する。
![スクリーンショット 2022-07-10 0.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/a1c86561-e454-b97b-153b-a38c9b82aa50.png)
**Hobby Dev - Free**を選択して**Submit Order Form**を選択する。
![スクリーンショット 2022-07-10 0.12.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/ed798f31-6de2-8b04-fc24-cd0ae4d285f8.png)

**Settings**の**Reveal Config Vars**をクリックしてみると、新しく**DATABASE_URL**という環境変数が設定されている。
**DATABASE_URL**のValueの値は
```
postgres://[ユーザ名]:[パスワード]@[ホスト]:5432/[DB名]
```
という、構成になっている。
これを参考に、新しく下記の環境変数を設定していく。
```
DB_CONNECTION=pgsql
DB_HOST=[ホスト]
DB_DATABASE=[DB名]
DB_USERNAME=[ユーザ名]
DB_PASSWORD=[パスワード]
```
![スクリーンショット 2022-07-10 0.21.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/f1d2c73d-d08d-4cf7-b0c5-f0b8be491856.png)

環境変数を全て設定することができたら、もう一度デプロイし直す。

最後に**More**の**Run Console**を選択して、下記のコマンドを実行してマイグレートをしたら完了です。
```
$ php artisan migrate
```
![スクリーンショット 2022-07-10 0.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2359210/4a8f03c8-6652-9bb2-9d78-4fd7974b1edf.png)