centos7 で laravel5.7 インストールと vue.js を動作させるまでの設定

# 環境

・centos7
・今回作るフォルダは test.helpee.club
・SSL設定済み
・nginx



# laravel5.7 のインストール


```

cd /var/www/html
composer create-project --prefer-dist laravel/laravel test.helpee.club "5.7.*"

```

これで /var/www/html/test.helpee.club ができました。




# 権限設定

```

chown -hR hideki:hideki /var/www/html/test.helpee.club
chmod -R 777 /var/www/html/test.helpee.club/storage
chmod -R 777 /var/www/html/test.helpee.club/bootstrap/cache

```




# nginx の 設定

fastcgi_param のパスをベタ書きにする。
でないと laravel の not foud が出る。
キャッシュは画像とcssのみにする。javascriptをキャッシュするとうまくうごかない。


```

server {

    listen 443 ssl http2;
    server_name test.helpee.club;

    root   /var/www/html/test.helpee.club/;

    ssl_certificate         /etc/letsencrypt/live/test.helpee.club/fullchain.pem;
    ssl_certificate_key     /etc/letsencrypt/live/test.helpee.club/privkey.pem;




    location / {
       root  /var/www/html/test.helpee.club/public;
       index index.php index.html index.htm;
       try_files $uri $uri/ /index.php$query_string;
     }



     location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
        root   /var/www/html/test.helpee.club/public;
        access_log off;
     }


     location ~ .*\.(html|jpg|gif|png|css) {
        expires 30d;
     }


     location ~ \.php$ {


       fastcgi_pass   unix:/var/run/php-fpm.sock;
       fastcgi_index  index.php;

       fastcgi_param SCRIPT_FILENAME /var/www/html/test.helpee.club/public/index.php;
       include        fastcgi_params;

     }


}


```

welcome ページが表示されましたね？
これでlaravelのインストール完了です。


ここで、一旦サーバー側で作成されたファイルをローカルにダウンロードしておきましょうか。





# vue.blade.php 作成

```

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="app">
    <example-component></example-component>
</div>

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

```


# vue.js の作成とインストール

```

cd /var/www/html/test.helpee.club/
npm install
npm run dev

```

```

//web.php
Route::get('/{app}', function () {
    \File::cleanDirectory(storage_path()."/framework/views/");//本番になったら削除する
    return view('vue');
})->where('app', '.*');

```

これで exampleComoponent.vue の内容が表示される。


# アップデートしよう。

vue.js も新しいのが出ているので、最新版にする。

cd /var/www/html/test.helpee.club



```

npm install -g npm-check-updates
ncu -u
npm update

```

これで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.19”,
“bootstrap”: “^4.3.1”,
“cross-env”: “^6.0”,
“jquery”: “^3.4”,
“laravel-mix”: “^5.0.0”,
“lodash”: “^4.17.15”,
“popper.js”: “^1.16”,
“resolve-url-loader”: “^3.1.0”,
“sass”: “^1.23.3”,
“sass-loader”: “^8.0.0”,
“vue”: “^2.6.10”,
“vue-template-compiler”: “^2.6.10”
}
}


```

それではアップデート


```

npm update
npm list vue
//2.6.10

```

最新版になりましたね！


# npm run watch バグる時

```

rm -rf node_modules
npm cache clear --force
npm install

```

これで直る。