Laravel 11 と Docker Sail・Viteでフルスタック開発環境を構築

2026年6月24日

Contents

1 1. Laravel 11 のインストールと Docker (Sail) 環境の構築
2 2. Node.js と Vite によるフロントエンドツールチェーンの構築
3 3. Breeze + Inertia.js による Vue 3 スキャフォールド
- 3.1 3‑1. Breeze と Inertia の導入手順
- 3.2 3‑2. 生成コードの構造とカスタマイズポイント
4 4. SPA 認証を実装する Sanctum + Pinia の活用例
5 5. 本番ビルド最適化とデプロイ時チェックリスト
6 6. まとめと次のステップ
- 6.1 重要ポイントの再確認

スポンサードリンク

1. Laravel 11 のインストールと Docker (Sail) 環境の構築

Laravel 11 は PHP 8.2 以上 が必須です（^8.2）。その前提でプロジェクトを作成し、公式が提供する Laravel Sail を使えば、ローカルと本番環境の差異を最小限に抑えた Docker 開発環境を数分で構築できます。本セクションでは、Composer でのプロジェクト生成から、Sail 用の Dockerfile と docker-compose.yml の設定ポイントまでを順を追って解説します。

1‑1. Composer で Laravel 11 プロジェクトを作成する手順

まずはローカルに PHP（8.2+）と Composer がインストールされていることを確認してください。以下のコマンドで Laravel 11 の雛形が生成されます。

composer create-project laravel/laravel:^11 my-app
cd my-app

composer create-project laravel/laravel:^11 my-app

cd my-app

作成後は .env.example をコピーし、.env として保存します。データベース名やアプリケーションキーなどの基本設定を行うだけで、すぐに Laravel の開発サーバーが起動できる状態になります。

1‑2. Sail 用 Dockerfile と docker-compose.yml の基本構成

Sail は公式イメージ laravelsail/php82-composer（PHP 8.2）をベースにしています。Laravel 11 が要求する PHP バージョンと合致させるため、php83 系列はまだ提供されていない点に注意してください。以下の例では Dockerfile で PHP バージョンを指定し、docker‑compose.yml に主要サービス（PHP・MySQL・Redis）を定義しています。

Dockerfile（プロジェクトルートに配置）

FROM ghcr.io/laravelsail/php82-composer:latest

# 必要な拡張モジュールをインストール
RUN docker-php-ext-install pdo_mysql bcmath

# 作業ディレクトリ設定
WORKDIR /var/www/html

FROM ghcr.io/laravelsail/php82-composer:latest

# 必要な拡張モジュールをインストール

RUN docker-php-ext-install pdo_mysql bcmath

# 作業ディレクトリ設定

WORKDIR /var/www/html

docker-compose.yml（主要サービスの定義）

services:
  laravel.test:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - &quot;${APP_PORT:-80}:80&quot;
    environment:
      WWWGROUP: '${WWWGROUP}'
    volumes:
      - ./:/var/www/html
    depends_on:
      - mysql
      - redis

  mysql:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: laravel
      MYSQL_USER: laravel
      MYSQL_PASSWORD: secret
    ports:
      - &quot;3306:3306&quot;

  redis:
    image: redis:7-alpine
    ports:
      - &quot;6379:6379&quot;

services:

laravel.test:

build:

context: .

dockerfile: Dockerfile

ports:

- "${APP_PORT:-80}:80"

environment:

WWWGROUP: '${WWWGROUP}'

volumes:

- ./:/var/www/html

depends_on:

- mysql

- redis

mysql:

image: mysql:8.0

command: --default-authentication-plugin=mysql_native_password

environment:

MYSQL_ROOT_PASSWORD: secret

MYSQL_DATABASE: laravel

MYSQL_USER: laravel

MYSQL_PASSWORD: secret

ports:

- "3306:3306"

redis:

image: redis:7-alpine

ports:

- "6379:6379"

ポイント
laravelsail/php82-composer が公式に提供されている最新イメージです。PHP 8.3 が必要な場合は自前で Dockerfile を作成し、FROM php:8.3-fpm 等を利用してください。
Sail の公式ドキュメントは常に最新版が公開されているので、設定変更の際は https://laravel.com/docs/11.x/sail#docker-compose-file を参照しましょう。

