第2回 Laravel11 環境構築メモ（Laravel 11+React+Vite+Typescript）

Kiaomoto

このページでは、Docker上でLaravel 11+React+Vite+Typescriptの環境を構築していきます。今日のゴールはLaravelのプロジェクトを作成して、Breeze、React、Typescriptをインストールし、Welcomeページを表示します。

Laravelプロジェクトを作成する

前回までの作業でコンテナの起動に成功したら、新しいプロジェクトを作成するために、起動しているPHPのコンテナに入ります。ホストから以下のコマンドを実行します。

docker-compose exec php bash

コンテナに入ったら以下のコマンドを/var/wwwで実行して新しいLaravelプロジェクトを作成します。今回はLaravelのversionに11を指定し、プロジェクト名に”example“を指定しています。

composer create-project "laravel/laravel=11.*" example

プロジェクトの作成ができたら、http://localhost にブラウザでアクセスしてみてください。以下のページが表示されれば、プロジェクトの作成は成功です。

Breeze + React + Typescriptをインストールする

そもそも、Breezeって何かという所から簡単に説明すると、詳しくはこちらのページを見てもらえればと思うのですが、

Breeze provides a minimal and simple starting point for building a Laravel application with authentication. Styled with Tailwind, Breeze publishes authentication controllers and views to your application that can be easily customized based on your own application’s needs.

ということで、あなたのLaravelアプリケーションにミニマルでシンプルな、そしてカスタマイズが容易な認証機能を提供してくれます。すごい、簡単に言うと、サクッとログイン機能を追加できるということになります。

まずは、/var/www/exampleに移動してください。プロジェクト作成時に作成されるフォルダです。そして、以下のコマンドを実行してください。一行目でBreezeのパッケージを追加しており、2行目で必要なviewやrouteなどのファイルを追加しています。

composer require laravel/breeze --dev
php artisan breeze:install react --typescript

次に以下のnpmコマンドを実行してください。

npm install && npm run dev

コマンドを実行すると以下のメッセージが表示されます。この時点でhttp://localhost/ にアクセスすると真っ白なページが表示されると思いますが、vite.config.js を修正してないのが原因なので、特に問題ありません。早速、修正してみましょう。

vite.config.js を下記の様に修正してください。ファイルはプロジェクトフォルダの直下にあります。

src/example/vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            refresh: true,
        }),
        react(),
    ],
    // ここから追加
    server: {
        port: 5173,
        strictPort: true,
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
    // ここまで追加
});

ここまでの修正が完了したら http://localhost/ に再度アクセスしてください。ページの右上にLog in、Registerと表示されるようになっていたら、ここまでの作業は完了です。

今回はここまで。次はDBの接続設定を行います。