1. HOME
  2. プログラミング
  3. Laravel
  4. Laravel9+Inertia.js+Vite+(React or Vue3)インストールからXSERVERにデプロイするまで

Laravel9+Inertia.js+Vite+(React or Vue3)インストールからXSERVERにデプロイするまで

目次

はじめに

Laravel９+ReactまたはVue3の構築にLaravel Breezeを使います。Breezeはコマンド1つでログイン機能を実装してくれるだけではなく、Inertia.js環境も整えてくれます。

ローカル環境でLaravel+React or Vue3を構築してから、完成したらXSERVERへGithub経由でデプロイしていきます。

XSERVERではnode.jsが公式には対応していないので、SSRじゃなくSSGで構築していきます。
ある程度いろいろ分かってる人向けです（細かい説明や補足は省略しています）

Laravel+React or Vue3

ローカル環境にそれぞれインストールしていきます。開発環境は各自用意してください。

Laravel９インストール

Laravel９はPHP８以上が必要です。（開発環境のPHPのバージョンが低いと９が入らないので注意）

composer create-project laravel/laravel プロジェクト名

必要に応じて以下のファイルの権限を変更しておきます。

chmod 777 storage -R
chmod 777 bootstrap/cache -R

Laravel Breezeインストール

新しいBreezeは、ユーザー情報の編集機能も追加されてより便利になりました。

composer require laravel/breeze --dev

以下のコマンドで、ビュー、ルート、コントローラなどを構築します。

# Reactの場合
php artisan breeze:install react

# Vue3の場合
php artisan breeze:install vue

ちなみにSSRを実装する場合はここで、--ssrオプションを付けます。今回はSSGなので付けません。

マイグレーション

.envにデータベースの接続情報など必要なものを追加してマイグレーションします。データベースは各自ローカル環境に用意しておいてください。

php artisan migrate

コンパイル

続いて、ライブラリインストールとコンパイルを行います。

npm install
npm run dev

Laravel９では、デフォルトのアセットコンパイルツールとしてLaravel MixではなくViteが採用されています。より高速になっているとのこと。

Viteでは、npm run devコマンドでサーバが起動し、Mixでいうところのwatch（ファイルが更新されたら自動的にコンパイルを実行する）が実行状態になります。さらにホットリロードにも対応しており、ファイルを更新するとブラウザ表示も自動的に更新されるという神仕様。

確認

開発環境によって変わりますが、通常なら以下のURLで、LaravelのWelcomeページが表示されるはずです。

http://localhost

表示されない場合は、この後の「トラブルシューティング」を参照してみてください。

ビルド

開発が終わったら、本番環境用にビルドをします。

npm run build

XSERVERへデプロイ

ローカルでアプリの動作が確認できたらGithub経由でXSERVERへデプロイして行きます。

Githubに新しいリポジトリを作成しておきます。GithubやXSERVERとのSSH接続などについてはここでは省略します。

ローカルからGithubへpush

Gitを有効にします。

git init

ここで、.gitignoreファイルを編集します。（ここ重要！）

デフォルトでは、「/public/build」が除外されていますが、SSGの場合「build」フォルダがないとフロントが機能しないので、この行を消してコミットに含めておきます。

コミットします。

git add .
git commit -m "first commit"

リモートリポジトリにGithubを登録します。

git remote add origin git@github.com:アカウント名/リポジトリ名.git

Githubへpushします。

git push origin master(またはmain)

GithubからXSERVERへクローン

XSERVERの公開ディレクトリは「public_html」ですが、セキュリティ上の観点からもう一つ上の階層へクローンしシンボリックリンクでつなぎます。

例えば、「app」というディレクトリを作ってその中にクローンする場合、ドメインディレクトリ直下の「public_html」が置いてある階層で以下のコマンド。

git clone git@github.com:アカウント名/リポジトリ名.git app

シンボリックリンク作成

ln -s $HOME/xxxx.com/app/public $HOME/xxxx.com/public_html/public

