Docker × Laravel Vueをインストールしてユーザー登録＆ログイン機能を実装する

DockerでLaravel環境を構築する記事を書きましたが、
Vue以外にもReactを選択したり、フロント側はそもそもリポジトリを分けて開発する場合もあり前回の記事では紹介しきれていませんでした。

今回はLaravel環境を構築したあと、Vueのインストールまで試してみます。

## Laravel UI とは

Laravelバージョン `5.8` までは、`php artisan make:auth` というコマンドが用意されていましたが、 `Laravel 6.0` 以降は Laravel UI パッケージに切り離されました。

- https://github.com/laravel/ui
- https://readouble.com/laravel/7.x/ja/frontend.html
  - Laravel7はlaravel/uiは2.x系
- https://readouble.com/laravel/6.x/ja/frontend.html
  - Laravel6はlaravel/uiは1.x系

## 前提

[最強のLaravel開発環境をDockerを使って構築する【新編集版】](https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4)

当記事は上記の記事の補足になる記事です。

## Laravel環境構築

```shell-session
$ git clone git@github.com:ucan-lab/docker-laravel.git
$ cd docker-laravel
$ make create-project
```

http://127.0.0.1

とりあえず、Laravelの環境を構築します。

## 環境

- PHP: 7.4.6
- Laravel: 7.24.0
- Laravel UI: 2.1.0
- Node: 14.2.0
- npm: 6.14.4
- yarn: 1.22.4
- Vue: 2.6.11

## 補足: npm, yarn どちらを使うのか？

正直どちらでも構わないと思います。
ただ、どちらを使うかプロジェクトで統一されている必要はあるかと思います。

今回はnpm, yarnコマンドを併記する形で進めたいと思います。

## Vue プリセットのインストール

[公式の手順](https://readouble.com/laravel/7.x/ja/frontend.html)に沿って、実行します。
私のDocker環境の場合は下記の流れになります。

```
$ docker-compose exec app bash
$ composer require laravel/ui
$ php artisan ui vue --auth
$ exit
```

`app` コンテナを抜けて `web` コンテナに入ります。

```
$ docker-compose exec web ash
$ npm install # yarn
$ npm run dev # yarn dev
```

http://127.0.0.1

## 補足: スクリーンショット

### ホーム画面

![ScreenShot 2020-08-10 2.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/e51ffd88-78c6-7536-29a1-1259e1a698c0.png)

右上にLOGIN, REGISTERのメニューが追加されています。

### 登録画面

![ScreenShot 2020-08-10 13.52.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/cd541643-a878-b388-7bfd-a4cfe0110fb6.png)

### ログイン画面

![ScreenShot 2020-08-10 13.52.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/6d1612d0-8cab-114a-b6bc-7561f231d25c.png)

### ログイン後のホーム画面(ダッシュボード)

![ScreenShot 2020-08-10 13.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/21885af8-ad55-58ce-fbf5-787752853104.png)

### リセットパスワード画面

![ScreenShot 2020-08-10 13.53.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/3721e4fc-7052-0e21-239a-33d36bb27134.png)

![ScreenShot 2020-08-10 13.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/7dab1d58-7a37-4c68-fe3e-349901fe68c3.png)

![ScreenShot 2020-08-10 13.53.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/7a63dd3a-3a23-bdfc-16d0-347062cd505d.png)

![ScreenShot 2020-08-10 13.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/4e7ded6f-be7b-5314-caa4-592e315b275f.png)

![ScreenShot 2020-08-10 13.55.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/8b2d68a7-0ed8-f8e2-b6b5-e04dc8194194.png)

パスワードリセットのメールはMailHogで確認しています。

- [Docker × Laravel メールの送信処理をローカルで確認する](https://qiita.com/ucan-lab/items/49e7f4986564f68e95c4)

## 補足: webコンテナのNode.js

webコンテナ内にNode(npm, yarn)が入ってますが、コンテナ内でビルドするのは非常に時間がかかってしまうので実際の開発ではMacローカルにNodeを入れて実行させるのが良いです。

- [Homebrew 経由の anyenv 経由の nodenv 経由で Node.js をインストールする](https://qiita.com/ucan-lab/items/ce35bcaf2562054917a8)

## 補足: Nodeバージョン固定化

特定のバージョンのNode.jsでしか動かして欲しくない場合、`package.json`の`engines`フィールドにNode.jsのバージョンを明記しておくと`yarn install`や`npm install`した時に警告を表示してくれます。

```json:package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "engines": {
        "node": "14.2.0"
    }
}
```

## 補足: Nodeバージョン自動切り替え設定ファイル

`.node-version` を `package.json` と同じディレクトリに配置しておくと、`nodenv`が自動的にNodeのバージョンを切り替えてくれて便利です。

```:.node-version
14.2.0
```

## 参考

- [最強のLaravel開発環境をDockerを使って構築する【新編集版】](https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4)
- [Homebrew 経由の anyenv 経由の nodenv 経由で Node.js をインストールする](https://qiita.com/ucan-lab/items/ce35bcaf2562054917a8)
- [Laravel6 ログイン機能を実装する](https://qiita.com/ucan-lab/items/bd0d6f6449602072cb87)
- [package.jsonに"engines"を設定すると「このバージョンのNode.jsでしか動かない」を表明できる](https://qiita.com/suin/items/994458418c737cc9c3e8)