jenssegers/laravel-mongodb Installation on php7.2 cloud9

Updated: 2018/9/27

  • php7.2 を cloud9 にインストール

monteecristoo.hatenablog.com

  • MongoDB のインストール

monteecristoo.hatenablog.com

  • PHP 用の MongoDB ドライバーをインストール

PHP: Installing the MongoDB PHP Driver with PECL - Manual

sudo pecl install mongodb でエラーが出るので

sudo apt-get install php-pear

sudo pecl install mongodb

monteecristoo.hatenablog.com

  • jenssegers/laravel-mongodb をインストール

composer require jenssegers/mongodb

  successfully installed!!

f:id:monteecristoo:20180925193328p:plain

  • Configurations

@config/app.php

'mongodb' => [
    'driver'   => 'mongodb',
    'host'     => env('DB_HOST', 'localhost'),
    'port'     => env('DB_PORT', 27017),
    'database' => env('DB_DATABASE'),
    'username' => env('DB_USERNAME'),
    'password' => env('DB_PASSWORD'),
    'options'  => [
        'database' => 'admin' // sets the authentication database required by mongo 3
    ]
],

MongoDBのauth設定をしていない(./mongod でWARNING で表示される)なら'user_name' 'password' をコメントアウト

'port' => env('DB_PORT', 27017), としておくとなぜか

f:id:monteecristoo:20180927135347p:plain

違うport につながってエラーになるので

'port' => env(27017)

にするとOK

 

 

php の mongodb ドライバーをインストールしようとしたらエラーが発生した cloud9

環境:

php7.2

cloud9(ubuntu14.0.4)

cloud9 で php5 から php7 にアップデート済み

MongoDB ver 4.0.2

 

sudo pecl mongodb

  =>

Parse error: syntax error, unexpected 'new' (T_NEW) in /usr/share/php/PEAR/Frontend.php on line 91

f:id:monteecristoo:20180925190836p:plain

solution:

  sudo apt-get install php-pear

  sudo pecl install mongodb

f:id:monteecristoo:20180925191053p:plain

 参考:

stackoverflow.com

github.com

 

VuetifyでComputed property “drawer” was assigned to but it has no setter 等エラーが発生したら・・・

updated: 2018/9/13

 

Navigation-drawerを子componentで使用したいため、default の data: drawer を親子間で共有したいため、

mixinを使ってcomputed: {drawer: true} で共有した。

 すると下記のエラー

Computed property “drawer” was assigned to but it has no setter

 以下で解決

----------------------------------------------------------------------------------------

@Header.vue (子component)

<v-toolbar-side-icon @click="switch1"></v-toolbar-side-icon>

 

import { VuetifyMixin } from '../../mixins/VuetifyMixin.js'

 

methods: {

  switch1() {
    this.$store.dispatch('forVuetify_switchDrawer')

  }

}

 

@PageBody.vue (親component)

<v-navigation-drawer
  fixed
  clipped
  :value.sync="drawer"
  app
>

import { VuetifyMixin } from '../../mixins/VuetifyMixin.js'

 

@VuetifyMixin.js

export const VuetifyMixin = {
computed: {
drawer() {
return this.$store.state.forVuetify.drawer
}
},
}

 

Vuex

const state = {
  drawer: false
};

const mutations = {
  'SWITCH_DRAWER' (state)
  {
    state.drawer = !state.drawer
  }
};

const actions = {
  forVuetify_switchDrawer({ commit })
  {
    commit('SWITCH_DRAWER');
  }
};

export default {
  state,
  mutations,
  actions
}

 

参考:

vuejs.org

github.com

stackoverflow.com

 

 UPDATED:

over-lay をnavigation-drawer に使った場合、over-lay 部分をクリックした際のイベントinput により、drawer の値に誤作動が出る。over-lay を使用しない、または over-lay を自分で実装すれば回避できるが手間なので今回は component を separate しないでオリジナルの data: { drawer: bool } で管理することにする。

 

UPDATED:

vuesax を使ってみたらsidenavbar のモバイルでのスワイプでの挙動が vuetify より優れていたのでそちらに変更。(vuetifyのsidebarのtoggleの応答速度が悪い)

 

参考:

lusaxweb.github.io

Laravel blade template と VueJS の連携 blade template 内の vue component にデータをパスしたい

updated: 2022/2/18

 

より良い方法:

monteecristoo.hatenablog.com

 

blade template 内の vue component にデータをパスしたい場合

例えば

authHome.blade.php / guestHome.blade.php 

の二つに共通で PageBody.vue という vue component を使うとき、Laravel 側で Auth::checkして得た情報を PageBody にパスしたい場合

router 側でAuth::check の結果で表示する view を切り替える。

@authHome.blade.php / guestHome.blade.php 

@extends('layouts.app')
  @section('content')
    <div id="app">

      <pageBody></pageBody>

    </div>

  @endsection

 

blade template から直接 vue component にデータをパスすることはできないのでブラウザのセッションストレージを使う。

@authHome.blade.php

@extends('layouts.app')
  @section('content')
    <div id="app">

      <pageBody></pageBody>

    </div>

    <script>

      sessionStorage.clear();

      sessionStorage.setItem("guest", "false");

    </script>

  @endsection

 

@guestHome.blade.php 

@extends('layouts.app')
  @section('content')
    <div id="app">

      <pageBody></pageBody>

    </div>

    <script>

      sessionStorage.clear();

      sessionStorage.setItem("guest", "true");

    </script>

  @endsection

 

@PageBody.vue

<script>

  export default {
    data() {
      return {

        auth: ""

      }

    },

    beforeMount() {

      this.auth = sessionStorage.getItem("guest");

    }

 

これで vue component 側に auth 情報がパスできたので 例えば v-if 等で login logout register 等の header を切り替えることが出来るようになる。

 

Laravel-Mix issue: vue-loader のバージョンをアップグレードしたら vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 等、大量のエラーメッセージ

laravel-mix@2.1.11

vue-loader@15.3.0

 

vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生

 

solution: 

webpack.mix.js にプラグインを適用

let mix = require('laravel-mix');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

 

mix.webpackConfig({
  plugins: [
    new VueLoaderPlugin()

  ]

});

参照:

vue-loader.vuejs.org

 

また、vue-loader を @14.2.2 から @15.3.0 にアップデートしたら yarn run watch 時の下記のエラーメッセージが発生しなくなった。

No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.

yarn の全てのコマンドをした時のエラーメッセージ

yarn uses deprecated new Buffer() constructor and causes deprecation warnings when run with NODE_PENDING_DEPRECATION=1.

上記も発生しなくなった。

 

cloud9 で Nginx を使う

updated: 2018/8/4

 

cloud9 では初めから Nginx がインストールされている。

 

初期設定ではポートが 80 になっている。cloud9 で使用できるポートは 8080, 8081, 8082 なので 設定を変える。

docs.c9.io

@/etc/nginx/sites-available

sudo nano default

>>> 

server {
listen 8081 default_server;
listen [::]:8081 default_server ipv6only=on;

root /usr/share/nginx/html;
index index.html index.htm;

 

設定を変えたら

sudo nginx

 >>> ポート8081 でサーバーが立ち上がる。

ポートを指定しないと No application running になるが

先ほど設定した8081をポート指定して

YOUR_CLOUD9_URL:8081 にアクセスすると Welcome to nginx! が表示されて設定完了。

 

conf ファイルにエラーがあるとnginx コマンドをしてもエラーメッセージが出て正常動作しないのでエラー取りが必要。