🍇

Laravel9 Sail & React SPA 環境構築

2022/11/17に公開約5,700字

こんな人向け

  • Laravel9 Sail, React, TypeScriptでSPAの環境構築したい
  • mac環境・windows環境の人
  • TablePlusで接続したい
  • 共同開発者「git cloneして、sail???」の解決方法を知りたい

環境構築

Laravel9 Sail導入

windowsの場合は、Ubuntuのターミナルで以下のコマンドを実行してください。
実行したパスの直下にディレクトリが作成されます。

"https://laravel.build/app-name?with=option1,option2..."と指定できます。
今回は、アプリ名をmy-app、mysqlとmailhogをoptionで指定しています。

curl -s "https://laravel.build/my_app?with=mysql,mailhog" | bash

パスワードが求められるので、パソコン起動時に使うパスワードを入力してください。
windowsの場合はUbuntuでユーザー作成の際に設定したパスワードを指定してください。

以下のコマンドでDockerを立ち上げます。時間がかかりますが待ちましょう。

./vendor/bin/sail up

問題なくコンテナが立ち上がったら、ctrl + cでコンテナを落とします。

sailをaliasに設定しましょう。任意のエディタでzshの設定を開きましょう。
vimでもcodeでもいいです。

# macの場合
vim ~/.zshrc

# windowsの場合
vim ~/.bashrc

以下のコードを追加してください。

.zshrc or .bashrc
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

zshに反映させます。

# macの場合
source ~/.zshrc

# windowsの場合
source ~/.bashrc

再度コンテナを立ち上げます。問題なければLaravel9 Sailの環境完成です。

sail up

React & TypeScript導入

コンテナを立ち上げた状態で以下のコマンドを実行してください。Reactのバージョンは18です。

sail npm install --save-dev react react-dom react-router-dom @types/react @types/react-dom @vitejs/plugin-react @vitejs/plugin-react-refresh

SPA実装 Laravel

SPAを実装するにあたって下準備をします。

SPAで表示するbladeファイルを1つ作成します。

views/resources/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'app_name') }}</title>
    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/ts/app.tsx'])
</head>

<body>
    <div id="app"></div>
</body>

</html>

どのルートに来てもappを返すようにルーティングを設定します。

web.php
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

SPA実装 React

viteの設定ファイルを編集します。vite.config.jsの拡張子をtsにしてください。

vite.config.ts
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
    // macの場合、serverは不要
    server: {
        host: true, // hostを決める必要がある
        hmr: {
            host: "localhost", //windows & wsl2の環境だとhostを指定する必要がある
        },
    },
    plugins: [
        laravel({
            input: ["resources/ts/app.tsx"],
            refresh: true,
        }),
        react(),
    ],
});

SPAの挙動確認のためにめちゃ適当なコンポーネント3つを作成します。

resources/ts/components/TopPage
import React from "react";

export const TopPage = () => {
    return <div>TopPage</div>;
};

resources/ts/components/PostPage
import React from "react";

export const PostPage = () => {
    return <div>PostPage</div>;
};

resources/ts/components/MyPage
import React from "react";

export const MyPage = () => {
    return <div>MyPage</div>;
};

app.tsxファイルを作成します。

resources/ts/app.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import { TopPage } from "./components/TopPage";
import { MyPage } from "./components/MyPage";
import { PostPage } from "./components/PostPage";

const App = () => {
    const title: string = "Hello TypeScript React";
    return (
        <div id="main">
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<TopPage />} />
                    <Route path="/mypage" element={<MyPage />} />
                    <Route path="/posts" element={<PostPage />} />
                </Routes>
                <ul>
                    <li>
                        <Link to="/">Top</Link>
                    </li>
                    <li>
                        <Link to="/mypage">My</Link>
                    </li>
                    <li>
                        <Link to="/posts">Post</Link>
                    </li>
                </ul>
            </BrowserRouter>
        </div>
    );
};

const container = document.getElementById("app") as HTMLInputElement;
const root = createRoot(container);
root.render(<App />);

sail npm run dev

以下のようにできたらSPA実装完了。

TablePlusで接続

デフォルトだとNameとUser以外指定しなくて良いです。

.env
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=任意の名前が指定されているはずです!
DB_USERNAME=sail
DB_PASSWORD=password

共同開発者「git cloneして、sail???」の解決方法を知りたい

ローカルにComposer依存関係のインストールする。
windowsの場合はUbuntuで実行する。

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php81-composer:latest \
    composer install --ignore-platform-reqs

https://laravel.com/docs/9.x/sail#installing-composer-dependencies-for-existing-projects

sailをaliasに設定する。(記載済み)

gitクローンする。

git clone my_app
cd my_app

.envファイルを作成して内容を記載する。

cp .env.example .env

sailを実行する。

sail up

参考資料

https://zenn.dev/dem_1/articles/222a6bb3c622d4
https://laravel.com/docs/9.x/sail#installing-composer-dependencies-for-existing-projects
https://readouble.com/laravel/9.x/ja/sail.html

最後に

不明な点、間違った点等ございましたら教えてくださると助かります!

Discussion

ログインするとコメントできます