Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

環境

・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

これで直る。

ma7ma7pipipi
こんばんわ。PHP界の神です。 お仕事下さい。 浮気したことは人生で1度もありません。 一途なので。
https://okws.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away