1‑3. コンテナ起動・停止と環境変数の調整

以下のコマンドで開発用コンテナをバックグラウンド起動できます。./vendor/bin/sail はプロジェクトに自動インストールされる CLI ツールです。

./vendor/bin/sail up -d   # 起動
./vendor/bin/sail down    # 停止

./vendor/bin/sail up -d # 起動

./vendor/bin/sail down # 停止

.env のデータベース設定は DB_HOST=mysql とすれば、Sail が内部 DNS で名前解決してくれます。さらに、APP_PORT や WWWGROUP などのカスタマイズ項目は同ファイルで一元管理できます。

2. Node.js と Vite によるフロントエンドツールチェーンの構築

Laravel 11 はデフォルトで Vite を採用しており、HMR（Hot Module Replacement）が高速に動作します。ここでは推奨する Node バージョンと、Vite と Laravel の連携設定を具体的に示します。

2‑1. 推奨 Node.js バージョンとインストール方法

Node.js は LTS 系列の 20.x が現在のベストプラクティスです。バージョン切替が容易な nvm を使うと、チーム全体で統一した環境を保ちやすくなります。

# nvm がインストールされている前提
nvm install 20
nvm use 20
node -v   # v20.x が表示されるはずです

# nvm がインストールされている前提

nvm install 20

nvm use 20

node -v # v20.x が表示されるはずです

npm はデフォルトで同梱されていますが、ワークスペース管理や高速インストールを求める場合は yarn@stable を併用しても問題ありません。

2‑2. Vite の初期設定と Laravel との連携

必要パッケージのインストール

npm install --save-dev vite @vitejs/plugin-vue laravel-vite-plugin

1 2	npm install --save-dev vite @vitejs/plugin-vue laravel-vite-plugin

`vite.config.ts` のサンプル（Laravel 用）

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

export default defineConfig({
  plugins: [
    vue(),
    laravel({
      input: ['resources/js/app.ts'],
      refresh: true,
    }),
  ],
  server: {
    // Docker 環境下でもホスト側からアクセスできるように
    host: true,
    hmr: { host: 'localhost' },
  },
});

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import laravel from 'laravel-vite-plugin';

