Docker + Laravel + Vue の環境構築 - Laravel編

# 前回
https://qiita.com/Hassaaaaaaan/items/6e98d37e17c603b28b9a
- `Win10 home`に`Docker Desktop`をインストール
- `Docker Compose`を使って`Nginx, node, PHP, MySQL, PhpMyAdmin`の構成を作成

# 今回の目標
- Laravelプロジェクトの作成
- 認証機能作成
- Vueに対応
- 最終的に作成されるディレクトリ

```
[myLaravel]
  ├── [docker]
  │     ├── 省略
  │     ....
  │
  └── [src]
        ├──[laravelプロジェクト]
        │    ├── 省略
        │    ....
        │
        ├──[public_html] *シンボリックリンク
        └── package-lock.json
```

# Laravelプロジェクトの作成

前回の記事まで終わってる場合、Laravelがすでにインストールされてます。


### Laravelプロジェクト作成コマンド実行

`Docker Desktop`から**PHPコンテナのコンソール画面**を開いてください。
Dockerは各コンテナで役割が分かれており、PHPコマンドに関連する機能（今回は`Composer`）を使う際はPHPコンテナから実行する必要があるようです。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/f2b26ab6-12be-6a12-f397-d2fbd2db368e.png)

コンソール画面を開き`pwd`を実行すると、`docker-composer.yml`の`php: volumes`で指定したディレクトリにいることが確認できます。
そのままその場でLaravelプロジェクトの作成コマンドを実行してください。
今回のサンプルではプロジェクト名は`test-project`で作成します。

```コンソール画面
# pwd
  /var/www
#
# composer create-project --prefer-dist laravel/laravel test-project
```

これでLaravelプロジェクトが作成されました。
Laravelが実行されるには、ドキュメントルートが`index.php`の場所（`public`フォルダ内）に合わせる必要があります。

```
[myLaravel]
 └── [src]
       └──[test-project]
             ├──[app]
             ├──中略...
             └──[public]　<- ココ！
                   └──index.php
```


### public_htmlのシンボリックリンクを作る

今回、ドキュメントルート`public_html`固定です。作成したLaravelプロジェクトと同じディレクトリ上にあります。（Xserverがドキュメントルートの変更できなかったので;）

そこで、`public_html`ディレクトリをシンボリックリンクとして作成します。

`Docker Desktop`より`nginx`コンテナのコンソール画面を開いて、下記のコマンドを実行してください。

```nginxコンテナ
## シンボリックリンクを作成するディレクトリへ移動
# cd /var/www
# 
## シンボリックリンクを作成
# ln -s ./test-project/public public_html
#
## 確認
# ls -l | grep public_html
# lrwxrwxrwx 1 root root [略] public_html -> ./test-project/public
```

完了したら`nginx`コンテナのブラウザアイコンから画面を開いてみてください。
（または `http://localhost/`）
以前は白い画面だったのが、それらしいエラー画面が表示されたと思います。


## Laravelが動作するように設定等の修正

エラー解消のため、ログ出力ディレクトリ等の権限を修正する必要があります。
修正箇所は2か所です。
nginxコンテナのコンソールから権限を変更してください。Laravelの初期画面が表示されるはずです。

```
chmod -R 777 /var/www/test-project/bootstrap/cache
chmod -R 777 /var/www/test-project/storage
```

これでLaravelプロジェクトが表示されるはずです。
先ほどと同様に`nginx`コンテナからブラウザを開いてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/480bb34c-5f01-5d29-6894-89fa5ae6b98a.png)

これでLaravelの開発にとりかかる準備が整いました


# vue・認証機能を追加
Laravelには認証機能を簡単に追加することが出来ます。

composerを使うので再び`PHPコンテナ`のコンソールを開いて、下記コマンドを実行してください。

```
# composer require laravel/ui
```

ディレクトリをLaravelプロジェクト直下に移動して、`artisan`を使ってvueをインストールします。
また、`-auth`を付けるとついでに認証機能も追加できます。

