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

過去に作ったdocker-composeでlaravelを動かす環境
こちらを編集して進めます。

◆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を動かす環境

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

protocol error, symlink '../sshpk/bin/sshpk-conv' -> '/home/ubuntu/workspace/npm-training/node_modules
シンボリックリンクがはれないエラーが出ました。npm install --no-bin-linksでリンクをはらないもしくは管理者権限でnpm installをたたけばいけるそうです。
npm installできない

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をたたけるようにする

◆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>

で呼び出しています。
しかし、mix関数でファイルを読み込めないエラーが発生しアクセスしても何も表示されませんでした。
npm run devをたたけばassetファイルのコンパイルを行ってくれるそうです。
Vue.jsを動かす

コマンド

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最短レシピ
 npmとは
 Node.jsとは
 フロントエンドステップ
 docker npm install
dockerFile修正反映