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

Laravel 5.5 を使用します。

Controllerを分ける

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

1
└ Controllers
2
  ├ front
3
  │  └ HomeController.php
4
  └ back
5
     └ HomeController.php

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

1
namespace App\Http\Controllers\Back;

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

Routerを分ける

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

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

Viewでの指定

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

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

Assetsを分ける

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

1
├ resources
2
│  └ assets
3
│    ├ front
4
│    │  ├ sass
5
│    │  │  └ app.scss
6
│    │  └ js
7
│    │     └ app.js
8
│    └ back
9
│       ├ sass
10
│       │  └ app.scss
11
│       └ js
12
│          └ app.js
13
└ public
14
  └ assets
15
    ├ front
16
    │  ├ sass
17
    │  │  └ app.scss
18
    │  └ js
19
    │     └ app.js
20
    └ back
21
       ├ sass
22
       │  └ app.scss
23
       └ js
24
          └ app.js

Laravel Mix の設定

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

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

1
mix.js('resources/assets/front/js/app.js', 'public/assets/front/js')
2
  .sass('resources/assets/front/sass/style.scss', 'public/assets/front/css')
3
  .js('resources/assets/back/js/app.js', 'public/assets/back/js')
4
  .sass('resources/assets/back/sass/app.scss', 'public/assets/back/css');
5

6
if (mix.inProduction()) {
7
  mix.version();
8
}

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

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

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