Laravel + Vue + Vite + inertia.js 環境構築(IPでアクセスするとき) #Laravel

はじめに

前々回記事、前回記事でVue, Vite, Laravelの開発環境をオンプレのVMware上に構築しました。
上記の知識を活用しつつ、同様にオンプレのVM上に「Laravel + Vue + Vite + inertia.js」を利用した構成で開発環境を立てようと思います。

今回の記事のゴールは「Laravel + Vue + Vite + inertia.js」の構成を開発環境として最低限レベルで構築して簡易的なアプリが動作するところまでとします。

参考

基礎知識

Inertiaとは？

クライアントサイドのルーティングライブラリでaタグのラッパー<Link>をコンポーネントを使用してページの移動を行う。
サーバーサイドのルーティングとコントローラーを利用してVue,React,Sveltを使用することが可能にできる。

Inertia.jsを使えば、Laravel開発者はこれまで通り作業が行えます。

LaravelとVueだけでいいのでは？

LaravelとVueだけでSPAを構築するとフロントエンドはJSだけを使用した形となり操作性がいまいち。
リンクをクリックするたびにページの読み込みでクライアントサイドのFWが再起動する。

手順

各種インストール

# プロジェクト作成
composer create-project laravel/laravel laravel10-vue3-inertiajs
cd laravel10-vue3-inertiajs

# Vue関連のインストール
npm install --save-dev vue npm install --save-dev @vitejs/plugin-vue npm install --save-dev @inertiajs/inertia-vue3

viteの設定(vite.config.js)

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

export default defineConfig({
plugins: [
    vue(),
    laravel({
        input: ['resources/css/app.css', 'resources/js/app.js'],
        refresh: true,
    }),
],
server {
	host:'xxx.xxx.xxx.xxx', // ipを記載する
	port: 5731
}
});

Inertia.jsの導入・設定

# インストール
composer require inertiajs/inertia-laravel

# Inertiaのミドルウェア作成
php artisan inertia:middleware

/app/Http/Kernel.phpに登録（webの中）

\App\Http\Middleware\HandleInertiaRequests::class,

CreateInertiaAppの作成
resources/js/app.js

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; 
createInertiaApp({
	resolve: (name) =>
		resolvePageComponent(
			`./Pages/${name}.vue`,
			import.meta.glob("./Pages/**/*.vue")
		),
	setup({ el, App, props, plugin }) {
		createApp({ render: () => h(App, props) })
			.use(plugin)
			.mount(el);
	},
});

app.blade.phpとvueの連携

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @inertiaHead
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    @inertia
</body>

</html>

ルーティング設定

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('hello-world');
});

Hello World表示用のVueファイルを作成
resources/js/Pages/hello-world.vue

<script>
export default {
    data() {
        return {
            greeting: "Hello World!",
        };
    },
};
</script>

<template>
    <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
    color: red;
    font-weight: bold;
}
</style>

動作確認

php artisan serve --host 0.0.0.0

npm install && npm run dev