【備忘録】Laravel×Docker×React を組み合わせた環境構築してみた

# Laravel×Docker×React を組み合わせて環境構築したい。
自分用の備忘録
きちんとして作りではないので、動けるけどディレクトリ内汚いので参考になるか微妙です。

作成目的・背景は、単純に上記３つを組み合わせて環境構築してみたいという理由だけです。
それ以外何にも考えていないです。。。。

### 完成品

https://github.com/Chamuji/docker-laravel9-react

## Laravel・Dockerの構築

下記の記事・リポジトリを利用させていただく。  
 

https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4  
  

https://github.com/ucan-lab/docker-laravel-handson  


## Reactの環境設定

- 下記の記事を参考  
- ただし、typeScriptではなくJSで作っていくので少し変わります。  

https://yurupro.cloud/2583/

https://qiita.com/morry_48/items/abd620f051fb4f36dcc2




## 環境構築

### **1. リポジトリからfork**

https://github.com/ucan-lab/docker-laravel-handson 
      
### **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　
```
https://blog.maro.style/post-1013/

### 手順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で記載されているコード削除

https://qiita.com/Technical_Mory/items/e2fff7dd4f4a4edfcb87


### npm run dev で起動
![スクリーンショット 2022-10-20 19.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487318/436a8082-1b91-437e-e135-d5b4594a16db.png)



### まとめ
私自身Laravel・Dockerを理解できていないため、がむしゃらに作ってみたが難しい・・・・
今後少しずつリポジトリの中身を修正したりして綺麗にしていきます。

動いているから問題ないが、Laravel Dockerをforkしてそのまま利用しているので今後は自分が使わない部分などは削除するなど細かい修正が必要

漠然とLaravel×Docker×Reactを組み合わせて環境構築してみたいなという希望が叶ってよかったです。
これをベースに色々と作っていたいけたらなと・・・
以上。