レンタルサーバーで無理くりLaravel + Nuxt + PWAをやってみた

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](https://github.com/m2sd/nuxt-laravel))を入れ直す

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

## nuxt.config.jsを編集

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

## package.jsonを編集

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

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

## [pallares/laravel-nuxt](https://github.com/skyrpex/laravel-nuxt)をComposerからインストール

```
$ composer require pallares/laravel-nuxt
```

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

npm run dev実行後、[localhost:3000/app/](http://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 #編集
```

```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](http://localhost:8000/app/top)にアクセスして、Laravel Nuxt用のトップページ(Nuxtのデフォルト画面)を確認する。

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

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

```apache
<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」にアクセスしてください。

<img width="477" alt="スクリーンショット 2019-12-04 09.57.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133718/e30b139a-ac35-7625-20eb-7e26ac2f9591.png">

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

## 最後に

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

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

## 追記

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