Livewire スターターキットを検証して改良した

公式の laravel/livewire-starter-kit（Livewire v4 + Flux + Alpine）を Docker で動かし、本番運用に耐える形に書き直したフォークを公開する。テストは公式版の 33 passed をベースに 37 passed / 92 assertions（2026-07-23 に Docker で再実行し一致を確認）。本記事は Livewire 固有の論点に絞る — 3 つのスターターキットの中で Livewire は最も backend 以外の差分が大きい。

共通 backend 改修（6 件）は pillar に集約:

→ Laravel スターターキット共通 backend を本番化する 6 つの改修

#対象の公式サンプル

#公式版の検証結果

docker compose run --rm app で 33 passed (77 assertions)。React / Vue 版の 40 passed よりテスト数が少ないが、これは Livewire 変種がフォームの挙動を Livewire component テストハーネス経由で検証するためで、Inertia HTTP ハーネスを使う React / Vue 版とアサーションの分布が違うだけ。カバレッジが劣るわけではない。

#Livewire が React / Vue と構造的に違う 4 点

Laravel backend は 3 kit で共通だが、Livewire 変種は次の点が違い、それが findings の構成を変える。

この 4 点が、以下の Livewire 固有の差を生む。

再検証 (2026-07-23): 上記 4 点を上流の現在の HEAD (laravel/livewire-starter-kit@main) で再確認した。bootstrap/app.php の withMiddleware() は今も中身が // だけ、vite.config.js（.ts ではない）に wayfinder の記載は無し、settings は今も Route::livewire(...)。4 点とも変わっていない。

#Wayfinder の落とし穴は起きない

React / Vue で問題になる「composer install 前の npm run build が意味不明に失敗する」現象は、Livewire 版では起きない。vite.config.js（React/Vue は .ts）に @laravel/vite-plugin-wayfinder が入っていないため。ビルドが artisan を shell out しないので、vendor/autoload.php への依存がない。

公式 README に Setup セクションがないのは 3 kit 共通の小さな不備なので、改良版では contributor 向けに追加した。ただし「Wayfinder のバグに見える罠」という React/Vue 固有の深刻さはない。

#セキュリティヘッダ middleware — 初期状態が React/Vue より悪い

pillar finding D（セキュリティヘッダ）は 3 kit 共通だが、Livewire の初期状態が一番悪い。bootstrap/app.php の withMiddleware() は callback の中身が // コメントだけで、append された web middleware が 1 つもない。React / Vue は少なくとも Inertia 系の 3 つが入っていたが、Livewire はゼロ。

改良版の SetSecurityHeaders middleware は、この fork で 最初に append される web middleware になる。

#CSP — nonce 化の対象が React / Vue と違う

Livewire は初期 state を inline script に埋めない。 クライアント JS は外部 <script src> で読まれ、コンポーネントの状態は HTML 要素の wire:* 属性で保持される。更新は /livewire/update への fetch である。

そのため 'unsafe-inline' 無しの nonce ベース CSP に素直に移行できる。nonce を付ける対象は Livewire / Flux が出力する bootstrap script になる。

訂正 (2026-07-23): 本節は当初「これが Livewire の最大の固有性であり、Inertia 版は初期 state を inline <script> に埋めるので 'unsafe-inline' を外すには Inertia の改造が要る」と書いていた。後半は誤りだった。 Inertia が出力するのは type="application/json" のデータブロックで、ブラウザが実行しないため script-src の対象外であり、Inertia 本体の改造は不要である（検証記事）。

したがって nonce 化できること自体は Livewire の固有性ではない。3 kit すべてで可能である。 違うのは 何に nonce が要るかで、Inertia 系ではスターターキット自身が書いたダークモード判定の inline script が対象になる。

この hardening 記事では 3 kit で CSP ポリシーを揃える（'unsafe-inline' を保守的に残す）。nonce 化の実装は独立した follow-up 記事に分けた:

→ Laravel + Livewire Starter Kit の CSP を nonce 化

#J. settings のレート制限 — Livewire では形が違うので保留

React / Vue では routes/settings.php の PATCH/DELETE に throttle ミドルウェアを足すだけで profile 更新・削除を制限できた。

Livewire は違う。routes/settings.php は Route::livewire('settings/profile', ...) でコンポーネントページを描画する形で、プロフィール更新やパスワード変更は Livewire 内部の AJAX エンドポイント（/livewire/update）を経由する。ルートレベルの throttle は初期ページロードにしか効かず、コンポーネントのアクションには効かない。

正しい対策は「コンポーネントクラスのアクションメソッド内で RateLimiter::tooManyAttempts を呼ぶ」方式だが、これは React/Vue とは substantively 違う commit になる。本 pass では保留とし、別の Livewire 固有記事で扱う予定。

#改良版の commit 構成 — 7 commits

React/Vue は 8 commits、Livewire は 7。差は finding J — Livewire では適用形態が違うため保留した。

テストは公式版 33 passed → 改良版 37 passed / 92 assertions。

#before / after（Livewire 固有部分）

共通 backend 6 件の before / after は pillar 記事を参照。

#どのケースで向くか

• laravel/livewire-starter-kit をベースに本番プロダクトを立ち上げる予定
• PHP / Blade 中心でフロントを完結させたい
• CSP を厳格に絞りたい — Livewire は nonce 化で 'unsafe-inline' を外せる（Inertia 版より有利）

#再現と取り込み

git clone https://github.com/codelift-dev/livewire-starter-kit.git
cd livewire-starter-kit
git checkout improvements
docker compose -f codelift/docker-compose.yml build
docker compose -f codelift/docker-compose.yml run --rm app

本体差分のみ: git diff origin/main improvements -- . ':!codelift'

#関連記事

• pillar: Laravel スターターキット共通 backend を本番化する 6 つの改修
• follow-up: Livewire Starter Kit の CSP を nonce 化
• 姉妹 cluster: Inertia 系（React / Vue）版
• 比較: React / Vue / Livewire 比較

#ライセンス

元サンプル / 改良版とも MIT。検証結果は検証日時点のもの。