Docker Sail × Laravel 10 × Inertia環境でSSRに対応させたけど、SSR化されない

LaravelとInertiaとVueの環境構築をして、SSRに対応させるのを実装していました！

公式ドキュメントだけでは、ハマったポイントが多かったので、エラー周りも詳しく書いています。

Laravel のアプリ開発や、WEBデザイン、グラフィックデザインのご依頼大歓迎です…🥺
お問い合わせページからお気軽にご連絡ください。

Laravel 10 × Inertia環境で SSRの構築手順

軽く導入方法についてもお話しします。

流れとしては、以下になります。

sailとDockerでLaravel10環境構築 ← この時点ではInertiajsはまだ導入していません
Breeze導入時にInertia SSRを選択
公式ドキュメントをもとにSSR設定

http://localhost:13714に接続してもサイトが見れない

まず1つ目に、ちょっとハマった部分。

$ sail php artisan inertia:start-ssr
Starting SSR server on port 13714...
Inertia SSR server started.

Inertia SSR server started. ってなってるんで、一見いけてそうですけど、http://localhost:13714 を見るとサイトが見れないいい。

どうなった状態がSSR化成功か？

SSRの接続ですが、以下のNOT_FOUNDが返ってきたら成功のようです。

curl http://localhost:13714
{"status":"NOT_FOUND","timestamp":1708435695439}%

Docker コンテナ内で SSR サーバーが正しく起動しているか確認する

Docker コンテナ内で SSR サーバーが正しく起動しているか確認するために、以下のコマンドを実行してコンテナ内に入り、手動で SSR サーバーにリクエストを送ってみます。

$ sail shell
# コンテナ内で
$ curl http://localhost:13714

このコマンドが成功し、期待したレスポンスが返ってくれば、SSR サーバー自体は正しく動作しています。

私はこの状態で、先ほどご紹介したNOT_FOUND が返ってきたので、成功していました。

ここでレスポンシブが返ってきたということは、Dockerのポート設定が原因です。

docker-compose.yml に以下のポート番号を追加します。

services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: "${WWWGROUP}"
        image: sail-8.1/app
        extra_hosts:
            - "host.docker.internal:host-gateway"
        ports:
            - "${APP_PORT:-80}:80"
            - "${VITE_PORT:-5173}:${VITE_PORT:-5173}"
            - "13714:13714"  ← 追加！
(略)

そして、Dockerコンテナを再起動します。

$ sail down
$ sail up -d

この状態で、もう一度下記のコマンドを実行すると、

curl http://localhost:13714
{"status":"NOT_FOUND","timestamp":1708435695439}

status: NOT_FOUNDになりました！！

ブラウザで見ると、上記のような画面になります。

NOT_FOUNDとなっていますが、今までアプリを見ていたURLで、アプリケーションは閲覧可能なのでご安心を…

サイトを見るとエラーが出てSSR化されていない状態になってしまう

先ほど、NOT_FOUND が返ってきたのにも関わらず、アプリケーションを見ると、SSR化されていません。

sail php artisan inertia:start-ssr を叩いた状態だと、以下のようなエラーが出ます。

$ sail php artisan inertia:start-ssr

[Vue warn]: Property "route" was accessed during render but is not defined on instance.
TypeError: _ctx.route is not a function
    at file:///var/www/html/bootstrap/ssr/ssr.js:2231:24
    at renderComponentSubTree (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:692:9)
    at renderComponentVNode (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:638:12)
    at renderVNode (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:752:14)
    at renderComponentSubTree (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:707:7)
    at renderComponentVNode (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:638:12)
    at renderVNode (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:752:14)
    at renderComponentSubTree (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:707:7)
    at renderComponentVNode (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:638:12)
    at renderToString (/var/www/html/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:911:24)
[Vue warn]: Property "route" was accessed during render but is not defined on instance.

これは、Laravel の route 関数をフロントエンドの Vue コンポーネント内で使用しようとしていることが原因のエラーです。

Ziggyのセットアップが必要です。

Ziggyのセットアップ

Ziggy を使用するには、Laravel のルート定義を JavaScript で利用可能にする必要があります。

これを行うには、Laravel プロジェクトの routes/web.php ファイルで定義されたルートに基づいて、Ziggy のルート定義ファイルを生成します。

sail php artisan ziggy:generate

resources/js/ziggy.js が作成されていれば完了です！

次に、resources/js/ssr.js の設定をしていきます。

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'; // 追加
import { Ziggy } from "./ziggy"; // 追加

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy) // 追加
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

これで、

sail npm run build

php artisan inertia:start-ssr

を行うと、SSR化したサイトが見れるようになりましたー！

まとめ

Inertiajsかなり便利なので、SSR化して使えるのはSEO的な面から嬉しいですよね。

また、InertiajsでSSR化したアプリケーションを今後デプロイ作業も予定しているので、その辺りも記事にしていこうと思います！