```
# cd /var/wwww/test-project
# 
# php artisan ui vue --auth
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/896f52fa-12d9-2b8d-7ac2-21648bc13288.png)


実行するとインストールに成功した旨と、`npm install`等を実行するようメッセージが表示されます。
この時点での画面を確認すると、右上にログインとユーザー登録画面へのリンクが追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/03799522-d270-7310-311c-1cd0d85b9ced.png)


## npm


### npm install
ログイン画面を開くと、フォームはできてますがスタイル等は何もありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/392ffe69-1a9b-cfb3-c0af-9cf48ea3aa79.png)


そこで、npmを使ってJSやCSSのコンパイルを実行します。
`php artisan ui vue --auth`の実行後に表示されたメッセージ通りにやるだけです。

`Docker Desktop`の`nodeコンテナ`からコンソール画面を開いて下記コマンドを実行してください。

```
## packeage.jsonがあるディレクトリまで移動
# cd /var/www/test-project
# 
## nodeを使ってvueに必要なライブラリのパッケージをインストール
# npm install
```

### npm installでのトラブル

`npm install`を実行するとこのようなエラーが出ました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/78e723b2-2022-dfd4-6b34-467e74cbac90.png)


#### 原因調査

`npm audit`でエラーの詳細な内容を見ることが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/0cc787cd-5c33-17dd-0e58-3e10b72e71ba.png)


#### 解決方法

大抵の問題は`npm audit fix --force`で解決するようです。

```
# npm audit fix --force
```

再度`npm audit`を実行するとエラーが解消していますね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/9a2a8828-3468-a7ec-265b-861422d61959.png)

npm installに関する作業はここまでです。


### npm run dev

インストールだけでは認証画面のスタイルは解決されません。
jsやcssのコンパイルが必要なので、残りのコマンドを実行します。

```
# npm run dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/c350922f-72f0-3cb3-bd1e-1990041b8507.png)


コンパイルが成功した後、ログイン画面を開くとスタイルが適用されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/7786e131-80b7-b592-3b4e-280ecc144634.png)

vueに関係するコードを修正した場合、毎回コンパイルをする必要があるそうです。
変更があれば自動でコンパイルするよう監視することもできるようなので、適宜コマンドを実行してください。

```
npm run watch-poll
```



## DBの準備

### .envファイル修正

MySQLへの接続設定をするため、laravelプロジェクト直下の`.env`ファイルを修正します。
`*`が付いてる箇所が修正した行となります。

```
DB_CONNECTION=mysql
DB_HOST=db *
DB_PORT=3306
DB_DATABASE=sample_project *
DB_USERNAME=root
DB_PASSWORD=root *
```

### migration実行

DBの設定が終わったら認証に必要なテーブルを作成します。
Laravelにあらかじめ用意されているuserテーブルをmigration機能を使って準備します。


`phpコンテナ`のコンソール画面を開いて、Laravelプロジェクト直下で `php artisan migrate`を実行してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/343754d8-70aa-52cb-f545-0f8add41b6ee.png)


`PhpMyAdminコンテナ`をブラウザで開いてDBの確認をしてください。（またはhttp://localhost:4000/）
下記のように4つのテーブルが追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/2b2892b6-67b0-0e38-40fe-71045d2fb832.png)


### 確認

これでようやく認証機能が使えるようになったはずです。
Laravelの会員登録画面から会員登録→ログインが可能なことを確認してください。

![会員登録.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/77583399-d27f-0993-4b1e-5b112d8ce684.png)

会員登録が完了し、ログイン状態となったことが確認できます。お疲れさまでした。
![会員登録2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12478/a1803e13-77bf-0be9-0bc1-b9f22d81be00.png)


# 参考にさせていただいた記事
https://biz.addisteria.com/laravel8_vue_install/
https://qiita.com/ryosukes/items/24a556b9e634c183f93b