💬

Laravel×Inertia.jsを、Herokuへデプロイ

2023/07/25に公開

Heroku

Laravel

inertia

tech

使用言語

Laravel 10.0
Inertia.js 1.0.0
React 18.2.0

やりたいこと

Laravel×Inertia.js（React）で作成したアプリを、Herokuにデプロイしたい
Webサーバーはapache
DBはpgsql
にしたい。

前提

Herokuへのデプロイがある程度やったことがある前提で、
細かいHerokuの設定はやや端折り気味。
普通のLaravelのデプロイと違い、Inertia.jsを使うためにビルドパックの追加やpackage.jsonの記載等が必要なので、そこが主。

参考にした記事

日本語記事があまり見当たらなかったので、書き残そうと思った。

手順

Procfileを作成

.env等と同じ場所にProcfileを作成する。
拡張子は不要で「Procfile」というファイルを作成すればOK。
作成したProcfileを開き、下記のように記載。
今回はapacheなので。nginxの場合は、適宜変える。

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

package.jsonに追記

Reactなので、下記のように記載。
後述のビルドパックを使って、npm run buildをしておいてくれる。

"scripts": {
  ....
  "postinstall": "npm run build"
}

https化

Provider内の、AppServiceProvider.phpのbootを下記のように記載。

public function boot(): void
   {
       if (config('app.env') !== 'local') {
           URL::forceScheme('https');
           $this->app['request']->server->set('HTTPS','on');
       }
   }

config('app.env') !== 'local'

は適宜、自分のデプロイする環境のAPP_ENVにあわせて。
そのままにすると、httpで通信されてしまいうまくいかない。

$this->app['request']->server->set('HTTPS','on');

をいれたのは、
これなしのとき、Reactで書いたフロント画面の中で、route("/")等をしたときに、
取得したURLがhttpになったから（だったはず。。。）

Herokuにアプリケーションを作成

heroku create

heroku apps:rename アプリ名

または、Herokuダッシュボードにて手動で作成。

環境変数の設定

heroku config:set APP_KEY=キー -a アプリ名

キーは、開発環境で

php artisan --no-ansi key:generate --show

で発行して貼る。
同様に、
APP_NAME,APP_ENV,APP_URL等を設定。
ダッシュボードで設定するなら、Setting画面のここ。

デプロイ設定

githubからの自動デプロイにしたかったので、
ダッシュボードのDeploy画面で、githubと接続し、自動デプロイするリポジトリとブランチを設定。
この時点で、いったんデプロイされるはず。

ビルドパックを追加

ビルドに、node.jsが必要なため、それを追加。

heroku buildpacks:add heroku/nodejs -a アプリ名

追加後、

heroku buildpacks -a アプリ名

として、

1. heroku/php
2. heroku/nodejs

が出ればOK。
※先にデプロイしているからか、heroku/phpは自動的に入ると思う。
入らなければ、手動でnode.jsと同様に追加する。

ダッシュボードのここで追加することも可。

node.jsのビルドパックを追加すると、
package.jsonの中身が自動的にインストールされるが、
そのままだと、devDependenciesの中身がインストールされない。
インストールする必要がれば、

heroku config:set NPM_CONFIG_PRODUCTION=false -a アプリ名

必要なものが全部dependenciesに入っていればいらなさそう。
NPM_CONFIG_PRODUCTION=falseにしておけばとりあえず動く。
ただ、不要なtypescriptやeslintまで入ってしまうので、本来は必要なものだけいれるべきか。

DB作成

miniプランで作成したいので。

heroku addons:create heroku-postgresql:mini -a アプリ名

※無料プランはなくなったので、これが一番安い。
自動的に、環境変数にDB_CONNECTIONが入るはず。

で、マイグレーション。

heroku run php artisan migrate -a アプリ名

追記：SSR対応

SEO対策等のために、Inerita.jsのSSR対応をする場合、
ssr.jsxファイルの作成や、vite.config.jsファイルの修正等が必要。
それらの手順は、こちらを参照。
そのうえで、Herokuにデプロイする場合は、
Procfileを、

web: php artisan inertia:start-ssr & vendor/bin/heroku-php-apache2 public/

のように変更すればOK。

終わり