環境

PHP 7.3
Laravel 7.4
React 16.10

設定ファイル

gcloud app deploy 時に利用する設定ファイルです。
一部省略してます。また、余計な物が入ってるかもしれません。

app.yaml

env: standard
instance_class: F1

env_variables:
    APP_NAME: Laravel Project
    APP_ENV: *
    APP_KEY: *
    APP_DEBUG: true
    APP_STORAGE: /tmp
    VIEW_COMPILED_PATH: /tmp

    LOG_CHANNEL: stackdriver // googleのstackdriverを使うため

    BROADCAST_DRIVER: log
    CACHE_DRIVER: file
    QUEUE_CONNECTION: sync
    SESSION_DRIVER: cookie //stackdriver時にはcookieにする必要あり
    SESSION_LIFETIME: 120


handlers:
    # Serve images as static resources.
    - url: /css
      static_dir: public/css
    - url: /js
      static_dir: public/js
    - url: /fonts
      static_dir: public/fonts
    - url: /images/(.*)
      static_files: public/images/\1
      upload: .+\.(gif|png|jpg)$

    # Serve your app through a front controller at index.php or public/index.php.
    - url: .*
      script: auto

automatic_scaling:
    min_idle_instances: 1
    max_idle_instances: 1
    max_pending_latency: 2000ms

エラー別対応

There is no existing directory at "/var/www/storage/logs" and its not buildable: Read-only file system

未確認ですが、GAE環境のこのディレクトリはRead only環境となっているのではと推測しました。今回は次の設定で利用先のディレクトリを変更して回避しました。

APP_STORAGE: /tmp

Class 'Facade\Ignition\IgnitionServiceProvider' not found

依存関係の問題です。
dev環境とprod環境で設定を変えている場合は、composerで依存関係を修正して下さい。
基本的には、dev環境とprod環境の両方でファイルを使えるように設定すればOKです。
また、依存関係を変更した後はcasheを削除してから再実行するようにしてください。（これではまってました）

詳細は下記のURLをご覧ください。
stackoverflow laravelをGAEにデプロイした時のエラー

Uncaught SyntaxError: Unexpected token <

ビルドしたフロントのファイル(app.js)が読み込めなかったために起きた事象です。
app.yamlのhandlerを適切に設定していれば回避できました。

handlers:
    # Serve images as static resources.
    - url: /css    // <- ここで読み込むファイルの種類を設定
      static_dir: public/css   // <- 実際の置き場所を指定
    - url: /js
      static_dir: public/js
    - url: /fonts
      static_dir: public/fonts
    - url: /images/(.*)
      static_files: public/images/\1
      upload: .+\.(gif|png|jpg)$

正直細かいところが分からなかったので詳細は公式リファレンスをご参照ください。
GCPリファレンス GAEのapp.yamlの設定 PHP7

css や js ファイルが変更されたら自動的にブラウザリロードしてくれるととても開発が楽になります。
ということで、Laravel-mixでブラウザ自動リロード設定を行います。

対象者

Laravel Blade を書く人向け

前提

• 最強のLaravel開発環境をDockerを使って構築する【新編集版】
• https://github.com/ucan-lab/docker-laravel

当記事は上記の記事の補足になる記事です。

環境

• PHP: 7.4.6
• Laravel: 8.5.0
• Node: 14.2.0
• yarn: 1.22.4
• browser-sync: 2.26.12
• browser-sync-webpack-plugin: 2.2.2
• vue-template-compiler: 2.6.12

前準備: yarn を使用する場合

{
    // ...
    "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 --disable-host-check --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"
    },
    // ...
}

npm run を yarn に書き換えてください。

{
    // ...
    "scripts": {
        "dev": "yarn 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": "yarn development -- --watch",
        "watch-poll": "yarn watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "yarn 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"
    },
    // ...
}

webpack.min.js を修正する

webpack.min.js

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

mix.js('resources/js/app.js', 'public/js')
    .browserSync({
        proxy: {
            target: 'http://app:9000',
        },
        files: [
            './resources/**/*',
            './public/**/*',
        ],
        open: false,
        reloadOnRestart: true,
    });
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

ビルド

$ make web
$ yarn install

# npm コマンドでインストールしようとするので、手動で追加しておきます。
$ yarn add -D vue-template-compiler browser-sync browser-sync-webpack-plugin

