#Laravel + Vue Starter Kit を Docker で検証して改良した fork を公開

公式の laravel/vue-starter-kit（Inertia + Vue 3 + shadcn-vue + Fortify）を Docker で動かし、本番運用に耐える形に書き直したフォークを公開する。結果は React 版と完全対応の 8 commits（Laravel backend が両 Starter で共通なので findings も同一）、テストは 40 passed → 44 passed / 151 assertions。Vue 独自に知りたい人が React 記事まで戻らなくて済むよう、Vue fork 単体で完結した作業ログとして記録した。

姉妹記事:

• Laravel + React Starter Kit の検証と改良版 fork（同一 backend、findings も同じ）
• Laravel + Livewire Starter Kit の検証と改良版 fork（Livewire 版、findings の一部が異なる）

#対象の公式サンプル

#検証日

2026-04-19

#検証環境

すべて Docker Desktop 上のコンテナ内で実施（CodeLift spec §5-6）。

#公式版の評価

docker compose run --rm app 一発で 40 passed (136 assertions)、22.99s。Vite ビルドも通る。テンプレートとしての完成度は React 版と同じで高い。

そのうえで Laravel backend 由来の改善余地が 8 件残っている。Fortify 設定、AppServiceProvider、bootstrap/app.php、config/logging.php などは React 版と同一コードなので、findings は完全対応する。「同じ指摘を別のリポに適用するだけ？」と言えばその通りだが、fork と diff を別個に公開しないと Vue チームは取り込みようがないので独立記事として切った。

#改良方針と具体的な改善点

長い説明は React 版記事に書いたので、ここでは 変更箇所とポイント を列挙する。各 finding の背景を知りたい場合は姉妹記事を参照。

#A. composer install 前に npm run build するとビルドが失敗する

@laravel/vite-plugin-wayfinder が php artisan wayfinder:generate を shell out する構造は React 版と同じ。

改良: README に Setup セクションを追加。composer install → npm run build の順を明記。

#B. .env.example が開発用デフォルトのみ

APP_DEBUG=true / LOG_LEVEL=debug / SESSION_ENCRYPT=false / SESSION_SECURE_COOKIE なし。

改良: 該当キーにインラインコメントで production 推奨値を併記。

#C. config/app.php の timezone が文字列リテラル

config/app.php:68 が 'timezone' => 'UTC'。APP_TIMEZONE が効かない。

改良:

-    'timezone' => 'UTC',
+    'timezone' => env('APP_TIMEZONE', 'UTC'),

#D. セキュリティレスポンスヘッダの middleware が無い

bootstrap/app.php は HandleAppearance / HandleInertiaRequests / AddLinkHeadersForPreloadedAssets の 3 つだけ。CSP / HSTS / nosniff / X-Frame-Options / Referrer-Policy / Permissions-Policy が全部無い。

改良: app/Http/Middleware/SetSecurityHeaders.php を新規作成、web stack 末尾に登録。

• 全環境: nosniff / X-Frame-Options: SAMEORIGIN / Referrer-Policy: strict-origin-when-cross-origin / Permissions-Policy
• 本番のみ: Strict-Transport-Security / Content-Security-Policy

CSP は 'unsafe-inline' を script-src に残してある。これは フロントが React でも Vue でも共通 で、Inertia が初期 props を <script> inline で出力するため。将来は nonce-based に切り替える余地あり（その際 HandleInertiaRequests 側で nonce 払い出し）。

テスト 2 件追加（tests/Feature/SecurityHeadersTest.php）。

#E. HTTPS scheme 強制ヘルパーが無い

リポ全域に forceScheme / forceHttps が 0 件。TLS を proxy で終端する構成で mixed-scheme URL が吐かれる。

改良: AppServiceProvider::configureDefaults に 3 行追加。

if (app()->isProduction()) {
    URL::forceScheme('https');
}

#F. パスワード強度ルール → 既対応

React 版と同じく、AppServiceProvider::configureDefaults に以下がすでに入っている:

Password::defaults(fn (): ?Password => app()->isProduction()
    ? Password::min(12)->mixedCase()->letters()->numbers()->symbols()->uncompromised()
    : null,
);

変更なし。公式のこの設定を見落として「デフォルトのまま」と誤認しないよう、改めて記録しておく。

#G. ログインのレート制限が email+IP の 1 段のみ

IP ローテーションでバイパス可能。

改良: 2 段構えに変更。

return [
    Limit::perMinute(5)->by($email.'|'.$ip),       // burst guard
    Limit::perHour(20)->by('login-account|'.$email), // account cumulative
];

#H. 2FA は機能として存在するが運用強制の入口が無い

Fortify feature として有効化・UI・テスト揃い済み。管理者に 2FA 必須化するポリシーヘルパー / リマインダーが無いのは defect ではなく運用設計の判断。コード変更なし、議論項目として残す。

#I. ログチャンネルがサブシステム別に分かれていない

config/logging.php は stack → single stream。認証イベントが他ログに埋もれる。

改良: 2 ファイル変更。

1. config/logging.php に auth チャンネル追加（daily、90 日保持、LOG_AUTH_LEVEL / LOG_AUTH_DAYS で env 可変）
2. app/Listeners/AuthActivitySubscriber.php 新規作成、AppServiceProvider::boot で Event::subscribe

subscriber が処理するイベント:

• Illuminate\Auth\Events\Registered / Login / Logout / Failed / PasswordReset
• Laravel\Fortify\Events\TwoFactorAuthenticationEnabled / TwoFactorAuthenticationDisabled

各レコードに user_id / email / ip / user_agent を構造化コンテキストで出す。テスト 2 件（tests/Feature/Auth/AuthLoggingTest.php）。

#J. 設定画面のレート制限が password endpoint だけ

routes/settings.php で throttle が明示されているのは settings/password のみ。

改良: profile update に throttle:10,1、profile destroy に throttle:3,1（アカウント削除は terminal なので絞る）。

#before / after 比較

#どのケースでこの改良版が向くか

• laravel/vue-starter-kit をテンプレに本番プロダクトを立ち上げる予定で、Vue 側 + Laravel 側の両方で production 基礎を整えたい
• 既にスキャフォールド済みのプロジェクトに cherry-pick で部分適用したい
• React か Vue かで迷っていて、「どちらにしても backend hardening は同じ作業量」を確認したい（答え: 同じ）

#React 版との使い分け

フロントエンドを React にするか Vue にするかは好み・採用市場・既存コード資産で決まる。Laravel backend の production 整備コストは両者で同一なので、ここでは技術選定の決め手にならない。

（3 本目の比較記事で React / Vue / Livewire の starter kit を production 観点で並べる予定）

#再現と取り込み

改良版は improvements ブランチ。手元で走らせる場合:

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

本体差分だけ見たい場合（CodeLift 検証用ファイルを除外）:

git diff main improvements -- . ':!codelift'

各 commit は独立なので cherry-pick 可能。

#ライセンス / 法務

• 元サンプル: MIT（Laravel LLC / 開発チーム）
• 改良版: MIT（CodeLift / JIT 株式会社）

本記事内の検証結果は検証日時点のもの。以降の upstream 更新により状況は変わる可能性がある。