---
# System prepended metadata

title: Laradockを使ったLaravel開発環境構築 + Laravel-admin導入
tags: [Laradock, Laravel]

---

---
lang:`ja-jp`
robots:content="noindex,nofollow,noarchive"
---
###### tags: `Laravel` `Laradock`
Laradockを使ったLaravel開発環境構築 + Laravel-admin導入
===

![](https://i.imgur.com/1IeC2tG.png)


[TOC]


# 本日のゴール

* Laradockを使った仮想環境構築
* Laravelインストール
* Laravel-adminインストール
* Laravel Auth導入(ログイン機能)の追加+mailhogでメール認証確認
* ~~Laravel-adminのログイン画面変更（なんちゃってWOW）~~ ※次回
* ~~登録済みユーザーをLaravel-adminで確認~~ ※次回

# 前提

* Docker Desktop(homeの場合VirtualBox)がインストールされている事

# 出来ること・メリット

* 仮想環境を構築するのが楽（Dockerの知識がなくても大体出来る）
* サービスを追加するのが楽（大体は揃ってる）
    * DockerFileやdocker-compose.ymlを自作する必要なし！
* Laravel以外のプロジェクトでも使える

# フォルダ構成

```
study-laradock/            : 勉強会用作業ディレクトリ
    ├ laradock/            : Laradockを入れるフォルダ
    │  └ env-example
    └ www/    
       └ larawow/          : Laravelを入れるフォルダ
          ├ config
          ├ app
          : 
          └ .env.example
```

# 仮想環境＆サービス

* Apache2系
* MySQL5.7
    * phpMyAdmin
* PHP7.2
    * Laravel5.8
    * Laravel-Admin
* Mailhog（受信メール確認用）

# 作業開始

## 1. 作業ディレクトリ作成

* ローカルに作業ディレクトリを作成してください。
* 例：C:\Users\{ユーザ名}\PhpstormProjects\study-laradock

## 2. Install laradock

作成した **作業ディレクトリ** に移動してから作業を開始してください。

```
$ cd ~/PhpstormProjects/study-laradock
```

Laradockのインストール

```
$ git clone https://github.com/Laradock/laradock.git
```

### 2.2 Win HomeのDocker Toolboxで以下エラーが出た場合
```
ERROR: Service 'mailhog' failed to build: Get https://registry-1.docker.io/v2/: dial tcp: lookup registry-1.docker.io on 10.0.2.3:53: read udp 10.0.2.15:60158->10.0.2.3:53: i/o timeout
```
1. Docker Toolbox起動
2. Docker Quickstart Terminal起動
3. 以下コマンドよりDockerMachineにssh接続
```
$ docker-machine ssh default
```
4. 名前解決修正
```
$ sudo vi /etc/resolv.conf

以下名前解決修正
-----

nameserver 10.0.2.3
↓
nameserver 8.8.8.8 

```


## 3. Laradock 環境変数の編集

デフォルトで用意されている **env-example** を **.env** にコピーし、
設定を編集していきます。

```
$ cp laradock/env-example laradock/.env
$ vi laradock/.env
```
```
# APPのパスを修正
APP_CODE_PATH_HOST=../
↓
APP_CODE_PATH_HOST=../www

# MySQLデータ永続化のパス変更
DATA_PATH_HOST=~/.laradock/data
↓
DATA_PATH_HOST=.laradock/data

# apacheの設定
APACHE_DOCUMENT_ROOT=/var/www
↓
APACHE_DOCUMENT_ROOT=/var/www/larawow/public

# MySQLのバージョンを5.7に変更
MYSQL_VERSION=latest
↓
MYSQL_VERSION=5.7
```

## 4. build & 起動 & コンテナにログイン

laradockフォルダに移動し、イメージのビルド&起動します。
初回ビルド ⇒ **約10～20分**


```
$ cd laradock/

# build
$ docker-compose build apache2 mysql workspace phpmyadmin mailhog

# 起動
$ docker-compose up -d apache2 mysql workspace phpmyadmin mailhog

# web serverにbash接続  ※winの場合winptyを付ける
$ winpty docker-compose exec workspace bash

```

## 5. Laravel インストール

インストール方法は2パターンあります。

* インストーラー経由でインストールする方法
* ターミナルでComposerのcreate-projectコマンドを実行し、Laravelをインストールする方法

### インストーラー経由

#### 5.1
ホストOSにlaravel installerを追加

```
composer global require laravel/installer
```

#### 5.2 環境変数の追加

laravel コマンドを実行出来るように、Windows環境変数にパスを追加

```
%USERPROFILE%\AppData\Roaming\Composer\vendor\bin
```

#### 5.3 Laravel インストール

```
laravel new larawow
```

### ターミナル経由

#### 5.1 Create Project Laravel

コンテナに接続後、Laravelをインストールしていきます。
※/var/www ⇒ study-laradock/www に該当します。
※--prefer-dist : zipでダウンロード指定, 高速

```
# バージョン指定
$ composer create-project --prefer-dist laravel/laravel larawow "5.8.*"

# 最新
$ composer create-project laravel/installer larawow
```

## 5. Laravel 環境変数の編集

LaravelのDB接続情報をLaradockに合わせます。
ついでにsendmailの内容を確認できるツール、 **mailhog** の設定も変更します。

```
$ cd larawow
$ vi .env
```

```
# mysqlの設定
DB_CONNECTION=mysql
DB_HOST=mysql            #127.0.0.1となっているでmysqlに変更
DB_PORT=3306
DB_DATABASE=default      #homesteadとなっているのでdefaultに変更
DB_USERNAME=default      #homesteadとなっているのでdefaultに変更
DB_PASSWORD=secret

# mailhogの設定
MAIL_DRIVER=smtp
MAIL_HOST=mailhog        # smtp.mailtrap.io をmailhogに変更
MAIL_PORT=1025           # 2525 を1025に変更
MAIL_USERNAME=user       # null をuserに変更
MAIL_PASSWORD=password   # null をpasswordに変更
MAIL_ENCRYPTION=null
```
## 7. Admin系のツールを導入

### 7.1 Install laravel-admin
laravel-adminをインストールしていきます。
```
$ composer require encore/laravel-admin
$ php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"
$ php artisan admin:install
```

laravel-admin設定微調整
```
# config/filesystems.php の設定変更, disksに以下追加

        'admin' => [
            'driver' => 'local',
            'root' => public_path('uploads'),
            'url' => env('APP_URL').'/uploads',
            'visibility' => 'public',
        ],

# config/admin.php の prefix を wowに変更（管理画面のURL

        'prefix' => env('ADMIN_ROUTE_PREFIX', 'admin'),
        ↓
        'prefix' => env('ADMIN_ROUTE_PREFIX', 'wow'),
```

### 7.2 Install Laravel Voyager

```
$ composer require tcg/voyager
$ php artisan voyager:install --with-dummy
```

## 8. 管理画面ログイン

※Win Homeの場合、「localhost」⇒「**192.168.99.100**」

* laravel
    * http://localhost/
* laravel-admin
    * http://localhost/wow/auth/login
    * admin / admin
* phpMyAdmin
    * http://localhost:8080/
    * サーバ: mysql
    * ユーザ名: default
    * パスワード: secret
* mailhog
    * http://localhost:8025/

## 9. Laravel Auth導入

Laravel Authを導入し、フロントから
* 会員仮登録
* メール認証
* 会員本登録

を確認します。

デフォルトでは即本登録されるので、
仮登録から本登録への **メール認証機能** を **有効化** させていきます。

```
# Laravel Auth導入
$ php artisan make:auth
```

メール認証を有効化させます。
```
# app/User.php

class User extends Authenticatable
↓
class User extends Authenticatable implements MustVerifyEmail
```

/home を 本登録していないと閲覧できないようにします。
```
# routes/web.php
Auth::routes();
↓
Auth::routes(['verify' => true]);


Route::get('/home', 'HomeController@index')->name('home');
↓
Route::middleware('verified')->group(function() {
    // 本登録ユーザーだけ表示できるページ
    Route::get('/home', 'HomeController@index')->name('home');
});
```

## 10. Laravel Auth 動作確認

仮登録から本登録の流れを確認していきます。
最初に[mailhog](http://localhost:8025/)にアクセスしておいてください。


* 仮登録
    * http://localhost/register
        * 名前、メールアドレス、パスワードを入力
        * メールアドレスはmailhog上で受け取るので何でもOKです。
        * ![](https://i.imgur.com/c7gnL30.png)
        * 入力したらRegisterボタンから送信
* mailhogで送信メール確認
    * 送信するとmailhogのwebpushが届きます。
        * ![](https://i.imgur.com/gXX4N7o.png)
    * mailhogを見ると、送信メールが確認出来ます。
        * ![](https://i.imgur.com/Dj0TTte.png)
    * Verify Email Address をクリックすると本登録完了！
        * ![](https://i.imgur.com/1lYD6Iy.png)
* /home にログイン状態でアクセス出来たら完了です。
    * ![](https://i.imgur.com/w7RTbXw.png)