$ yarn hot

http://127.0.0.1

resources や public 配下のファイルが変更されたら自動的にブラウザリロードが行われます。
これでもokなんですが、コンテナ内でビルドさせるとめちゃくちゃ遅いです...

ローカルでNodeを使う場合の設定を書きます。

ローカルのNodeを使う場合

webpack.min.js

        proxy: {
            target: 'http://127.0.0.1', // 書き換え(webコンテナを指定している)
        },

Webpackのサーバーを起動します。

$ cd backend
$ yarn hot

http://127.0.0.1:3000

参考

https://browsersync.io/docs/options

DBのレコードをページに表示していって、好きなところで次のページ、前のページを生成できるペジネーション。
Laravelだと設置は簡単なものの、カスタマイズに少し戸惑ったのでメモ。（Laravel7です。）

Laravelの某教科書では、linksメソッドのパラメータにテンプレート名を指定すればできますと書いていますが、その指定の仕方が書いてなくて、試行錯誤しました。

Laravelのデフォルトのテンプレートはこのコマンドでインストールできます↓

$ php artisan vendor:publish --tag=laravel-pagination

resources/views/vendor/pagination/のディレクトリにテンプレートがインストールできました。

これらを適用するには、viewsのファイル内に埋め込んだlinksメソッドにこのように書けばOKです↓

index.blade.php

{{ $items->links('vendor.pagination.bootstrap-4')}}

ポイントは文字列を示す''を使用すること、vendor.paginationとディレクトリを指定すること、blade.phpなどは省くことかと思います。

こうしてまとめると、基礎的なことばかりなのですが、私みたいな初心者は意外にこういうところでも躓くと思うので、他の方の参考になれば幸いです。

LaravelでURLを強制httpsかさせる方法で、よくある対策ではうまくいかなかったのでメモ。

APP_ENVをproductionに

Herokuの場合、heroku config:setで環境変数を設定。

heroku config:set APP_ENV=production

AppServiceProviderのboot()にforceSchemeを

AppServiceProviderのboot()に下記を追加

AppServiceProvider.php

public function boot()
{
    if (\App::environment(['production'])) {
        \URL::forceScheme('https');
    }
}

HttpをHttpsにリダイレクト

Middlewareでhttpによるアクセスをhttpsにリダイレクトする
ForceHttpsという名前のmiddlewareを作成
php artisan make:middleware ForceHttps
handle()のところに下記を追加

ForceHttps.php

public function handle($request, Closure $next)
{
  if (\App::environment(['production']) && $_SERVER["HTTP_X_FORWARDED_PROTO"] != 'https') {
    return redirect()->secure($request->getRequestUri());
  }
  return $next($request);
}

Kernel.phpにForceHttpsを追加

Kernel.phpに先ほど作成したForceHttps.php middlewareを追加

Kernel.php

protected $middleware = [
  \App\Http\Middleware\ForceHttps::class, // 追加
];

このプロジェクトに関数がいくつあるか知りたい ってこと無いですか？ないですか。僕はありました。

Laravelのプロジェクトなんですけど、パブリックな関数がいくつあるのか知りたかったんですね。PhpStormのプラグインだったり、色々と探したんですが、なんか欲しい情報を簡単に出せるのがありませんでした。

最近shell（bash）の書き方を覚えたばかりなので、使って書いたほうが早そうという結論に。

前提

• Bashで書いてます。shell初心者です。
• コメントアウトも拾っちゃいます。
• 文字列とかも拾っちゃいます。
• とにかく public function って文字列は無差別に拾います。
• 行数カウントです。
• プロジェクトルートから実行するのを想定。

ワンライナー

$ result_file="class_analysis"; [[ -f "$result_file" ]] && rm "$result_file"; touch "$result_file"; targets=("Services" "Repositories"); for target in "${targets[@]}"; do ls -1 app/"$target"/ | grep ".*Interface.php" | while IFS= read file; do echo "app/$target/$file,$(grep -c "public function" "app/$target/$file")" >> $result_file; done; done;

分解

まずは出力先ファイル名を設定。

$ result_file="class_analysis";

出力先ファイルが既に存在する場合は、削除しちゃいます。

[[ -f "$result_file" ]] && rm "$result_file";

新規で出力先ファイルを作ります。

