Laradock + phpMyAdmin + Laravelの環境構築

Docker環境のMySQLは、コマンドで確認しないといけないため、初学者にとってとても大変。。
<code>phpMyAdmin</code>を使用するとデータベース内がブラウザで確認、変更、削除ができるため重宝します。

<code>phpMyAdmin</code>は、<code>MAMP</code>や<code>XAMPP</code>だけしか利用できないかと思っていましたがDocker環境でも利用できるようです。
　
　
<code>laradock</code>を導入した基本フォルダ構成は、以下のようになります。

```
 laravel_projects    #laradockとlaravelプロジェクトをまとめるフォルダ
    ├── laradock      # laradockをインストール
    └── project       # laravelをインストール
```
　
###早速、環境構築していきましょう！

今回は、以下のディレクトリで作成します。

```
 laravel-docker    
    ├── laradock   
    └── laravelDev
```
　
ワークディレクトリを作成します。

```
#まとめるフォルダを作成
$ mkdir laravel-docker

#作成したフォルダに移動
$ cd laravel-docker

#laradockをインストール
$ git clone https://github.com/LaraDock/laradock.git
```
　
laradockの設定に関わるファイルのひとつである、<code>.env</code>ファイルを作成します。
laradockの<code>env-example</code>ファイルを<code>.env</code>に変更して作成します。

```
#laradockフォルダに移動
$ cd laradock

#env-exampleをコピーして 名前を.envへ変更
$ cp env-example .env
```
　
laradockフォルダをエディタで開いて<code>.env</code>ファイルを編集します。

```変更前.
APP_CODE_PATH_HOST=../
DATA_PATH_HOST=~/.laradock/data
COMPOSE_PROJECT_NAME=laradock
```

```変更後.
APP_CODE_PATH_HOST=../laravelDev
DATA_PATH_HOST=./laradock/data
COMPOSE_PROJECT_NAME=laravel-docker
```
<code><strong>　APP_CODE_PATH_HOSTの変更　</strong></code>
　アプリケーションのディレクトリを指定します。　laravelをインストールするディレクトリです。

<code><strong>　DATA_PATH_HOSTの変更　</strong></code>
　デフォルトではデータベースなどがホームディレクトリへ保存されます。
　それをプロジェクトディレクトリ下へ変更します。

<code><strong>　COMPOSE_PROJECT_NAMEの変更　</strong></code>
　デフォルトで$ docker-compose upすると、laradock_***という名称のコンテナが起動します。
　上記工程で、プロジェクトのディレクトリは分けていますが、そのまま$ docker-compose upすると、
　既存プロジェクトのコンテナが（同じ名称のコンテナが）立ち上がってしまうことを避けるために
　COMPOSE_PROJECT_NAME をlaradockからlaravel-dockerへ変更します。
　
　
<code>phpMyAdmin</code>を使うために続けて<code>laradock</code>の<code>.env</code>を編集します。

```変更前.
### MYSQL #################################################

MYSQL_VERSION=latest
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

### REDIS #################################################
```
```変更後.
### MYSQL #################################################

MYSQL_VERSION=5.7          ＃編集
MYSQL_DATABASE=laravelDev  ＃編集
MYSQL_USER=root            ＃編集
MYSQL_PASSWORD=root　　　   ＃編集
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root　＃編集
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

### REDIS #################################################

```
　

```変更前.
### PHP MY ADMIN ##########################################

# Accepted values: mariadb - mysql

PMA_DB_ENGINE=mysql

# Credentials/Port:

PMA_USER=default
PMA_PASSWORD=secret
PMA_ROOT_PASSWORD=secret
PMA_PORT=8080

### MAILDEV ###############################################
```
```変更後.
### PHP MY ADMIN ##########################################

# Accepted values: mariadb - mysql

PMA_DB_ENGINE=mysql

# Credentials/Port:

PMA_USER=root			＃編集
PMA_PASSWORD=root		＃編集
PMA_ROOT_PASSWORD=root	＃編集
PMA_PORT=8080   		＃8080を使用していたら8081などに編集

### MAILDEV ###############################################
```
##コンテナ作成、起動
docker-composeコマンドでnginx、mysql、workspace、phpmyadminの作成と起動をします。

```
$ docker-compose up -d nginx mysql workspace phpmyadmin
```
※エラーが出てもコマンドを２、３回繰り返すと解決することがあります。
　
起動しているか確認します。

