PWA Advent Calendar 2019 4日目の記事です。
PWAチックなのはNuxt.jsのNuxt PWAを使っているところのみです。
レンタルサーバーで無理くりLaravel + Nuxt + PWAをやってみました。

試してみたものの概要

• レンタルサーバー (XREA)
• Laravel 6.x
• Nuxt.js 2.10 (Nuxt PWA)

結論

そもそもレンタルサーバーでLaravelを動かすべきではないし、
Nuxt.jsとLaravelを同一サーバーで管理するのが面倒臭すぎました。

前提条件

• レンタルサーバーでSSLを設定済み
• Laravel 6.xをローカル環境で構築済み
• ローカル環境のNode.jsをインストール済

事前準備

npx @vue/cliをインストールする

$ npm i -g npx @vue/cli

LaravelのプロジェクトディレクトリにNuxtを入れる

$ npx create-nuxt-app nuxt

選択肢は適当に。

Nuxtのインストールが完了したら、Nuxtの設定関連ファイル群をLaravelのルートディレクトリに移動させる。

$ cd nuxt
$ mv .babelrc jest.config.js nuxt.config.js package-lock.json package.json ../

Nuxtに必要なモジュール(nuxt-laravel)を入れ直す

$ cd -
$ npm i --D nuxt-laravel@next @nuxtjs/axios @nuxtjs/proxy @nuxtjs/pwa

nuxt.config.jsを編集

module.exports = {
  srcDir: 'nuxt', //追加
  mode: 'spa', //追加
  modules: [
    'nuxt-laravel'
    '@nuxtjs/pwa', //追加
  ],
  router: {
    base: '/app/' //追加 任意のディレクトリ名
  },
}

package.jsonを編集

Laravelベースの設定になっているため、scriptsの箇所をごっそり編集する

・
・
・
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "postinstall": "npm run build"
  },

pallares/laravel-nuxtをComposerからインストール

$ composer require pallares/laravel-nuxt

Nuxtの開発環境サーバーを動かす

npm run dev実行後、localhost:3000/app/にアクセス

$ npm run dev

Nuxtのデフォルトが見えればおｋ。

Laravel Nuxt用のトップページを作成する

とりあえず動かすだけなら./nuxt/pages/index.vueのコピーでOK。

nuxt
├── pages
│   ├── README.md
│   ├──  top.vue #新規作成
│   └──  index.vue

Laravelのルーティングの設定

/app/topのURLでNuxtのtop.vueを表示するように設定する。

routes
├── api.php
├── channels.php
├── console.php
└── web.php #編集

    Route::get('/', function () {
        return redirect('/app/top');
    });

    Route::get('/app', function () {
        return redirect('/app/top');
    });

    Route::get(
      '/app/top',
      '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
    );

本番環境のコンパイル

$ npm run build

でNuxt.jsのビルドを実行する

ローカルでLaravel Nuxt用のトップページを確認する

PHPのBuiltinサーバーでなら

$ php artisan serve

を実行して、localhost:8000/app/topにアクセスして、Laravel Nuxt用のトップページ(Nuxtのデフォルト画面)を確認する。

レンタルサーバー用の.htaccessを作成

.htaccessプロジェクトのルートディレクトリに置いて、publicデフォルトを無理やりドキュメントルートに変更します。
そうしないとLaravelがレンタルサーバーで基本的には動作しません。
＊＊ドキュメントルートを直接弄れるレンタルサーバーであれば別です＊＊

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} -d [OR]
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ ^$1 [N]

    RewriteCond %{REQUEST_URI} (\.\w+$) [NC] #追加
    RewriteRule ^(.*)$ public/$1 #追加

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ server.php

    RewriteRule ^(.*)/+$ $1 [R=301,L]
</IfModule>

レンタルサーバーにファイルアップロード

レンタルサーバーはたぶんFTPかSFTPですので、FileZillaなどを使用して、レンタルサーバーの公開ディレクトリにnode_modulesを除く全ファイルをアップロードします。メチャクチャ時間かかります。

.envやvendorも必ずアップロードしてください。
でないと動きません。

アップロードしたレンタルサーバーのURLにアクセス

「https://${domain}/app/top」にアクセスしてください。

インストールのボタンが出ており、PWAとしてインストールが可能なはずです。

最後に

レンタルサーバーで無理くりLaravel + Nuxt + PWAを試してみて、一旦は動くものの、まず実運用には耐えられないと思います。
Laravelのマイグレーションは基本SQLを発行して、SQLをphpmyadminか何かでimportし、デプロイはvendorから何から何までアップロードするため、アップロードミスや漏れも発生しやすいです。

もし実運用を目指すのであれば、Laravelは使わずにNuxtで静的に生成したファイル群をレンタルサーバーで設置するのであれば、お手軽にNuxt + PWAを試せると思います。

追記

明日はセルフバトン渡します。
何も考えずに始める意識低い系のPWAの予定です。