なにかと話題のReactですが、Laravelでも使えます。
Laravelはモダンなのです。
そこで、DockerをつかってLaravelを駆動し、LaravelでReactでの開発環境を構築してみます。
以前の記事で、LaravelをDockerで駆動までは、こちらを参照
なぜ、唐突にバックエンドのLaravelにフロントエンドのReactが出てきたと不思議に思うのですが、
その辺が、モダンな思想のようです。
開発プロジェクトに必要なプログラムはフロントエンドであろうと全て、Laravelで作れます。
と言う事でしょう。
なので、Laravel(バックエンド)で作成したオブジェクトなどをReact(フロントエンド)で
何の変換もなく使用できるなど、便利な開発環境が構築できます。
イメージを図にすると
LaravelはテンプレートエンジンViteをVer9から標準仕様としています。
ReactはJSX（Javascript+XML）が使えるテンプレートを元に記述しますので、
テンプレートエンジンViteでコンパイルし、Javascriptに変換する事になります。
ブラウザはJavascriptしか受け付けませんので。
ViteによるReactの管理
Viteは汎用性を持ったテンプレートエンジンなので、Reactを使う環境を構築する必要があります。
下図のようにして、Viteが管理するファイルにReactを対応させます。
①ViteにReactの設定をインストールする。
②テンプレートファイルが仮想DOMを扱えるようにreact-domをReactに追加設定する。
③Javascriptへの変換処理を実施。
ViteはJavascriptで作られているので、Node.jsとの互換性があります。
なので、Node.jsを使いモジュールを追加していくだけで対応できます。
上記でのNode.jsはVer16以上が必要です。
DockerfileでNode.jsをインストール
DockerfileにNode.jsのインストールをレイヤー追加する。
FROM php:8.1-fpm
RUN apt-get update \
&& apt-get install -y \
git \
zip \
unzip \
vim
#Composer install
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin
#Node install
ENV NODE_VERSION=21.1.0
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
COPY ./xdebug.ini /usr/local/etc/php/conf.d/xdebug.iniLaravelプロジェクトの作成
プロジェクトを作成します。
VSCodeのRemoteContainerでDockerを起動し、ターミナルに下記を打ち込めば、
Laravelプロジェクトが作られます。
composer create-project laravel/laravel laravel10_reactパーミッション変更を忘れずに、
cd laravel10_react
chmod 777 ./storageViteやNode.jsは、プロジェクト単位で管理されますので、出来たプロジェクトのフォルダに、package.jsonとvite.config.jsが確認できます。
LaravelでのViteの初期設定はvite.config.jsに記述して、使うパッケージはpackage.jsonに
記述します。
この時点で、Node.jsがインストールされているので、付随されるnpmも使えます。
Node.jsによるコマンド処理
上図①のコマンド
npm install @vitejs/plugin-react --save-devを打ち込むと、node_modulesフォルダに@vitejsがインポートされます。
vite.config.jsファイルに
・@vitejs/plugin-reactをインストールする。
・jsファイルをjsxファイルに変更する。
・react()を呼び出す。
を追加記述します。
jsファイルの実体の拡張子も変更する。resources/js/app.jsをapp.jsxに変更
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';//node_moduleでimport
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.jsx'],//js->jsx
refresh: true,
}),
react(),//viteでReactを読み込みます。
],
});次に
②のコマンド
npm install react react-dom --save-devでReactの仮想DOMをインストールすると
package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.8.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite": "^4.0.0"
}
}にreactとreact-domが現れます。
ここで作られたapp.jsxをHTMLファイルのheadタグ内で読み込みます。
@viteReactRefresh @vite(['resources/css/app.css', 'resources/js/app.jsx'])上記までの記述が終了したら、
npm run devでviteを起動させます。
終了コマンドは、Ctrl＋Cです。
vite起動中に、http://localhost:8000にアクセスすれば、laravelのwelcome画面が表示
されます。viteが起動していなければ、
のエラーがでます。
また、vite起動状態では、VSCodeのコマンドが打てませんので、もう一つターミナルを立ち上げます。
package.jsonのscriptsで記述しているように
・開発環境では npm run dev
・本番環境では npm run build
が実行を分けています。
③で余計なモジュールを本番環境に持ち込まない配慮となります。
Hello WorldをReactで表示
LaravelでReactが駆動しているので、”Hello World”を表示してみます。
resources/views/wlcome.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>Laravel React </title>
@viteReactRefresh @vite(['resources/js/app.jsx'])
</head>
<body>
<div id="app"></div>
</body>
</html>resources/js/app.jsxを書き換えます。
import "./bootstrap";
import ReactDOM from "react-dom/client";
function App() {
return <h1>Hello World</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);問題があれば、Laravelがブラウザで問題部分を表示してくれるはずです。
