knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Vue CLI+ Laravel 5.8で、クロスドメイン SPA構成/PWA対応のCRUD作成する。 #Laravel #Vue.js #SPA #PWA

概要

前の SPA構成と似ていますが、
バックエンドを、Laravel API サービス
とした。SPAの事例となります。
・PWAも対応しています

・デプロイは、netlify ホスティングサービスを使用し
 Vue CLI の build を、zip圧縮でアップロードしています。
 *) SSL対応の、設置場所であれば。問題ないと思います

構成

Vue CLI
vue-router
@vue/cli-service : 4.4.0
API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス


・構成図みたいな図
f:id:knaka0209:20200609120440p:plain

 複数ドメイン構成で、やや複雑になりますが。
 ブラウザセキュリティの、クロスサイト関係のエラーがでましたので
 Laravel の、クロスドメイン対応の修正を追加

・クライアントは、PWAで
 PC/ SPのマルチデバイス対応

Laravel のクロスドメイン対応

Middleware の追加等で対応しました。 下記参考させて頂きました
https://qiita.com/kobayashi-m42/items/c0a2609ae61a72dcc60f

Access-Control-Allow-Origin に、通信元ドメインを設定する例でした
app/Http/Middleware/Cors.php
https://github.com/kuc-arc-f/lara58a/blob/master/app/Http/Middleware/Cors.php

    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:8080')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type');        
    }

参考のコード

・Vue CLI 部分
github.com

デモのページ

https://code-kuc.netlify.app

ヘッダ部分> Task で、開けます。

code-kuc.netlify.app

画面

・PC / PWA デスクトップ版
f:id:knaka0209:20200609121028p:plain

android PWA版
f:id:knaka0209:20200609121048j:plain

vue-router ルーティング

src/router/index.js

https://github.com/kuc-arc-f/vue_spa3a/blob/master/src/router/index.js

参考のページ

knaka0209.hatenablog.com