touch "$result_file";

今回は「すべてのディレクトリ」ではなく、ある程度絞って数を見たかったため、ディレクトリをある程度絞りました。
プロジェクト的に重要なロジックが詰まっている以下の2つを対象としています。

targets=("Services" "Repositories");

対象ディレクトリで回して行きます。

for target in "${targets[@]}"; do

app 配下のファイルを1ファイル1行で表示し、パイプで出力を次の処理へ渡す。

    ls -1 app/"$target"/ |

今回対象のプロジェクトではInterfaceを具象クラスと同じディレクトリに格納していたため、Interfaceだけ見ればいいや、ということでインターフェースだけで絞り込みました。
Interfaceという文字列で grep した結果を、またまたパイプで次の処理へ渡します。

    grep ".*Interface.php" |

1ファイルずつ回して public function という文字列を含む行数を抜き出して、カンマ区切りでファイル名とともに echo して、その結果を出力先ファイルに追加。

    while IFS= read file; do
        echo "app/$target/$file,$(grep -c "public function" "app/$target/$file")" >> $result_file;
    done;

ループお終い。

done;

以上

あとがき

上記、ニーズに合わせてカスタマイズして使っていただければと。
ファイルの grep 周りをもうちょっときれいにできる気がしてる。

はじめに

今回もLaravelのCollectionのメソッドについてまとめたいと思います。

takeメソッドで指定した件数だけデータ取得する

Collectionの中から特定の件数だけを取得することができます。

$collection = collect(['赤', '青', '黄', '緑', '白',]);
$chunk = $collection->take(3);
print_r($chunk->toArray());

実行結果は下記になります。

Array
(
    [0] => 赤
    [1] => 青
    [2] => 黄
)

先ほどは正の数でしたが負の数を用いていて実装すると、後ろから指定した数の値を取得することができます。

$collection = collect(['赤', '青', '黄', '緑', '白',]);
$chunk = $collection->take(-2);
print_r($chunk->toArray());

実行結果は下記になります。

Array
(
    [4] => 白
    [3] => 緑
)

おわりに

いかがでしたでしょうか。
takeメソッドでは負の数も用いることができるので必要な時があれば試してみてください。

目次

Laravelの記事一覧は下記
PHPフレームワークLaravelの使い方

Laravelバージョン

動作確認はLaravel Framework 7.19.1で行っています

前提条件

eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています

LaravelでJavaScript、CSSを使う
本記事は上記が完了している前提で書かれています

Vue.jsを使う準備

Laravelの認証(web画面)
を実行した人はもう準備が済んでいます
上記記事で行った
composer require laravel/ui
php artisan ui vue --auth
でVue.jsを使うのに必要なものがインストールされていました
やってない人は
composer require laravel/ui
php artisan ui vue
npm install
をしましょう
package.jsonを見てみるとvueが追加されているはずです

コンポーネント作成

/sample/resources/js/components/Sample.vue作成

Sample.vue

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>


<script>
export default {
  props: {
      message: {title: String, default: 'hello world'}
  }
}
</script>

コンポーネント登録

/sample/resources/js/app.jsに
Vue.component('sample', require('./components/Sample.vue').default);
を追記

app.js

‥‥
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('sample', require('./components/Sample.vue').default);
‥‥

app.jsを見るとVue.component('example-component', require('./components/ExampleComponent.vue').default);が既に書かれていたと思います。また、resources/js/components/ExampleComponent.vueが既に存在していたはずです
Laravelでは事前にapp.jsにVue.jsを使う準備ができており、開発者はそこにVue.jsのグローバルコンポーネントを登録すれば使えるようになっています

Controllerにメソッド追加

(1) /sample/app/Http/Controllers/SampleController.phpにvueメソッドを追記

    public function vue()
    {
        return view('sample.vue');
    }

(2) /sample/routes/web.phpに下記を追記
Route::get('sample/vue', 'SampleController@vue');

viewの作成

/sample/resources/views/sample/vue.blade.phpファイル作成

vue.blade.php

<html>
    <head>
        <title>sample</title>
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div id="app">
            <sample />
        </div>
    </body>
</html>

JavaScriptビルド実行

コマンドラインで
cd sample
npm run dev

動作確認

http://localhost/laravelSample/sample/vue

実行結果

hello world