0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-02-18

動作環境

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

  • Laravel11
  • react(vite)
  • Inertia.js
  • docker-compose(Laravel sail)

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

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

作業手順

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

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

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です。
imgae1.png
image2.png

githubのリポジトリを同期

アプリが新規作成されたらデプロイするgithubのリポジトリを連携させます。リポジトリ名を検索して対象のリポジトリをconnect、、、デプロイボタンが出てくればうまく連携できてます!
image3.png
スクリーンショット 2025-02-18 13.05.05.png

buildpackを追加

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

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

  • php
  • Node.js

image4.png
スクリーンショット 2025-02-18 13.10.44.png
スクリーンショット 2025-02-18 13.11.14.png
2つ追加されていればokです
image5.png

DB接続

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

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

メールサーバーを構築

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

各種環境変数を設定

次は環境変数を設定します。ローカルだと.envに記載していた内容ですね。SettingsタブでReveal Config varsをクリックして設定します
image10.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}"

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

デプロイ

いよいよデプロイします。Deployタブからボタンクリックだけでデプロイできます。あとは結果を待つだけです。デプロイするブランチは注意してください。私はmasterブランチしか用意してないのでmasterをいきなりデプロイさせちゃいます。ビルドエラーが出る場合はログからトレースしてください。
image11.png
ビルドできました
image.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を更新するのを忘れないように。

{
hogehoge...

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

さいごに

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?