export default defineConfig({

plugins: [

vue(),

laravel({

input: ['resources/js/app.ts'],

refresh: true,

}),

server: {

// Docker 環境下でもホスト側からアクセスできるように

host: true,

hmr: { host: 'localhost' },

});

Blade 側での呼び出し例

@vite(['resources/js/app.ts'])

1 2	@vite(['resources/js/app.ts'])

公式リファレンス
Vite の詳細設定は Laravel Docs（https://laravel.com/docs/11.x/vite）をご確認ください。外部リンクとして以前紹介した Dexall 記事は 2022 年時点の情報であり、現在は公式ドキュメントが最も信頼できます。

2‑3. 開発サーバーの起動とビルド

npm run dev   # 開発モード（HMR 有効）
npm run build # 本番用アセットの生成

npm run dev # 開発モード（HMR 有効）

npm run build # 本番用アセットの生成

開発中は ./vendor/bin/sail up -d と併せて実行すれば、PHP コンテナとフロントエンドがシームレスに連携します。

3. Breeze + Inertia.js による Vue 3 スキャフォールド

Laravel Breeze は軽量認証パッケージで、--inertia オプションを付与すると Vue 3 + Inertia の雛形が自動生成されます。本セクションではインストール手順と生成コードの重要ポイントを解説します。

3‑1. Breeze と Inertia の導入手順

composer require laravel/breeze --dev
php artisan breeze:install vue --inertia
npm install          # フロントエンド依存パッケージインストール
npm run dev           # 開発サーバー起動（Vite が自動でビルド）
php artisan migrate   # 認証テーブル作成

composer require laravel/breeze --dev

php artisan breeze:install vue --inertia

npm install # フロントエンド依存パッケージインストール

npm run dev # 開発サーバー起動（Vite が自動でビルド）

php artisan migrate # 認証テーブル作成

実行後、resources/js/Pages ディレクトリに Inertia 用の Vue コンポーネントが配置され、認証関連のビューや API ルートも自動生成されます。

3‑2. 生成コードの構造とカスタマイズポイント

ページコンポーネント (resources/js/Pages/Dashboard.vue 等) は Inertia が受け取った props を Vue 側で直接使用できます。
ルーティングは routes/web.php に以下のように記述されます。

use App\Http\Controllers\DashboardController;
use Inertia\Inertia;

Route::get('/dashboard', DashboardController::class)-&gt;name('dashboard');

use App\Http\Controllers\DashboardController;

use Inertia\Inertia;

Route::get('/dashboard', DashboardController::class)->name('dashboard');

コントローラ例（app/Http/Controllers/DashboardController.php）

public function __invoke()
{
    return Inertia::render('Dashboard', [
        'user' =&gt; auth()-&gt;user(),
    ]);
}

public function __invoke()

{

return Inertia::render('Dashboard', [

'user' => auth()->user(),

]);

}

参考情報
Inertia の公式ガイドは https://inertiajs.com/ にあります。Laravel Breeze との統合手順は https://laravel.com/docs/11.x/starter-kits#breeze を参照してください。

4. SPA 認証を実装する Sanctum + Pinia の活用例

Vue 3 と Inertia が提供するシングルページアプリケーションでは、Laravel Sanctum によるステートフル認証が最適です。ここでは Sanctum 設定から、Pinia ストアでのユーザー状態管理、Axios のインターセプタによる CSRF 対策までを実装例とともに示します。

4‑1. Sanctum のセットアップ手順

composer require laravel/sanctum
php artisan vendor:publish --provider=&quot;Laravel\Sanctum\SanctumServiceProvider&quot;
php artisan migrate

composer require laravel/sanctum

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

php artisan migrate

config/sanctum.php の stateful 配列にフロントエンドのホスト（例：localhost, 127.0.0.1）を追加し、api ガードで SPA を保護します。

'stateful' =&gt; explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),

1 2	'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),

4‑2. Pinia ストアの実装例（認証状態管理）

インストールとストア作成

npm install pinia

1 2	npm install pinia

resources/js/stores/auth.ts

import { defineStore } from 'pinia';
import { ref } from 'vue';
import axios from '@/axios';   // 後述のカスタムインスタンス

export const useAuthStore = defineStore('auth', () =&gt; {
  const user = ref&lt;any&gt;(null);
  const isAuthenticated = ref(false);

  async function fetchUser() {
    const { data } = await axios.get('/api/user');
    user.value = data;
    isAuthenticated.value = true;
  }

  async function logout() {
    await axios.post('/logout');
    user.value = null;
    isAuthenticated.value = false;
  }

  return { user, isAuthenticated, fetchUser, logout };
});

import { defineStore } from 'pinia';

import { ref } from 'vue';

import axios from '@/axios'; // 後述のカスタムインスタンス

export const useAuthStore = defineStore('auth', () => {

const user = ref<any>(null);

const isAuthenticated = ref(false);

async function fetchUser() {

const { data } = await axios.get('/api/user');

user.value = data;

isAuthenticated.value = true;

}

async function logout() {

await axios.post('/logout');

user.value = null;

isAuthenticated.value = false;

}

return { user, isAuthenticated, fetchUser, logout };

});

4‑3. Axios カスタムインスタンスと CSRF トークン取得ロジック

resources/js/axios.ts

import axios from 'axios';

const api = axios.create({
  baseURL: '/api',
  withCredentials: true,   // Cookie（CSRF）を自動送信
});

export async function getCsrfToken() {
  await api.get('/sanctum/csrf-cookie');
}

export default api;

import axios from 'axios';

const api = axios.create({

baseURL: '/api',

withCredentials: true, // Cookie（CSRF）を自動送信

});

export async function getCsrfToken() {

await api.get('/sanctum/csrf-cookie');

}

export default api;

ログインコンポーネント例（`Login.vue`）

&lt;script setup lang=&quot;ts&quot;&gt;
import { ref } from 'vue';
import api, { getCsrfToken } from '@/axios';
import { useAuthStore } from '@/stores/auth';

const email = ref('');
const password = ref('');
const auth = useAuthStore();

async function submit() {
  await getCsrfToken();               // CSRF Cookie を取得
  await api.post('/login', {
    email: email.value,
    password: password.value,
  });
  await auth.fetchUser();              // ログイン成功後にユーザー情報を取得
}
&lt;/script&gt;

&lt;template&gt;
  &lt;form @submit.prevent=&quot;submit&quot;&gt;
    &lt;!-- 入力フィールド省略 --&gt;
    &lt;button type=&quot;submit&quot;&gt;ログイン&lt;/button&gt;
  &lt;/form&gt;
&lt;/template&gt;

import { ref } from 'vue';

import api, { getCsrfToken } from '@/axios';

import { useAuthStore } from '@/stores/auth';

const email = ref('');

const password = ref('');

const auth = useAuthStore();

async function submit() {

await getCsrfToken(); // CSRF Cookie を取得

await api.post('/login', {

email: email.value,

password: password.value,

});

await auth.fetchUser(); // ログイン成功後にユーザー情報を取得

}

</script>

</form>

</template>

外部リファレンス
Sanctum の最新情報は公式ドキュメント（https://laravel.com/docs/11.x/sanctum）をご確認ください。古い記事へのリンクは削除し、公式資料に統一しました。

5. 本番ビルド最適化とデプロイ時チェックリスト

開発環境から本番環境へ移行する際は、Vite のコードスプリッティングやキャッシュ戦略を正しく設定しないと、不要なバンドルが残りページ表示速度が低下します。本章では具体的なビルドオプションと、デプロイ前に必ず確認すべき項目を表形式でまとめます。

5‑1. Vite のコードスプリッティング設定例

vite.config.ts に build.rollupOptions.manualChunks を追加すると、サードパーティライブラリが自動的に別チャンク化されます。

export default defineConfig({
  plugins: [vue(), laravel({ input: ['resources/js/app.ts'] })],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 例: vue, axios, pinia を個別チャンクに分割
            return id.toString().split('node_modules/')[1].split('/')[0];
          }
        },
      },
    },
  },
});

