🍇
Laravel9 Sail & React SPA 環境構築
こんな人向け
- 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ファイルを１つ作成します。
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
sailをaliasに設定する。（記載済み）
gitクローンする。
git clone my_app
cd my_app
.envファイルを作成して内容を記載する。
cp .env.example .env
sailを実行する。
sail up
参考資料
最後に
不明な点、間違った点等ございましたら教えてくださると助かります！
Discussion