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

前提条件

既にローカル環境でLaravel+Reactのアプリが動いていること

手順

1. Laravelのルートディレクトリにある、package.jsonを下記のように編集する

• heroku-postbuildというscriptを追加すると、Heroku のデプロイプロセス中に実行されるビルド手順を定義できる
• enginesでnpmのバージョンを明記する必要がある

{
    "private": true,
    "type": "module",
    "engines": {
        "node": "v22.12.0",
        "npm": "10.9.0"
    },
    "scripts": {
        "build": "vite build",
        "dev": "vite",
        "heroku-postbuild": "npm install --only=dev && npm install && npm run build"
    },
    "devDependencies": {
        //hogehoge
    },
    "dependencies": {
        //hogehoge
    }
}

2. herokuのアプリにNode.jsのbuildpackを設定する

• 下記のコマンドを実行

heroku buildpacks:set heroku/nodejs

• 下記画像のように、各アプリのBuildpacksにheroku/nodejsがあることを確認
  

3. herokuのアプリに環境変数を設定する

• 下記のコマンドを実行

heroku config:set NODE_ENV=production

• NODE_ENV 環境変数は下記2つの値がある
  • development：開発環境。デバッグ情報やホットリロードなどの開発に便利な機能が有効。
  • production：本番環境。パフォーマンス最適化やデバッグ情報の非表示など、本番運用に適した設定が有効。