強力なPHPフレームワークであるLaravelと、動的なJavaScriptライブラリであるInertia.jsは、シームレスに連動し、アプリ開発を効率化します。Laravelはサーバーサイドのタスクを簡素化し、Inertia.jsはクライアントサイドのインタラクションを容易にします。この2つを組み合わせることで、スムーズなデータフローとリアルタイムの更新を実現し、レスポンシブなウェブアプリケーションを開発できます。

KinstaのアプリケーションホスティングでLaravel-Inertiaアプリケーションをデプロイする手順は、以下のようになります。

  1. Kinstaのデータベースホスティングでデータベースを設定する
  2. アプリケーションを追加し、Node.jsとPHPのビルドパックを設定して、データベースを統合する
  3. Node.jsを設定し、Inertia環境用のInertiaとPHPの依存関係をインストールする

以下、順を追って詳しくご紹介していきます。

デプロイメントの要件

これからご紹介する手順では、以下が必要になります。

  • LaravelとVue.jsの基礎知識
  • データベースに精通していること
  • MyKinstaアカウント（お持ちでない場合は、無料利用枠をお使いください）

今回は例として、記事の一覧を提供し、読者に特定の記事を表示するブログアプリをデプロイしていきます。このアプリケーションは、Tailwind CSSでスタイリングし、LaravelとVue.jsで構築されています。

また、サーバーサイドのレンダリングは、Node.jsのJavaScript実行環境が処理。Inertia.jsフロントエンドアプリケーションのコンポーネントとLaravelバックエンド間の通信を調整し、サーバーサイドからフロントエンドを動的に更新します。

タイトルと記事一覧を表示するブログアプリケーション
タイトルと記事一覧を表示するブログアプリケーション

このアプリケーションの構築方法についてはこちらをご覧ください。また、アプリのソースコードの全貌はこちらで入手可能です。

Kinstaにアプリケーションをデプロイする

まずは、Kinstaのデータベースホスティングでアプリケーション用データベースを設定することから始めます。

  1. ログインまたはアカウントを作成し、MyKinstaを開く。
  2. 左サイドバーの「データベース」を選択し、「データベースを追加」をクリックする。
  3. 「基本情報」セクションでデータベースの情報（「データベースタイプ」（MySQL）および「バージョン」（8.0）を含む）を入力し、「続行」をクリックする。
  4. 「最終確認」セクションで支払い金額と支払い方法を確認し、「データベースを作成する」をクリックする。

Laravel環境のセットアップ

Kinstaのアプリケーションホスティングでは、以下の手順でLaravel環境をセットアップします。

  1. MyKinstaの左サイドバーにある「アプリケーション」を選択し、「アプリケーションを追加」をクリックする。
  2. アプリケーションのリポジトリを選択し、「コミットに際し自動でデプロイ」にチェックを入れる。「アプリケーション名」を入力して、「データセンターの所在地」を選択する（アプリケーションとデータベースは同じ場所で運用する必要があります）。
  3. 「環境変数」で「キー1」フィールドにAPP_KEYを入力。「値1」のキーはLaravelのオンラインジェネレーターで生成し、「続行」をクリック。
  4. 「ビルド環境」では「Buildpacksを使用してコンテナイメージを設定」を選択する。これにより、後からBuildpackを選択できます。
  5. 「リソース」でstartコマンドを指定。Laravelアプリケーションの場合は、以下のコマンドを使用してください。 
    php artisan serve --host 0.0.0.0 --port 8080
  6. 「最終確認」のステップでPodと支払い方法を確認し、「アプリケーションを作成する」をクリック。

これでアプリケーションのデプロイが始まりますが、Laravel-Inertiaアプリケーションのビルド時に必要なBuildpackを追加する必要があるため、失敗に終わります。

Buildpackの追加

  1. アプリケーションの左サイドバーから「設定」を開く。
  2. 「ビルド」タブを開き、「Buildpackを追加」をクリックして、Node.jsとPHPのBuildpackを追加。プライマリ言語を含むBuildpackはリストに最後に追加し、言語固有のBuildpackがアプリケーション環境の一般設定よりも優先されるようにします。
  3. 「Buildpackを追加」をクリックし、主要言語のビルドパック（PHP）が最後に追加されていることを確認する。

    Laravel-Inertiaアプリケーションのビルドパックを追加する。
    Laravel-Inertiaアプリケーションのビルドパックを追加する。

  4. 左サイドバーの「デプロイメント」を開き、「再デプロイ」をクリックする。

