事の発端
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/*";