Laravelでフロントとバックエンドでディレクトリを分ける

Controllerを分ける

Controllersディレクトリの中にfrontとbackディレクトリを作成します。

└ Controllers
  ├ front
  │  └ HomeController.php
  └ back
     └ HomeController.php

コントローラーファイルはnamespacenamespaceをそれぞれディレクトリ名を入れます。

app/Http/Controllers/back/HomeController.php

namespace App\Http\Controllers\Back;

backディレクトリの例ですがfrontも同じように修正します。

Routerを分ける

ルーターも編集してディレクト分けしたコントローラーを読みに行くようにします。
複数ファイルを作ることになると思うので、namespaceとかasの別名はグループにまとめて付けるといいと思います。

routes/web.php

Route::prefix('admin')->namespace('Back')->as('back.')->group(function() {
	Route::get('/', 'HomeController@index')->name('home');
});

Viewでの指定

ルーターで別名付けておくとビューで下記のように書けてたりして便利ですね。

{{ route('back.home.index') }}

Assetsを分ける

ディレクトリはresources/assetsの中でfrontとbackディクトリを作成して分けでそれぞれファイルを作成していきます。
publicディレクトリの方は後述のLaravel mixで書き出すのでここではあまり気にする必要はありません。

 ├ resources
 │  └ assets
 │    ├ front
 │    │  ├ sass
 │    │  │  └ app.scss
 │    │  └ js
 │    │     └ app.js
 │    └ back
 │       ├ sass
 │       │  └ app.scss
 │       └ js
 │          └ app.js
 └ public
   └ assets
     ├ front
     │  ├ sass
     │  │  └ app.scss
     │  └ js
     │     └ app.js
     └ back
        ├ sass
        │  └ app.scss
        └ js
           └ app.js

Laravel Mix の設定

Laravelではどのファイルを読み込んで、どのディクトリのファイルに書き出すという設定は、ルートディレクトリのwebpack.mix.jsで設定します。

今回はfrontとbackに分けたので、一つ増える形になります。

webpack.mix.js

mix.js('resources/assets/front/js/app.js', 'public/assets/front/js')
	.sass('resources/assets/front/sass/style.scss', 'public/assets/front/css')
	.js('resources/assets/back/js/app.js', 'public/assets/back/js')
	.sass('resources/assets/back/sass/app.scss', 'public/assets/back/css');

if (mix.inProduction()) {
	mix.version();
}

mix.jsとjsのそれぞれ第一引数に読み込むファイルを指定、第二引数に書き出すパスを指定します。

mix.versionはディレクトリ分けることとはあまり関係ないですが、キャッシュ対策で、コンパイル毎にファイル名へハッシュを付与してくれます。
その場合、ファイルパスの指定時にmix関数を指定する必要があります。

<link rel="stylesheet" href="{{ mix('assets/front/css/style.css') }}">
<script src="{{ mix('assets/front/js/app.js') }}"></script>