export default defineConfig({

plugins: [vue(), laravel({ input: ['resources/js/app.ts'] })],

build: {

rollupOptions: {

output: {

manualChunks(id) {

if (id.includes('node_modules')) {

// 例: vue, axios, pinia を個別チャンクに分割

return id.toString().split('node_modules/')[1].split('/')[0];

}

});

5‑2. 本番環境向け環境変数とキャッシュ戦略

項目	推奨設定	理由
環境変数	`.env.production` に `APP_ENV=production`、`VITE_API_URL=https://api.example.com` を記載	本番用エンドポイントとデバッグ情報の除外
HTTPS	Sail の Nginx コンテナで Let’s Encrypt（本番）または自己署名証明書を利用	Mixed Content エラー防止
アセットキャッシュ	Nginx に `expires max; add_header Cache-Control "public, immutable";` を設定	ファイル名にハッシュが付くため長期キャッシュが安全に利用できる
Laravel キャッシュコマンド	デプロイ後必ず `php artisan config:cache`, `route:cache`, `view:cache` を実行	設定変更が即時反映され、パフォーマンス向上

5‑3. デプロイ手順チェックリスト（箇条書き）

コードのビルド
bash npm run build # Vite の本番アセット生成 composer install --optimize-autoloader --no-dev
環境変数・シークレットの配置（.env.production を本番サーバーへコピー）
データベースマイグレーション
bash php artisan migrate --force
キャッシュコマンド実行（前述表参照）
Docker コンテナ再起動（Sail が利用できる場合）
bash ./vendor/bin/sail up -d --build
ヘルスチェック：/api/user などのエンドポイントが正しく応答するか確認

最新情報は Laravel Docs（https://laravel.com/docs/11.x/deployment) を常に参照してください。過去の外部記事はバージョン差異で内容が古くなることがあります。

6. まとめと次のステップ

本ガイドでは、Laravel 11 + Vue 3（Inertia） のフルスタック開発を前提に、Docker（Sail）・Node.js・Vite・Breeze・Sanctum・Pinia といった主要ツールの設定とベストプラクティスを網羅しました。以下に実務導入時のロードマップを示します。

リポジトリ作成 → Composer + npm インストール
Docker（Sail）でローカル環境起動 (./vendor/bin/sail up -d)
データベースと認証テーブルのマイグレーション
フロントエンド開発サーバー起動 (npm run dev) → ブラウザで http://localhost 確認
機能実装（Breeze + Inertia、Pinia ストア、Sanctum 認証）
本番ビルド & デプロイ（npm run build＋Laravel キャッシュコマンド）

重要ポイントの再確認

Laravel 11 は PHP 8.2 以上 が必須。Sail の公式イメージは php82-composer を使用すること。
Vite と Laravel の連携は laravel-vite-plugin でシンプルに実装でき、開発中の HMR が高速化。
Breeze + Inertia のスキャフォールドで認証 UI と API が同時に生成され、SPA 開発が即座に開始可能。
Sanctum + Pinia によるステートフル認証は withCredentials 設定と CSRF Cookie 取得を忘れずに実装すれば安全。
本番デプロイでは コードスプリッティング、キャッシュ戦略、HTTPS の三点がパフォーマンスの鍵となる。

これらの手順と注意点を踏まえてプロジェクトを立ち上げれば、最新スタックで安定かつ高速なフルスタックアプリケーションが実現できます。ぜひ本ガイドをリファレンスに、開発・運用フェーズ全体で活用してください。

スポンサードリンク

-Laravel

comment コメントをキャンセル

: Laravel

Laravel 11でAPIプロジェクトを作成・設定する方法

Laravel 11でAPI開発を始めるためのプロジェクト作成、環境設定、ルートとミドルウェアの基本構造、CRUD生成、バージョニング・認証までを網羅した手順。

: Laravel

Laravel 11 API開発の基礎とルート設定ガイド

Laravel 11におけるAPI開発の基本とルート設定の重要性について解説。バージョン管理や認証ミドルウェアの最適化、リソースコントローラーの活用方法を詳しく紹介します。

: Laravel

Railway無料プラン2026:Laravelデプロイ制限と手順

2023年以降のRailway無料プラン変更内容とLaravelデプロイ手順を解説。リソース制限やDBアドオンコスト、Renderなど代替サービス比較も掲載。

ElectronアプリをmacOSでパッケージングする方法 | electron-builderとelectron-packager比較

2026年版 LeetCode 初心者登録手順と使い方 | 無料ユーザー向け新機能

Laravel 11 と Docker Sail・Viteでフルスタック開発環境を構築

1. Laravel 11 のインストールと Docker (Sail) 環境の構築

1‑1. Composer で Laravel 11 プロジェクトを作成する手順

1‑2. Sail 用 Dockerfile と docker-compose.yml の基本構成

Dockerfile（プロジェクトルートに配置）

docker-compose.yml（主要サービスの定義）

1‑3. コンテナ起動・停止と環境変数の調整

2. Node.js と Vite によるフロントエンドツールチェーンの構築

2‑1. 推奨 Node.js バージョンとインストール方法

2‑2. Vite の初期設定と Laravel との連携

必要パッケージのインストール

vite.config.ts のサンプル（Laravel 用）

Blade 側での呼び出し例

2‑3. 開発サーバーの起動とビルド

3. Breeze + Inertia.js による Vue 3 スキャフォールド

3‑1. Breeze と Inertia の導入手順

3‑2. 生成コードの構造とカスタマイズポイント

4. SPA 認証を実装する Sanctum + Pinia の活用例

4‑1. Sanctum のセットアップ手順

4‑2. Pinia ストアの実装例（認証状態管理）

インストールとストア作成

4‑3. Axios カスタムインスタンスと CSRF トークン取得ロジック

ログインコンポーネント例（Login.vue）

5. 本番ビルド最適化とデプロイ時チェックリスト

5‑1. Vite のコードスプリッティング設定例

5‑2. 本番環境向け環境変数とキャッシュ戦略

5‑3. デプロイ手順チェックリスト（箇条書き）

6. まとめと次のステップ

重要ポイントの再確認

1. Laravel 11 のインストールと Docker (Sail) 環境の構築

1‑1. Composer で Laravel 11 プロジェクトを作成する手順

`vite.config.ts` のサンプル（Laravel 用）

3. Breeze + Inertia.js による Vue 3 スキャフォールド

ログインコンポーネント例（`Login.vue`）