Web 業界で仕事していて思うのは、エンドユーザーが触る画面は React や Vue などの JS フレームワーク(ライブラリ)を使ってリッチな画面を作る方が良いが、  

一方で管理画面はそこまでしなくてもいいのでは、と思っています。  

そんな自分の思想にぴったり合うのが Laravel + AdminLTE の組み合わせです。  

サーバーサイドエンジニアは API 開発がメインだと思うので、基本は API に注力してもらって、  

管理画面は Laravel のフルスタックさを利用して手早くつくる、というのはかなり妥当な考えだと思っています。  

ということで紹介。  

### インストール

使うライブラリはこちら

[https://github.com/jeroennoten/Laravel-AdminLTE](https://github.com/jeroennoten/Laravel-AdminLTE)

```
composer require jeroennoten/laravel-adminlte
```

```
php artisan adminlte:install
```

### 利用方法

使いたい blade で以下のサンプルを記述

```php
@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script>
@stop
```

これだけで基本的な画面がつくられます。  

あとは content の中身をよしなに変えたら終わりですね。  

サイドバーの中身等、設定は`config/adminlte.php`で出来ます。  

ちょっといじったサンプル  

[![20200721 03.24.33 localhost ae103cf012e5.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/2020-07-21%2003.24.33%20localhost%20ae103cf012e5.png?alt=media&token=861c0294-0cc6-4b20-b648-eb57d99a2ef0)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/2020-07-21%2003.24.33%20localhost%20ae103cf012e5.png?alt=media&token=861c0294-0cc6-4b20-b648-eb57d99a2ef0)

### まとめ

AdminLTE は元々 JS のライブラリですが、Laravel と組み合わせるのがとても相性良いと思います。  
まぁ Rails とかでもいいんでしょうけど、ざっと調べた感じ設定がめんどくさそうでした。  
単に自分が Rails 好きじゃないだけなんですけども。


Laravel + AdminLTE で管理画面をらくらく作成

なんてことない小ネタですが、Docker上のLaravelでホットリロードしたいなーって人のための設定です。  

### 開発サーバーのみの場合

#### docker-compose.yml
~~~yml
version: "3"
services:
  app:
    build: ./docker/app
    ports:
      - "8000:8000"
      - "3000:3000" # HMR用
    volumes:
      - ./:/var/www/html
    command: "php artisan serve --host 0.0.0.0"
~~~

#### webpack.mix.js

~~~js
mix.browserSync({
  proxy: "0.0.0.0:8000",
  open: false // ブラウザの自動起動
});
~~~

`docker-compose.yml`は、すいません、だいぶ端折りました。  
実際には`./docker/app`に composer 等がインストールされるような php イメージの Dockerfile があります。  
あとDBとかも本当はありますが、関係ないので省いてます。 

### webサーバーをかます場合

#### docker-compose.yml
~~~yml
version: "3"
services:
  app:
    build: ./docker/app
    ports:
      - "3000:3000"
    volumes:
      - ./:/var/www/html
  web:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - ./:/var/www/html
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
~~~

#### webpack.mix.js

~~~js
mix.browserSync({
  proxy: "http://web:80",
  open: false
});
~~~

### 共通操作

上記設定を記述したら、app コンテナの中で`npm run watch`を実行し、`http://localhost:3000`にアクセスすると完了です。  

.js や .vue ファイルのみならず、blade.php を変更してもホットリロードしてくれます。便利ですね。

Laravel + AdminLTE で管理画面をらくらく作成

Docker + Laravel (+ Vue) でホットリロード(HMR)したいときの設定