Laradock を使用して Laravel 環境開発構築

# 最終目標
- Docker 環境で Laradock を使用して Laravel のローカル環境を構築する
- Laradock の設定よりは Laravel の設定のほうが多いかも。
- `Laravel Mix` を導入し、`css` と `js` をコンパイルして表示させる。

## Laradock とは
[Laadock](https://laradock.io/)とは、DockerでPHP開発環境を構築する際に必要なSQLやWEBサーバなどすべて `Dockerfile` や `.yml`ファイルに既に定義してあるもの。
実行すれば、そこまでたくさんの設定をせずに、開発環境を構築することができる。

## 既存環境
### MacOS version
```console
% sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76
```
### git version
Laradock は git からダウンロードするため、git が必須になる。

```console
% git --version
git version 2.21.0 (Apple Git-122)
```
※ git の 2.21.0 は使わずに最新版を使用してください。

### docker version
docker がまだ入っていない場合は、[Dockerインストール](https://www.docker.com/)を行う。

```console
% docker -v
Docker version 19.03.8, build afacb8b
```
### docker-compose version
docker-compose がまだ入ってない場合は、インストールを行う。

```console
% docker-compose -v
docker-compose version 1.25.4, build 8d51620a
```

## 開発環境をつくってく
### Laradock をインストールする
任意のディレクトリを作成し、そこに `Laradock` を `git clone` する

```console
 % mkdir test_project
 % cd test_project

test_project % git clone https://github.com/Laradock/laradock.git
```

`git clone` するけど、Laradock は git 管理不要なので、Laradock と gitを切り離しする

```
% cd laradock 
% rm -rf .git/
```

### 環境変数の変更を行う
環境変数を作成する

```console
% cd laradock
% cp -p env-example .env
```

```console:.env
# コードの場所を指定しておく
APP_CODE_PATH_HOST=../test_project/

# MYSQL の version は 5.7 がいいので変更〜
MYSQL_VERSION=5.7
```
#### mysql の準備

```
laradock % cd mysql 
mysql % ls
mysql % cd docker-entrypoint-initdb.d 
docker-entrypoint-initdb.d % cp -p createdb.sql.example createdb.sql
```

```sql:createdb.sql
# コメントアウトを外し、任意の DB 名を作成しておく
CREATE DATABASE IF NOT EXISTS `test_db` COLLATE 'utf8_general_ci' ;
GRANT ALL ON `test_db`.* TO 'default'@'%' ;
```

`mysql.conf` を変更する

```sql:mysql.conf
# 変更箇所は以下
[mysqld]
sql-mode="STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION"
character-set-server=utf8mb4
default-authentication-plugin=mysql_native_password
skip-character-set-client-handshake
collation-server = utf8mb4_unicode_ci
init-connect = SET NAMES utf8mb4

[client]
default-character-set=utf8mb4
```

### laradock の下に移動して、`docker-compose` を起動する
```console
laradock % docker-compose up -d nginx mysql
```

この時点で正常に起動が可能になったので、`docker`を使用した環境自体は、完成となる。
以下からは、`Laravel`のための各種設定になる。

#### mysql にログインしDBを作成する
mysql で準備したファイルを実行して、DBの作成を行う。

```mysql
laradock % docker-compose exec mysql bash
root@1/# mysql -u root -p < /docker-entrypoint-initdb.d/createdb.sql
Enter password:
``` 

#### Laravel プロジェクトを作成する
作業エリアにログインする

```console
laradock % docker exec -it laradock_workspace_1 bash
root@:/var/www# 
```
Laravel プロジェクトをダウンロードする。今回のつくる名前は『`test_project`』

```console
# 最新版の場合はこちら
root@:/var/www# composer create-project laravel/laravel test_project
# バージョン指定
composer create-project "laravel/laravel=5.8.*" test_project
```
インストール後確認すると、

```console
root@d63aa0ee391e:/var/www# ls
laradock  test_project
```

できてる…！！

### Laravel の設定
#### Laravel `.env`の設定
Laravel の設定を行っていく。まずは、`.env`の設定から。

```vim:.env 
# 書き換えたところのみ記載する
APP_NAME=test_project
APP_PATH=./test_project/

DB_HOST=mysql
DB_DATABASE=test_db
DB_USERNAME=default
DB_PASSWORD=secret
```
#### 各種 `conf`の設定を行う
`config/`の各種ファイル

```php:app.php
# タイムゾーンの変更をする
'timezone' => 'Asia/Tokyo',
# 言語の設置を行う
'locale' => 'ja',
```

```php:database.php
# 不要なものは削除する.
```

#### DB接続を試す
ログインして接続されているか確認をする

```console
laradock % docker exec -it laradock_workspace_1 bash
root@:/var/www# 
```
migration を実行する

```console 
root@:/var/www/test_project# php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.06 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.05 seconds)
```
正常に通れば、DBの接続がせいこうしている。

#### `Laravel Mix` の設定を行う
`browser-sync-webpack-plugin` を使用するため追記
`webpackConfig`の設定を追記

```js:webpack.mix.js
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

    .webpackConfig({
        plugins: [
          new BrowserSyncPlugin({
            open: 'external',
            host: '',
            proxy: 'nginx',
            browser: "google chrome",
            files: [
              './resources/**/*',
            ],
            watchOptions: {
              usePolling: false,
              interval: 300,
            },
            open: "external",
            reloadOnRestart: false,
          }),
        ],
      });
```

```
# cross-env をインストールする
root@:/var/www/test_project# npm install --save-dev cross-env
# browser-sync-webpack-plugin をインストールする
root@:/var/www/test_project# npm install  browser-sync-webpack-plugin --save-dev
# browser-sync をインストール
npm install  browser-sync --save-dev
```

watch-poll 動かす

```console
#root@:/var/www/test_project# npm run watch-poll
```

##### もし動かない場合は…
```console
# node_modules を消して再インストールするとうまくいくかも〜…
root@:/var/www/test_project# rm -rf node_modules
root@:/var/www/test_project# rm package-lock.json 
root@:/var/www/test_project# npm cache clear --force
root@:/var/www/test_project# npm install
```

#### `storage`ディレクトリのパスを通す
```console
# パスを通す
laradock % docker exec -it laradock_workspace_1 bash
root@:/var/www# chmod -R 777 storage/

# キャッシュ消す
root@:/var/www# php artisan config:cache
Configuration cache cleared!
Configuration cached successfully!
```

#### 接続して画面に `Laravel` が表示するか確認する。
http://localhost:3000/

Laravel が表示されていれば完了とする。