WEBOPIXEL

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

Posted: 2018.03.30 / Category: PHP / Tag: 

管理画面があるようなアプリケーションではフロントとバックエンド(管理画面)でCSS&JSやコントローラーなどディレクトリを分けたいことがあります。ディレクトリを分ける方法をご紹介します。

Sponsored Link

Laravel 5.5 を使用します。

Controllerを分ける

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

└ 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の中でfrontbackディクトリを作成して分けでそれぞれファイルを作成していきます。
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で設定します。

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

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.jsjsのそれぞれ第一引数に読み込むファイルを指定、第二引数に書き出すパスを指定します。

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

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

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。