お手軽laravel Vue.js docker-compose環境構築

[過去に作ったdocker-composeでlaravelを動かす環境](https://qiita.com/hekizi/items/2458c2cc600a454018c5)
こちらを編集して進めます。

##◆npmとは
Node.jsのパッケージ管理ツール

##◆Node.jsとは
サーバーサイドでJavaScriptを実行できるようにするための環境
動画配信やチャットアプリやゲームなどリアルタイムの大量のトラフィックがある場合に力を発揮する。

##◆package.json
npmでインストールするパッケージのバージョン情報をpackage.jsonに格納しています。
laravelではpackage.jsonに一通りVue.jsで使用するパッケージが記載されているので、npm installするだけでインストールできます。

##◆環境構築始める
laravelのpackage.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 --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.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    }
}
```

```:コマンド
npm install
```

コマンドが見つからないエラーがでました。
phpのDockerFileを編集し、コマンドをうてるようにします。
[過去に作ったdocker-composeでlaravelを動かす環境](https://qiita.com/hekizi/items/2458c2cc600a454018c5)

###docker環境でnpm installをたたけるようにする

```:DockerFile
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - \ 
    && apt-get update \
    && apt-get install -y nodejs
```

```:コマンド
docker-compose up -d --build
docker-compose exec php bash
npm install
```

<b>protocol error, symlink '../sshpk/bin/sshpk-conv' -> '/home/ubuntu/workspace/npm-training/node_modules</b>
シンボリックリンクがはれないエラーが出ました。<b>npm install --no-bin-links</b>でリンクをはらないもしくは管理者権限で<b>npm install</b>をたたけばいけるそうです。
[npm installできない](http://minatooe.hatenablog.jp/entry/2017/12/15/234418)

###docker環境でsudoをたたけるようにする

phpのDockerFileを編集します。

```:DockerFile
RUN apt-get install -y sudo
```

```:コマンド
docker-compose up -d --build
docker-compose exec php bash
sudo npm install
```

インストール完了
[sudoをたたけるようにする](https://qiita.com/Sa2Knight/items/bdb6d821a3ac10088289)

## ◆Vue.jsを動かす

resources/js/components配下にExampleComponent.vueがあるのでこれを利用して、welocome.blade.phpを編集します。

```:welocome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
```

<example-component></example-component>で呼び出しています。
<b>しかし、mix関数でファイルを読み込めないエラーが発生しアクセスしても何も表示されませんでした。
npm run devをたたけばassetファイルのコンパイルを行ってくれるそうです。</b>
[Vue.jsを動かす](https://daiki-sekiguchi.com/2018/08/13/laravel-vue-js-helloworld/)

```:コマンド
npm run dev
```

```
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
```

ないよっていうエラーが出たので、修正します。

```:package.json
"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
```

```:コマンド
npm run dev
```

うまくいきました。
run devでコンパイルされたのでassetで読み込めました。

```
<script src=" {{ asset('js/app.js') }} "></script>
```

再度アクセスします。ちゃんと表示されました。構築完了


##◆参考にさせていただいた記事
[docker vuejs最短レシピ](https://qiita.com/fruitriin/items/e0f2c9aa035c3ff2c874)
[npmとは](https://techacademy.jp/magazine/16105)
[Node.jsとは](https://techacademy.jp/magazine/16248)
[フロントエンドステップ](https://qiita.com/hashrock/items/15f4a4961183cfbb2658)
[docker npm install](https://teratail.com/questions/129423)
[dockerFile修正反映](https://qiita.com/okyk/items/a374ddb3f853d1688820)