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の予定です。