Laravel×Docker×React を組み合わせて環境構築したい。
自分用の備忘録
きちんとして作りではないので、動けるけどディレクトリ内汚いので参考になるか微妙です。
作成目的・背景は、単純に上記３つを組み合わせて環境構築してみたいという理由だけです。
それ以外何にも考えていないです。。。。
完成品
Laravel・Dockerの構築
下記の記事・リポジトリを利用させていただく。
Reactの環境設定
- 下記の記事を参考
- ただし、typeScriptではなくJSで作っていくので少し変わります。
環境構築
1. リポジトリからfork
2. appコンテナに入って、UIパッケージ導入
$ docker-compose exec app composer require laravel/ui
3. appコンテナに入って、React.js導入 --authで認証機能も追加という意味
$ docker-compose exec app php artisan ui react --auth
4. Doclerコンテナ立ち上げてlaravelのあるディレクトリに移動
$ docker compose build
$ docker compose up -d
$ cd src
5. resources/viewsの下はシングルページとするためapp.blade.phpのみとする
下記4項目を削除する
・/auth以下
・layouts - (app.blade.phpをviews直下に移動させlayoutsディレクトリ自体を削除)
・home.blade.php
・welcome.blade.php
6. views/app.blade.phpを修正
- 既存のコードに対してid="app"の中身を空っぽにする
# views/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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
# id="app"の中身を空する変更
</div>
</body>
</html>
7. resources/js/components/Example.jsを修正
- id="app"としたため、getElementByIdを下記のように変更
example→app
// 20行目以下を修正
export default Example;
if (document.getElementById('app')) {
ReactDOM.render(<Example />, document.getElementById('app'));
}
8. routes/web.phpを修正
- シングルページアプリケーションなのでどんなURLだったとしても/views/app.blade.phpを表示するように設定。
// 既存コードの16行目以下を削除
// Route::get('/', function () {
// return view('welcome');
// });
// Auth::routes();
// Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
// 追記
Route::get('{any}', function () {
return view('app');
})->where('any','.*');
9. # Laravelプロジェクトの存在する（package.jsonが存在する）ディレクトリにてインストール
$ npm install
10. #実行
$ npm run dev
localhost:8080 へアクセス
環境構築中に発生したエラー
手順２を実行するとエラーが発生
our requirements could not be resolved to an installable set of packages.
Problem 1
- Root composer.json requires laravel/ui v4.0.0 -> satisfiable by laravel/ui[v4.0.0].
- laravel/ui v4.0.0 requires illuminate/console ^9.21 -> found illuminate/console[v9.21.0, ..., 9.x-dev] but these were not loaded, likely because it conflicts with another require.
- Installation failed, reverting ./composer.json and ./composer.lock to their original content.
下記コマンドを叩いて問題解決した。
composer update
手順10 npm run devをするとエラー下記が発生
ERROR in ./resources/js/components/Example.jsx Module build failed
(from ./node_modules/babel-loader/lib/index.js): SyntaxError:〜〜〜〜〜
対応策コマンド
npm install --save-dev @babel/preset-react
VScode上でsrc直下に .babelrc という名前のファイルを作成し、下記を追加
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
手順10を実行するとエラーが発生 part2
- Vite manifest not foundエラー
下記URLの通りにViteで記載されているコード削除
npm run dev で起動
まとめ
私自身Laravel・Dockerを理解できていないため、がむしゃらに作ってみたが難しい・・・・
今後少しずつリポジトリの中身を修正したりして綺麗にしていきます。
動いているから問題ないが、Laravel Dockerをforkしてそのまま利用しているので今後は自分が使わない部分などは削除するなど細かい修正が必要
漠然とLaravel×Docker×Reactを組み合わせて環境構築してみたいなという希望が叶ってよかったです。
これをベースに色々と作っていたいけたらなと・・・
以上。