先日Laravel、Nuxt.jsの構成について記述させていただきました。
今回はその構成をするにあたって、躓いたポイントを紹介させてもらいます。

Nuxt.jsのバージョン

Nuxt.js 1.0.0-rc11を前提としています。
1.0.0に上がったタイミングでこの記事の内容は適応されない可能性があります。

nuxt generateとnuxtコマンドの挙動のちがい

nuxt generateというのは、Nuxt.jsで作成されたプロジェクトを静的ファイル(html, js, css)として書き出すNust.jsが提供しているコマンドです。
こちらを使用するとS3やfirebase hostingなどにアップロードするだけでアプリケーションをデプロイできるようになります。

ただ、こちらはNode.jsランタイムを利用しないという特徴のため、nuxtコマンドでは動いたけどnuxt generateコマンドでは失敗するという不具合が発生することがあります。

nuxtコマンドだと、ファイル名の小文字大文字は気にしないが、nuxt generateだとそこでエラーになる
nuxt generateはnuxt外に対してはbabelが通らない
- 自家製パッケージ等でES6を前提としたコードを読み込もうとした場合、nuxtだと正常に動くがnuxt generateだとビルドに失敗する

上記のようなミスは、nuxt generateコマンドをCIのチェックに入れておくことで事前に検出できます。

1.0.0-rc3での変更点とドキュメント

Nuxt.jsでは1.0.0-rc3にて大きく変更がありました。特にSSRまわりの影響の大きそうなところを紹介します。

Nuxt.js での大きな特徴としてSSRのエコシステムがありますが、例えば外部のUIフレームワーク等でwindowを前提としたフレームワークを使っている場合、SSR時に実行するとエラーになってしまいます。

そのエラーを回避するために、Nuxt.jsでは環境変数によってSSR時なのかクライアント時なのか判定する機能が搭載されています。

その環境変数が、

process.env.SERVER_BUILDからprocess.env.serverへ、
process.env.CLIENT_BUILDからprocess.env.clientへ、

双方変更されています。
公式ドキュメントの方にはすでに取り入れられていますが、開発系のスライドやブログ等1.0.0-rc3以前を前提としたものでは上記の環境変数を使われている可能性があるので注意が必要です。

困ったら公式のドキュメント(できれば英語が望ましい)を見るようにしましょう。

Nuxt.jsの依存している依存パッケージ

前回の記事でも紹介させていただきましたが、 1.0.0-rc11だとまだvueのバージョンが2.4のままです。
例えば最近2系がリリースされたElementというUIフレームワーク(参考記事)では、vue:2.5を前提としており、アップデートしないとこちらのようなWarningがでてきます。

このようにNuxt.jsは便利な分、利用しているパッケージに大きく依存しているところがあるので、他のパッケージを使用する際は依存関係に注意する必要があります。

SSRがまだ必須

こちらは1.0.0に上がったタイミングで解消されるかもしれませんが、SSRを前提とした構成となっているため、SSR時にのみ発生するような不具合だと、ブラウザのデベロッパーツールで補足できません。

SSRが必要でない場合は

nuxt generateを使用し、静的ファイルとして生成する
<no-ssr></no-ssr>でSSRしたくないところを囲い、クライアントサイドのmountedのタイミングでコンポネントが生成されるようにする

等の対応が必要となります。

axios moduleでのcredential対応、もしくはCookieの対応

若干Nuxt.jsとは離れますが、認証データ等データの持ち方は注意が必要です。

SSR時ではlocalStorageにアクセスすることはできないため、SSR前提でのアクセスの際はCookieにデータを保持しておく必要があります。

Laravel passportを使った認証

Laravel passportを使って認証を行う場合は、middlewareにて認証情報をstoreにセットし、認証前提のページにてaxiosにaccess_tokenをセットします。

構成に関しては、長くなりそうなので、別記事にて紹介させていただきます。

Cookieを使用した認証

Cookieを使用した認証を行う場合は、Laravel側にcorsを設定しcredentialをtrueにします。

CORSの対応でCredentialを使用する場合はallowedOriginを’*‘ではなく、特定のドメインを指定するようにしてください。

laravel-corsを使用している場合は下記の用に設定します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
return [
-    'supportsCredentials' => false,
-    'allowedOrigins' => ['*'],
+    'supportsCredentials' => true,
+    'allowedOrigins' => [
+        env('APP_URL'),
+    ],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
];

まとめ

今回はLaravel, Nuxt.jsでの構成時のつまづきポイントについて紹介させていただきました。
現状のバージョン依存の問題もありますが、利用する際は注意しましょう。

Laravel, Nuxt.jsで構成した時のつまづきポイント

Contents