```
#Stateが全部Upになっているか確認
$ docker-compose ps
```
　
##Laravel プロジェクトの作成
作業は、<code>workspace</code> コンテナの中に入って行います。
デフォルトではコンテナの中に入ると <code>root</code> ユーザーになるが、composer を <code>root</code> ユーザーで実行しようとすると警告が表示されてしまうため、<code>--user</code> オプションを <code>laradock</code> で指定してログインする。

```
#workspace コンテナの中に入ります。
$ docker-compose exec --user=laradock workspace bash

#Laravel プロジェクトを作成
# ※APP_CODE_PATH_HOST=../laravelDevをしているためアプリ名は,ドット . です
/var/www$ composer create-project --prefer-dist laravel/laravel . "6.0"
```

ブラウザで<code><strong>http://localhost</strong></code>にアクセスしてLaravelのトップ画面が表示されれば成功です！

<code><strong>http://localhost:8080</strong></code>の<code>phpMyAdmin</code>にアクセスできることを確認します。
※PMA_PORTを<code>8081</code>に変更していれば<code>http://localhost:8081</code>になりますのでご注意ください。

ログインは、<code>.env</code>で設定したユーザ名, パスワードを使います。
サーバ：mysql
ユーザ名:root
パスワード:root
ログインできれば成功です！

##Laravel MySQL接続設定
<code>laravelDev</code>をエディタで開き<code>.env</code>を編集します。

```変更前.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```
```変更後.
DB_CONNECTION=mysql
DB_HOST=mysql　　　　　　 ＃編集
DB_PORT=3306
DB_DATABASE=laravelDev　＃編集
DB_USERNAME=root　　　　
DB_PASSWORD=root　　　　 ＃編集
```
```terminal
/var/www$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
```

<code>phpMyAdmin</code>にアクセスして確認してみましょう。
　
##ログイン、登録機能のUI追加

```
/var/www$ composer require laravel/ui
Your requirements could not be resolved to an installable set of packages.
・
・
・
Installation failed, reverting ./composer.json to its original ,content.
```
エラーが発生しましたので、バージョンをつけてみましょう。

```
/var/www$ composer require laravel/ui:2.*
Your requirements could not be resolved to an installable set of packages.
・
・
・
Installation failed, reverting ./composer.json to its original ,content.
```

バージョンを下げてみましょう。

```
/var/www$ composer require laravel/ui:1.*
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravel/ui (v1.2.0): Downloading (100%)  
・
・
・
```
v1.2.0でインストールできました!

```
/var/www$ php artisan ui vue --auth
/var/www$ npm install && npm run dev
ERROR in ./resources/sass/app.scss
```
sassのコンパイルがうまくいかないようです。
npmで管理している<code>sass-loader</code>のパッケージのバージョン表示してみましょう。

```
/var/www$ npm info sass-loader versions
```

現在インストールされているバージョンが<code>v8.0.0</code>です。 ※環境によって違います。

```package.json
"sass-loader": "^8.0.0",
```

バージョンを下げてみましょう。

```
#先にアンインストールをします。
/var/www$ npm uninstall --save-dev sass-loader

#先ほど確認したバージョンの中から前よりバージョンが低いsass-loaderをインストール
/var/www$ npm install --save-dev sass-loader@7.3.1

#コンパイル
/var/www$ npm run dev
```
うまくいきました！

<code><strong>http://localhost</strong></code>にアクセスしてLaravelのトップ画面の右上に<code>login</code> <code>register</code>が表示されれば成功です！
　
　
##※MySQL8.0以降を使用する際は、認証方法の設定しないといけません。
MYSQL_VERSION=<code>5.7</code>に変更しましたが
MYSQL_VERSION=<code>latest</code>(8.0以降)を使用する際は、
laradockの<code>mysql/my.cnf</code>に追加記述が必要です。

```mysql/my.cnf
[mysqld]
sql-mode="STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION"
character-set-server=utf8
default-authentication-plugin=mysql_native_password  #追加
```
アカウントを認証できるようになったので、MySQL8.0のバージョンでも問題ありません。
　
　
以上、参考になったら幸いです。
　


参考にさせて頂いた記事
<strong>Laradockを使ってLaravelを動かすまで</strong>
https://qiita.com/ichimura/items/27d4a628ff22e2ba8b35
　
<strong>【初心者】Laradockで別のプロジェクト（コンテナ）を立ち上げる場合</strong>
https://qiita.com/tomokei5634/items/74c7734701fff8b99904