過去に作ったdocker-composeでlaravelを動かす環境
こちらを編集して進めます。
##◆npmとは
Node.jsのパッケージ管理ツール
##◆Node.jsとは
サーバーサイドでJavaScriptを実行できるようにするための環境
動画配信やチャットアプリやゲームなどリアルタイムの大量のトラフィックがある場合に力を発揮する。
##◆package.json
npmでインストールするパッケージのバージョン情報をpackage.jsonに格納しています。
laravelではpackage.jsonに一通りVue.jsで使用するパッケージが記載されているので、npm installするだけでインストールできます。
##◆環境構築始める
laravelの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をたたけるようにする
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を編集します。
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を編集します。
<!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
ないよっていうエラーが出たので、修正します。
"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修正反映