こんにちは、SCOUTERの id:kotamat です。
先日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
だとビルドに失敗する
- 自家製パッケージ等でES6を前提としたコードを読み込もうとした場合、
上記のようなミスは、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を使用している場合は下記の用に設定します。
return [ - 'supportsCredentials' => false, - 'allowedOrigins' => ['*'], + 'supportsCredentials' => true, + 'allowedOrigins' => [ + env('APP_URL'), + ], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'], 'exposedHeaders' => [], 'maxAge' => 0, ];
まとめ
今回はLaravel, Nuxt.jsでの構成時のつまづきポイントについて紹介させていただきました。
現状のバージョン依存の問題もありますが、利用する際は注意しましょう。
勉強会
Laravel, Vue.jsの勉強会を開催致します!
LT枠、登壇枠はまだ残っているので
興味ある方はご参加よろしくお願いいたします。