Docker Inertiajs Laravel

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

本サイトの記事内にアフィリエイト広告が含まれる場合があります。

Docker Sail × Laravel 10 × Inertia環境でSSRに対応さたけど、サイトがうまく反映されないという記事のサムネイル画像

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました！ このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

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

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

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

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

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

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

  1. sailとDockerでLaravel10環境構築 ← この時点ではInertiajsはまだ導入していません
  2. Breeze導入時にInertia SSRを選択
  3. 公式ドキュメントをもとに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化したアプリケーションを 今後デプロイ作業も予定しているので、その辺りも記事にしていこうと思います！

  • この記事を書いた人

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました！ このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

-Docker, Inertiajs, Laravel
-,