Node.js環境のセットアップ

  1. MyKinstaの左サイドバーから「プロセス」画面を開く。Laravel-Inertiaアプリケーションは、再読み込みせずにページを更新するためにViteスクリプトが必要になります。
  2. 「ランタイムプロセス」の「プロセスを作成」をクリック。プロセスの「タイプ」は「バックグラウンドプロセス」を選択し、以下のコマンドを追加します。 
    npm install && npm start
    Laravel-Inertiaアプリ用にNode.js startコマンドを作成
    Laravel-Inertiaアプリ用にNode.js startコマンドを作成

    プロセス名は、「Node」などMyKinsta内で認識できる任意のものを割り当てます。また、アプリケーションの要件と予算に基づき、「Podサイズ」と「インスタンス数」を選択してください（今回の例では、2つのCPUと8GBのRAMを使用）。

  3. 「続行」をクリックしてプロセスを作成。これにより再デプロイがトリガーされます。

データベース環境のセットアップ

  1. 「設定」画面の「接続」タブを開き、「許可済みのアプリケーション」セクションの「接続を追加」をクリック。
  2. データベースを選択し、その下にある「データベースにアクセスする環境変数を追加」にチェックをいれる。この操作により、すべてのデータベース環境変数が自動入力されます。
  3. アプリケーションのルートに格納されているconfigフォルダにある、database.phpファイルに応じて変数キーを編集。
  4. 以下のスクリーンショットのように、Laravelのキー「DB_DATABASE」「DB_USERNAME」「DATABASE_URL」を編集。

    環境変数の追加とキーの修正
    環境変数の追加とキーの修正

  5. 「APP_URL」という別の環境変数を追加。この値がアプリケーションのデプロイURLに。MyKinsta左サイドバーから「ドメイン」画面を開いて取得してください。

データベースの移行

  1. 左サイドバーの「プロセス」をクリック。
  2. 「ランタイムプロセス」セクションで「プロセスを作成」をクリックする。
  3. プロセスに「Migration」という名前をつけ、「バックグラウンドプロセス」を選択。「startコマンド」フィールドに以下のコマンドを貼り付けます。 
    php artisan migrate:fresh --seed --force

    このコマンドにより、Articleテーブルが移行され、アプリケーションに10件の記事が追加されます。プロセスは以下のスクリーンショットのようになり、Node、Migration、ウェブプロセスの情報が表示されます。

    Laravel-Inertiaアプリケーションをデプロイする際のランタイムプロセス
    Laravel-Inertiaアプリケーションをデプロイする際のランタイムプロセス

  4. 左サイドバーから「デプロイメント」画面を開き、「最近のデプロイ」をクリック。すると以下のようなページが表示され、タイトルとプレースホルダーのテキストと画像を含む記事の一覧が表示されます。

    Laravel-InertiaアプリケーションがKinstaに正常にデプロイされています。
    Laravel-InertiaアプリケーションがKinstaに正常にデプロイされています。

デプロイ後のアプリケーションの監視とメンテナンス

アプリケーションをデプロイした後、リクエストが急増すると問題が生じる可能性があります。Kinstaのアプリケーション分析機能は、これらの変更を監視するため、アプリケーションの健全性を維持するのに役立ちます。

「分析」画面には、リソース、パフォーマンス、HTTPリクエストが表示され、アプリケーションの動作を把握することができます。「パフォーマンス」タブでアプリケーションが多くのリソースを必要とするタイミングを観察し、必要に応じてスケールアップまたはスケールダウンすることができます。

ランタイムログは、問題を素早くデバッグするのにも有用です。ログエントリから問題の原因を特定できるため、アプリケーションの保守管理が容易になります。

デプロイ中に発生する主な問題のトラブルシューティング

Laravel-InertiaアプリケーションをKinstaにデプロイする際、何らかの問題に遭遇する可能性があります。

起こり得る問題として、データベースの作成時には、生成されたパスワードに特殊文字が追加されます。これがデータベースをLaravel-Inertiaアプリケーションに接続する際にロールバックエラーを引き起こすことがあります。この問題をトラブルシューティングするには、生成されたパスワードではなく、独自の強力なパスワードを使用してください。

自動コミットデプロイの失敗もよく見られる問題で、誤ったstartコマンドを指定すると、デプロイに失敗することがあります。この場合は、プロセスに入力ミスがないか、誤ったプロセスタイプを選択していないかを見直してください。

まとめ

LaravelとInertiaで構築したアプリケーションをKinstaにデプロイする方法をご紹介しました。大まかな流れとして、Buildpackとstartコマンドを設定してアプリケーションを構成し、データベースを作成して接続し、アプリケーションにデータを移行します。

LaravelとInertialを組み合わせることで、APIを手動で設定することなく、アプリとデータベースを接続することができます。

Kinstaでは、アプリケーションとデータベースの両方を運用することができます。データベースの外部接続を使用して、外部で実行されているアプリケーションに接続することも可能です。世界37箇所のデータセンターをサポートしているため、アプリケーションをユーザーの近くから配信でき、信頼性が高く安全なデプロイメントインフラストラクチャを利用しながら、タイムラグを削減することができます。

動的なウェブアプリケーションまたはデータベースを運用されている方は、ぜひKinstaをお試しください。ホスティングサービスの詳細はこちらでご覧いただけます。