.htaccessファイルの設置（public_htmlの中にすでにある場合は追記します）

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)$ public/$1 [QSA,L]
</IfModule>

この辺りの詳細は以下の記事で書いてます。

【Laravel】エックスサーバで、ドメイン名でアクセスできるようにする

データベース作成

XSERVERでデータベースを作成します。サーバーパネルで新規に作成します（詳細は省略）

以下の情報をメモっておきます。

  • DBホスト名
  • データベース名
  • DBユーザー名
  • DBパスワード

Laravelの.envファイルを作成してデータベース情報を書き込みます。（他必要な環境変数は各自設定してください）

DB_CONNECTION=mysql
DB_HOST=mysqlxxxx.xserver.jp
DB_PORT=3306
DB_DATABASE=account_dbname
DB_USERNAME=account_username
DB_PASSWORD=password

composer install

インストールする前に、XSERVERのPHPバージョンを確認します。Laravel９はPHP８以上が必要です。

XSERVERでは、アプリが動く時に使われるPHPとコマンドライン上で使われるPHPとではバージョンが異なります。以下の記事を参考に、両方ともPHPのバージョンが８以上になるようにします。

composer install でエラー、PHPのバージョンの違い（エックスサーバ）

PHPバージョンが８以上になったら、

composer install

マイグレーション

php artisan migrate

以上で、Laravel+React or Vue3をXSERVERへデプロイできたと思います。

トラブルシューティング

自分が実装中にひっかかったトラブルについてメモしておきます。

フロントとつながらない

自分の開発環境はDockerですが、vite.config.jsにserver:{}を追加しないと繋がらなかった。

下記コードはReactの例（server:{}部分はVueも同じです）

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: true,
        hmr: {
            host: 'localhost'
        },
    },
});

ホットリロードが効かない

Windows環境の場合、vite.config.jsにusePolling: trueを設定をしないと有効にならない。

#一部抜粋
server: {
    host: true,
    hmr: {
        host: 'localhost'
    },
    watch: {
        usePolling: true
    }
},

コンパイルが遅い

自動コンパイル時の動作が重い場合は、監視対象ファイルを限定することで解消される場合がある。例えば「vendor」フォルダを除外する場合は、vite.config.jsにignored:で以下のように指定する。

#一部抜粋
server: {
    host: true,
    hmr: {
        host: 'localhost'
    },
    watch: {
        ignored: [
            '**/vendor/**'
        ],
        usePolling: true
    }
},

ポート開放

npm run devで、Local: http://localhost:5173/ と表示されている場合、5173ポートを開放する必要がある。Dockerの場合、例えばdocker-compose.ymlにports:で指定する。

#一部抜粋
services:
  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    ports:
      - 5173:5173
    volumes:
      - ./laravel/:/var/www/html

ブラウザキャッシュ

これはレアケースですが、自分はFirefoxで動作確認してるんですが、一度接続エラーで繋がらなかった場合、設定を正しく直してもキャッシュが悪さして繋がらない事があった。ブラウザのキャッシュをクリアすることで繋がった。Chromeでは特に起きなかったのでFirefoxの問題だと思われる。

開発についての余談

フロント

「views」フォルダ内のBladeテンプレートは使わず、代わりに「resources/js」内でフロント部分を構築します。コンポーネント化され「Components」「Layouts」「Pages」にそれぞれ配置されています。デフォルトで用意されているファイルを覗いてみると開発のヒントになります。

ちなみにスタイルシートはデフォルトでTailwind CSSが採用されています。

ルーティング

フロントエンドフレームワークのように、ルーティングもここでできそうに見えますが、今回の手順でインストールした場合は、今まで通りLaravel側の「routes/web.php」で行います。

中身を覗いてみると、returnするところでInertia::render()とあります。

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

LaravelとReact or Vue3の連携にInertia.jsが使われていて、両者のやり取りをよしなにやってくれるようです。