💬

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の記載等が必要なので、そこが主。

HerokuCLIを利用する。
もちろん、CLIはログインしておく。（HerokuCLIのログイン方法はこちらの記事を参考に。

参考にした記事

Inertia.jsを使う場合のデプロイに関して。

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

DBのバックアップについて。

独自ドメインの設定について

手順

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化

app/Providers/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 アプリ名

上記のように、CLIでアプリを作成したら、Herokuのダッシュボードで、アプリが作成されているのを確認するとよし。
https://dashboard.heroku.com/

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

環境変数の設定

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

キーは、開発環境で

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

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

ビルドパックを追加

ビルドに、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 アプリ名

※基本的にはこれは不要なはず。

デプロイ設定

githubからの自動デプロイにしたい。

githubでproductionブランチを用意しておく。

Herokuのダッシュボードで、「Deply」をクリック。

「Deployment method」でgithubを選択し、リポジトリを保有しているgithubアカウントと連携させる。
連携に成功したら、

「Automatic deploys」でproductionブランチを選択。
これで、productionブランチへpushされるたびに、Herokuにもデプロイが走る。

補足
指定したブランチへpushがされた際、Herokuへのデプロイが行われるが、
migrationは自動で実行されないので、migrationファイルが新しく作成されている場合は、HerokuCLI上で

heroku run php artisan migrate -a アプリ名

が必要。

上記でgithubとの紐づけができたら、
「Manual deploy」でproductionブランチを選んで初回デプロイを実行してみる。

DB作成

一番安いessential-0プランで作成したいので。

heroku addons:create heroku-postgresql:essential-0 -a アプリ名

※無料プランはなくなったので、これが一番安い。

環境変数に

DATABASE_URL=postgres://~~~~~

が設定される。

DB_CONNECTION=pgsql

も追加する。

で、マイグレーション。

heroku run php artisan migrate -a アプリ名

データをSeederで作成する必要がある場合は、seederも実行。

heroku run php artisan db:seed DatabaseSeeder

DBバックアップ

heroku pg:info -a アプリ名
で、

Add-onに記載されている文字列を控える。
これが、次で使用するDATABASE_URLになる。

heroku pg:backups:schedule DATABASE_URL --at "02:00 Asia/Tokyo" -a アプリ名

DATABASE_URLの部分は、上記で確認した文字列をいれる。

これで、2時に毎日DBがバックアップされる。
バックアップは、HerokuPostgreの管理画面で確認可能。

参考記事：

ドメインの設定

※お名前ドットコムでドメインを取得してある前提※
※BasicDyno以上が必要なので、Herokuのアプリのトップ画面で、
「Dyno Formation」＞「Configure Dynos」にて、BasicDyno以上のプランに切り替える。

Heroku側で、「Settings」＞「Domains」＞「AddDomain」をクリック。
のちに、お名前ドットコム側で設定する、ホスト名を入力。
基本は、www.example.comのような形でOK。
※既に利用されているwww.example.comのようなドメインは使えないが。

すると、
「DNS target」として、文字列が発行されるので、これを控える。

お名前ドットコムにログイン
https://www.onamae.com/navi/login/

ドメイン一覧画面へ。
使用するドメイン名をクリックし、ドメイン詳細画面へ。
https://navi.onamae.com/domain

「ネームサーバー情報」＞「DNSレコード」＞「設定」をクリック。

当該ドメインを選んで、「次へ」。
「DNSレコード設定を利用する」＞「設定」をクリック。

下記のように記載し、「追加」をクリックし、「確認画面へ進む」を押して、画面に従って進めればOK。

ホスト名ーwwwなど。www以外で任意のサブドメインを使いたい場合はそれでも可。
TYPEーCNAME
TTLー3600
VALUEー先ほどHerokuで発行したDNS targetの文字列を貼り付け。

Herokuに戻って、Settings画面の「SSL Certificates」の「ConfigureSSL」をクリック。

ACMを選択し、「Next」をクリック。

これで、「Domains」の「ACMStatus」がWaiting...になる。
しばらくすると、
HerokuのSettings画面のDomainsが下記のように「OK」というステータスになるので、これで設定完了。
経験上、そこそこ反映に時間がかかるので、放置しておいて他の作業をして、あとで確認するくらいのほうがいい気がする。