Nginx+ngx_pagespeed環境下でNuxt3がエラー

事の発端

Nuxt3 RC3で新しいプロジェクトを作って、さーサーバーで動かすぞ!

って思ってVPSでビルド後に実行したら謎のエラーが発生……

_useHead is not a functionってなんやねん。そんな訳あるかい

調べる

まず前提としてローカルではビルド後に正常に実行できることは確認しています。

ローカルではOK、VPSではNGという状態です。

そこでローカルとVPSでの差ってなんだろうと思ってまず思い当たったのがNginxの有無とhttpかhttpsかの違いでした。

なので、ローカルでNginx環境を構築し、httpsでアクセスできるようにしてみました。

結果はというと……

ローカルのNginx(https)でのビルド後の実行はなんの問題もなく正常に行えました。

(:3」∠)

どの段階でエラーになるのだろうか

次にプロジェクト内の各ファイルの読み込みを制限してどの段階でエラーが出るようになるのか調べてみました。(もちろんエラーになるのはVPSでのみなので、毎回VPSにreleaseして)

結論をいうとpages/配下になんかしらのページ.vueが存在するとエラーになることが判明しました(ここまで1週間消耗した……)

念の為クリーンなNuxt3 RC3をVPSに作って、そのままビルド・実行ができるのを確認し、その後にpages/に適当なページを作ってビルド・実行でエラーになるのを確認。

さて、これで困ったことに。

作ったページはindex.vue、中身もほぼ空

// index.vue
<script setup>
</script>

<template>
  <div>ページテスト</div>
</template>

しかもapp.vueではページを読み込まなくてもエラー

<template>
  <div>
    ページテスト
    <!--<NuxtPage/>を呼ばないのでindex.vueは読み込まれるかもしれないが基本意味をなさない-->
  </div>
</template>

さて困ったぞと。なにかしらのこちらで記載したコードが原因なら対処のしようもあるかもしれませんが、最小限構成でもだめとは……

issueも一応確認したのですが、もちろんこんな特殊な事象は報告されていません。

VPS下でしか発生していないので複製のしようもないですし……

詰んだ……(´・ω・`)

そういえばエラーが出るタイミングってnodeサーバーが立ち上がったあとの2回目以降なんだよなぁ

1回目はなぜか正常に動くし、サーバーを立ち上げ直しても1回目なら動く(たまに動かない)

ここにヒントがありそう……

原因

そこで正常時(1回目)とエラー時(2回目以降)で何が異なっているかを色々調査してみると……

初回のネットワーク状態

2回目以降のネットワーク状態

……?

なんか2回目以降には{ファイル名}.pagespeed.ce.〜みたいなファイルが読み込まれている。

PageSpeed

これってなにと記憶をたどってみると、かなり昔にVPSを構築した際にNginxにngx_pagespeedを導入していました。

参考:How to install Google PageSpeed to improve NGINX performance

参考:apache/incubator-pagespeed-ngx

こいつです! こいつが原因でした。

とりあえず全然これのメンテしてなかったので最新にアップデート……するも特に変わらず。

しかたないので、ひとまずpagespeedを無効にしてみると……2回目以降も正常に実行できるようになりました!

github見てもここ数年更新入っていないしひとまず無効にしておこうかなぁと思いました。通信速度も年々早くなってますしね……

しかしまぁNuxt2や他のNodeアプリでは特に問題なく動いていたので、まさかこの高速化対策が影響しているとは思いませんでした……

それにしてもngx_pagespeed(mode pagespeed)の話題は2013年前後のものが多く、最近の記事はあまりないですね。

追記

一応一部ディレクトリだけpagespeedの対象外とする方法もあるので、そちらも紹介しておきます。

今回の場合だとnuxtの実行ディレクトリである_nuxt以下を無効にすればいい感じです。

pagespeed Allow "*";
pagespeed Disallow "*/_nuxt/*";
コメント

コメントは承認制となっていますので、コメントを頂いても直ぐには表示されません。

なお、不適切な内容(スパムや悪意ある内容等)のコメントは公開されませんので、ご了承ください。

名もなき名無しさん
内容